修改颜色

大约 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;
  }
}