vuepress-theme-purple
A purple theme for Vuepress.
Online Demo
Usage
yarn add vuepress-theme-purple -D
# OR npm install vuepress-theme-purple -D
edit .vuepress/config.js
// .vuepress/config.js
module.exports = {
theme: 'purple',
themeConfig: {
// Please head documentation to see the available options.
}
}
Same with:
// .vuepress/config.js
module.exports = {
theme: 'vuepress-theme-purple',
themeConfig: {
// Please head documentation to see the available options.
}
}
Styling
palette.styl
To apply simple overrides to the styling of the default preset or define some variables to use later, you can create a .vuepress/styles/palette.styl
file.
There are some predefined variables you can tweak:
// 主背景色
$primaryBgColor ?= #764abc
// 主背景叠加的强调色
$primaryBgAccentColor ?= darken($primaryBgColor, 20%)
// 主文字色
$primaryTextColor ?= #ffffff
// 主文字色
$primaryTextAccentColor ?= #ffffff
// 网页标题颜色
$siteNameColor ?= $primaryTextColor
// 搜索框背景颜色
$searchboxBgColor ?= darken($primaryBgColor, 20%)
// 搜索框边框颜色
$searchboxBorderColor ?= $searchboxBgColor
// 搜索框边框强调色
$searchboxBorderAccentColor ?= lighten($primaryBgColor, 40%)
// 修改默认字体颜色
$textColor ?= $primaryBgColor
// 修改默认强调色
$accentColor ?= #ff6a00
// 导航垂直空白高度
$navbarVerticalPadding ?= 0.7rem
// 导航水平空白宽度
$navbarHorizontalPadding ?= 1.5rem
// 导航容器宽度
$navbarContainerWidth ?= 1400px
// 页面容器宽度
$pageContainerWidth ?= 1400px
Note
You should ONLY define variables in this file. Since palette.styl will be imported at the end of the root Stylus config file, as a config, several files will use it, so once you wrote styles here, your style would be duplicated by multiple times.