diff --git a/docs/notes/theme/guide/自定义样式.md b/docs/notes/theme/guide/自定义样式.md index 3647740f..3927ad39 100644 --- a/docs/notes/theme/guide/自定义样式.md +++ b/docs/notes/theme/guide/自定义样式.md @@ -10,17 +10,41 @@ permalink: /guide/custom-style/ 支持自定义样式。 -该功能由 [@vuepress/plugin-palette](https://v2.vuepress.vuejs.org/zh/reference/plugin/palette.html) 提供支持。 +主题虽然使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器,但所有的颜色使用的是 `CSS Vars` 定义, +因此,你可以创建 一个 css 文件 或 scss 文件,进行覆盖。 -主题使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器。 +首先,在 `.vuepress` 目录中,创建一个 `styles/index.css` 文件, +然后在 [客户端配置文件](https://v2.vuepress.vuejs.org/zh/guide/configuration.html#%E5%AE%A2%E6%88%B7%E7%AB%AF%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6) 中,引入该文件即可。 -用户可以通过 [style 文件](#style-文件) 来添加额外的样式。 +:::code-tabs + +@tab .vuepress/client.ts + +```ts {1} +import './styles/index.css' + +import { defineClientConfig } from 'vuepress/client' + +export default defineClientConfig({ + // ... +}) +``` + +@tab ./styles/index.css + +```css +:root { + --vp-c-brand-1: #5086a1; +} +``` + +::: ## Style 文件 -Style 文件的路径是 `.vuepress/styles/index.scss` 。 +在 `.vuepress` 目录中,创建一个如 `custom.css` 的文件, -你可以在这里添加额外的样式,或者覆盖默认样式: +在这里添加额外的样式,或者覆盖默认样式: ``` scss :root {