Theme Color
Less than 1 minute
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
:
$theme-color: #3eaf7c;
You can set different colors for light mode and dark mode:
$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:
$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:
$theme-color: (
(
light: rgb(59, 186, 129),
dark: rgb(30, 140, 90),
),
#2196f3,
#f26d6d,
#fb9b5f
);
Try it
Changelog
3/28/25, 8:15 AM
View All Changelog
02666
-on00315
-on6d493
-on738a3
-onfadc2
-on6c537
-ond0da5
-on79ac6
-onf07bd
-on6d856
-on2243a
-on98f84
-on2fa50
-on257a2
-onb723b
-on3fe2f
-on9856d
-on23515
-on9cdd7
-on63d09
-onfd395
-on1eb77
-on60053
-on0c093
-onf6ff0
-on234d7
-on3c199
-on