05. Vuepress2.x 修改默认样式(小技巧)

一、前言

Vuepress2.x 对样式的设置有较大变化，点此查看

 官方推荐使用插件@vuepress/plugin-palette 和 SCSS。对此插件未做详细研究，使用了一种土方式。

二、详解

步骤1：新建css文件，docs/.vuepress/public/css/index.css

步骤2：配置 docs/.vuepress/config.ts

 步骤3：先看看官网详解，也可在目录下找到官方变量

// 日间模式
node_modules\@vuepress\theme-default\lib\client\styles\vars.scss
// 夜间模式
node_modules\@vuepress\theme-default\lib\client\styles\vars-dark.scss

 步骤4：有两种方式：

方式一：直接修改默认变量，

默认样式如下：

 docs/.vuepress/public/css/index.css 中修改

/* 日间模式 */
:root {
    --c-brand: #409eff;
}

新样式

 方式二：直接在开发者工具中找到要修改的元素的css名称，然后在 docs/.vuepress/public/css/index.css 中修改即可。如：修改右上角站点名的字体颜色。

/* 左上角标题 */
.navbar .site-name {
    color: #409eff;
}

修改前

修改后