自定义样式
主题定制
支持自定义样式。
主题虽然使用 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.scss
:root {
/** 主题颜色 */
--vp-c-brand-1: #5086a1;
--vp-c-brand-2: #6aa1b7;
--vp-c-brand-3: #8cccd5;
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
/** 背景颜色 */
--vp-c-bg: #ffffff;
--vp-c-bg-alt: #f6f6f7;
--vp-c-bg-elv: #ffffff;
--vp-c-bg-soft: #f6f6f7;
/** 文本颜色 */
--vp-c-text-1: rgba(60, 60, 67);
--vp-c-text-2: rgba(60, 60, 67, 0.78);
--vp-c-text-3: rgba(60, 60, 67, 0.56);
}
[data-theme="dark"] {
--vp-c-brand-1: #8cccd5;
--vp-c-brand-2: #6aa1b7;
--vp-c-brand-3: #5086a1;
--vp-c-brand-soft: rgba(131, 208, 218, 0.314);
--vp-c-bg: #1b1b1f;
--vp-c-bg-alt: #161618;
--vp-c-bg-elv: #202127;
--vp-c-bg-soft: #202127;
--vp-c-text-1: rgba(255, 255, 245, 0.86);
--vp-c-text-2: rgba(235, 235, 245, 0.6);
--vp-c-text-3: rgba(235, 235, 245, 0.38);
}提示
主题提供了 主题颜色工具 , 你可以使用它来创建自定义颜色。
