Theme Color

Mr.Hope ... 2021-2-26 Interface
  • Interface
  • Theme color
Less than 1 minute

This is an out-of-the-box feature that offers five theme color "red, blue, green, orange and purple" besides your theme color. You can also use your own theme color list.

# Disable

You can disable it by setting the theme field’s themeConfig.themeColor to false.

# Accent Color

The first color of the theme color is the default accent color, you need to set it with $accentColor in .vuepress/styles/palette.styl.

# Custom color

You need to configure themeConfig.themeColor in the format { colorname1: colorvalue, colorname2: colorvalue, ... }:

Example

To let the Stylus compiler to work, you also need to assign the color variable to $colorPicker and write it to palette.styl under .vuepress/styles:

Example
// .vuepress/styles/palette.styl
$colorPicker = {
   colorName1: red,
   colorName2: yellow,
   colorName3: blue
}
1
2
3
4
5
6