更改博客主题颜色

博客原本的主题颜色是淡蓝色，博主觉得黑绿配色挺好看的，于是将博客的副色调改成了绿色。

首先，需要找到docs/.vuepress/theme/styles/custom.css文件，如果没有的话需要新建一个。因为原本其中的内容都是被注释掉的，所以想要什么颜色，直接在上面添加或者修改就好。如下所示：

docs/.vuepress/theme/styles/custom.css

:root {
  /**
   * 主题色
   * -------------------------------------------------------------------------- */
  --vp-c-brand-1: #5086a1;                            /* 链接颜色、强调色 */
  --vp-c-brand-2: #6aa1b7;                            /* 链接、按钮 hover 颜色 */
  --vp-c-brand-3: #8cccd5;                            /* 背景色、边框色 */
  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);      /* 辅助色 */
  /**
   * 文本颜色
   * -------------------------------------------------------------------------- */
  --vp-c-text-1: rgba(60, 60, 67);                    /* 主要文本 */
  --vp-c-text-2: rgba(60, 60, 67, 0.78);              /* 次要文本 */
  --vp-c-text-3: rgba(60, 60, 67, 0.56);              /* 辅助文本 */
  /**
   * 背景色
   * -------------------------------------------------------------------------- */

  --vp-c-bg: #fff;                                    /* 主体背景 */
  --vp-nav-bg-color: #fff;                            /* 导航栏背景 */
  --vp-nav-screen-bg-color: #fff;                     /* 移动端导航栏 */
  --vp-local-nav-bg-color: #fff;                      /* 页面内导航栏 */
  --vp-sidebar-bg-color: #f6f6f7;                     /* 侧边栏背景 */
  --vp-code-block-bg: #f6f8fa;                        /* 代码块背景 */
}

[data-theme="dark"] {
  /**
   * 主题色
   * -------------------------------------------------------------------------- */
  --vp-c-brand-1: rgba(56, 205, 133, 1);              /* 链接颜色、强调色 */
  --vp-c-brand-2: rgba(71, 255, 165, 1);              /* 链接、按钮 hover 颜色 */
  --vp-c-brand-3: rgba(56, 205, 133, 1);              /* 背景色、边框色 */
  --vp-c-brand-soft: rgba(131, 218, 159, 0.314);      /* 辅助色 */
  /**
   * 文本颜色
   * -------------------------------------------------------------------------- */
  --vp-c-text-1: rgba(255, 255, 245, 0.86);           /* 主要文本 */
  --vp-c-text-2: rgba(235, 235, 245, 0.6);            /* 次要文本 */
  --vp-c-text-3: rgba(235, 235, 245, 0.38);           /* 辅助文本 */
  /**
   * 背景色
   * -------------------------------------------------------------------------- */
  --vp-c-bg: #1b1b1f;                                 /* 主体背景 */
  --vp-nav-bg-color: #1b1b1f;                         /* 导航栏背景 */
  --vp-nav-screen-bg-color: #1b1b1f;                  /* 移动端导航栏 */
  --vp-local-nav-bg-color: #1b1b1f;                   /* 页面内导航栏 */
  --vp-sidebar-bg-color: #161618;                     /* 侧边栏背景 */
  --vp-code-block-bg: #202127;                        /* 代码块背景 */
}

---

其次，还需要在docs/.vuepress/client.ts中将import './theme/styles/custom.css'这行解除注释。

docs/.vuepress/client.ts

import { defineClientConfig } from 'vuepress/client'
import './theme/styles/custom.css'
// import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
// import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
// import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
// import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
// import CustomComponent from './theme/components/Custom.vue'