修改颜色
大约 1 分钟
此页面指导你如何自定义主题颜色。
修改内置颜色
主题通过调色板控制颜色,你可能需要分为两种情况设置你的颜色:
- 此颜色在日间模式和夜间模式保持不变,如主题色。
- 此颜色在日间模式、夜间模式下不同,如背景色、字体、边框颜色等。
调色板文件是 VuePress 项目文件夹下的 .vuepress/styles/palette.scss
文件。
对于前者,你需要在 palette.scss
中写入变量值,如:
$theme-color: #3eaf7c;
对于后者,你需要设置一个 Map,键名为 light
和 dark
,值为颜色值,如:
$bg-color: (
light: #fff,
dark: #000,
);
所有可用的颜色变量详见 主题配置 → 颜色设置。
修改其他颜色
有些时候,你可能希望修改一些不在 palette.scss
中的颜色,比如代码块的背景色,此时你可以通过开发者工具查看对应的颜色属性值是否是 CSS 变量,如果是你可以在 index.scss
中手动覆盖这一变量值:
// 覆盖代码块演示标题颜色
#app {
--code-demo-c-bg-header: #fff;
html[data-theme="dark"] & {
--code-demo-c-bg-header: #000;
}
}
如果不是,请你自己编写选择器覆盖它们:
// 覆盖代码块语言字体颜色
pre[class*="language-"]::before {
color: #fff !important;
html[data-theme="dark"] & {
background-color: #222 !important;
}
}