Theme Color

The theme allows you to customize theme color and even provide a picker.

Setting Default Theme Color

You should set the default theme color of your site in .vuepress/styles/config.scss through $theme-color:

.vuepress/styles/config.scss

$theme-color: #3eaf7c;

You can set different colors for light mode and dark mode:

.vuepress/styles/config.scss

$theme-color: (
  light: rgb(59, 186, 129),
  dark: rgb(30, 140, 90),
);

If you set multiple theme colors, the first color will become the default theme color, and the theme will provide a theme color picker:

.vuepress/styles/config.scss

$theme-color: #3eaf7c, #2196f3, #f26d6d, #fb9b5f;

You can also explicitly specify the colors for light mode and dark mode for one or more theme colors at the same time:

.vuepress/styles/config.scss

$theme-color: (
  (
    light: rgb(59, 186, 129),
    dark: rgb(30, 140, 90),
  ),
  #2196f3,
  #f26d6d,
  #fb9b5f
);

Try it