Theme Color

Mr.Hope ... February 26, 2021 20:39 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




 
 
 
 
 
 


// .vuepress/config.js
module.exports = {
  themeConfig: {
    themeColor: {
      blue: "#2196f3",
      red: "#f26d6d",
      green: "#3eaf7c",
      orange: "#fb9b5f",
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11

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