一、前言

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;
}

修改前

修改后 

 

Logo

前往低代码交流专区

更多推荐