修改主题颜色和样式

主题样式变量

下面是vdoing主题使用的css变量，你可以在.vuepress/styles/palette.styl修改这些变量覆盖它们：

//***vdoing主题-CSS变量***//

// 颜色
$bannerTextColor = #fff // 首页banner区(博客标题区)的文本颜色
$accentColor = #11A8CD
$activeColor = #ff5722
$arrowBgColor = #ccc

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 860px
$homePageWidth = 1100px
$rightMenuWidth = 230px // 右侧菜单

// 代码块
$lineNumbersWrapperWidth = 2.5rem

// 浅色模式
.theme-mode-light
  --bodyBg: #f4f4f4
  --mainBg: rgba(255,255,255,1)
  --sidebarBg: rgba(255,255,255,.8)
  --blurBg: rgba(255,255,255,.9)
  --textColor: #004050
  --textLightenColor: #0085AD
  --borderColor: rgba(0,0,0,.15)
  // 代码块浅色主题
  --codeBg: #f6f6f6
  --codeColor: #525252
  codeThemeLight()
  // 代码块深色主题
  // --codeBg: #252526
  // --codeColor: #fff
  // codeThemeDark()

// 深色模式
.theme-mode-dark
  --bodyBg: rgb(39,39,43)
  --mainBg: rgba(30,30,34,1)
  --sidebarBg: rgba(30,30,34,.8)
  --blurBg: rgba(30,30,34,.8)
  --textColor: rgb(140,140,150)
  --textLightenColor: #0085AD
  --borderColor: #2C2C3A
  --codeBg: #252526
  --codeColor: #fff
  codeThemeDark()

// 阅读模式
.theme-mode-read
  --bodyBg: rgb(240,240,208)
  --mainBg: rgba(245,245,213,1)
  --sidebarBg: rgba(245,245,213,.8)
  --blurBg: rgba(245,245,213,.9)
  --textColor: #004050
  --textLightenColor: #0085AD
  --borderColor: rgba(0,0,0,.15)
  --codeBg: #282c34
  --codeColor: #fff
  codeThemeDark()

上面的变量值可能不是最新的，最新的变量值可查看：palette.styl

样式修改与适配

当你想修改主题某个地方的样式时，或者你在给博客添加了一些新的模块或插件，发现样式和主题的样式不协调时，都可以在.vuepress/styles/index.styl 添加css样式来做修改。 需要注意的是，你在自己写的css样式中，请尽量使用主题提供的变量来进行适配。

小技巧：当你发现自己写的css样式优先级没有原来的样式高时，可以在样式后面添加!improtant后缀，使你的样式优先级是最高的。