自定义样式
主题定制
支持自定义样式。
主题虽然使用 SASS 作为 CSS 预处理器，但所有的颜色使用的是 CSS Vars 定义， 因此，你可以创建一个 css 文件或 scss 文件，进行覆盖。
首先，在 .vuepress 目录中，创建一个 styles/index.css 文件， 然后在 客户端配置文件 中，引入该文件即可。
.vuepress/client.ts
import { defineClientConfig } from 'vuepress/client'
import './styles/index.css'
export default defineClientConfig({
// ...
}).vuepress/styles/index.css
:root {
--vp-c-brand-1: #5086a1;
}Style 文件
在 .vuepress 目录中，创建一个如 custom.css 的文件，
在这里添加额外的样式，或者覆盖默认样式：
:root {
scroll-behavior: smooth;
}你也可以利用它来覆盖默认主题的预定义 CSS 变量。
以下仅为变量名称与书写格式示例
这里的取值会随主题版本变化，实际取值请以 vars.css 为准。 其中的品牌色是 --vp-c-turquoise-* 的派生变量，深浅色模式下取值不同。
:root {
/** 主题颜色（派生自 --vp-c-turquoise-*） */
--vp-c-brand-1: var(--vp-c-turquoise-1);
--vp-c-brand-2: var(--vp-c-turquoise-2);
--vp-c-brand-3: var(--vp-c-turquoise-3);
--vp-c-brand-soft: var(--vp-c-turquoise-soft);
/** 背景颜色 */
--vp-c-bg: #ffffff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #ffffff;
--vp-c-bg-soft: #f6f6f7;
/** 文本颜色 */
--vp-c-text-1: rgb(60 60 67);
--vp-c-text-2: rgb(60 60 67 / 0.78);
--vp-c-text-3: rgb(60 60 67 / 0.72);
}
[data-theme="dark"] {
--vp-c-brand-1: var(--vp-c-turquoise-1);
--vp-c-brand-2: var(--vp-c-turquoise-2);
--vp-c-brand-3: var(--vp-c-turquoise-3);
--vp-c-brand-soft: var(--vp-c-turquoise-soft);
--vp-c-bg: #1b1b1f;
--vp-c-bg-alt: #161618;
--vp-c-bg-elv: #202127;
--vp-c-bg-soft: #202127;
--vp-c-text-1: rgb(255 255 245 / 0.86);
--vp-c-text-2: rgb(235 235 245 / 0.6);
--vp-c-text-3: rgb(235 235 245 / 0.55);
}提示
主题提供了 主题颜色工具 , 你可以使用它来创建自定义颜色。
