Skip to content

Vitepress 默认主题改变了??

如何自定义 viteprss 主题

我之前使用的"vitepress": "^1.0.0-beta.1"版本的,主题默认是绿色

现在默认改成了蓝色,emmm.... 好不习惯

改回去吧~~~

看了半天文档也没有看见如何修改回去,好吧, 只能自定义主题了

具体修改

要在 VitePress 中配置不同的颜色,你可以通过覆盖根级别的 CSS 变量来定制默认主题的 CSS。首先,在.vitepress/theme/index.js文件中导入默认主题和自定义 CSS 文件。然后,在.vitepress/theme/custom.css文件中,通过:root选择器覆盖你想要更改的颜色变量。例如,下面的代码片段展示了如何更改品牌颜色 1 和 2 为不同的颜色值:

.vitepress/theme/index.js

javascript
import DefaultTheme from "vitepress/theme";
import "./custom.css";

export default DefaultTheme;

.vitepress/theme/custom.css

css
:root {
  --vp-c-brand-1: #10b981;
  --vp-c-brand-2: #34d399;
  --vp-c-brand-3: #10b981;
}

.vp-doc a {
  text-decoration: none;
}

以上代码将品牌颜色 1 和 2 更改为#10b981#34d399

官方文档 https://vitepress.dev/guide/extending-default-theme#customizing-css