如何自定义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
import DefaultTheme from 'vitepress/theme'
import './custom.css'
export default DefaultTheme
.vitepress/theme/custom.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】