修改主题颜色和样式

主题样式变量

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

  1. //***vdoing主题-CSS变量***//
  3. // 颜色
  4. $bannerTextColor = #fff // 首页banner区(博客标题区)的文本颜色
  5. $accentColor = #11A8CD
  6. $activeColor = #ff5722
  7. $arrowBgColor = #ccc
  8. $badgeTipColor = #42b983
  9. $badgeWarningColor = darken(#ffe564, 35%)
  10. $badgeErrorColor = #DA5961
  12. // 布局
  13. $navbarHeight = 3.6rem
  14. $sidebarWidth = 18rem
  15. $contentWidth = 860px
  16. $homePageWidth = 1100px
  17. $rightMenuWidth = 230px // 右侧菜单
  19. // 代码块
  20. $lineNumbersWrapperWidth = 2.5rem
  22. // 浅色模式
  23. .theme-mode-light
  24.   --bodyBg: #f4f4f4
  25.   --mainBg: rgba(255,255,255,1)
  26.   --sidebarBg: rgba(255,255,255,.8)
  27.   --blurBg: rgba(255,255,255,.9)
  28.   --textColor: #004050
  29.   --textLightenColor: #0085AD
  30.   --borderColor: rgba(0,0,0,.15)
  31.   // 代码块浅色主题
  32.   --codeBg: #f6f6f6
  33.   --codeColor: #525252
  34.   codeThemeLight()
  35.   // 代码块深色主题
  36.   // --codeBg: #252526
  37.   // --codeColor: #fff
  38.   // codeThemeDark()
  40. // 深色模式
  41. .theme-mode-dark
  42.   --bodyBg: rgb(39,39,43)
  43.   --mainBg: rgba(30,30,34,1)
  44.   --sidebarBg: rgba(30,30,34,.8)
  45.   --blurBg: rgba(30,30,34,.8)
  46.   --textColor: rgb(140,140,150)
  47.   --textLightenColor: #0085AD
  48.   --borderColor: #2C2C3A
  49.   --codeBg: #252526
  50.   --codeColor: #fff
  51.   codeThemeDark()
  53. // 阅读模式
  54. .theme-mode-read
  55.   --bodyBg: rgb(240,240,208)
  56.   --mainBg: rgba(245,245,213,1)
  57.   --sidebarBg: rgba(245,245,213,.8)
  58.   --blurBg: rgba(245,245,213,.9)
  59.   --textColor: #004050
  60.   --textLightenColor: #0085AD
  61.   --borderColor: rgba(0,0,0,.15)
  62.   --codeBg: #282c34
  63.   --codeColor: #fff
  64.   codeThemeDark()

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

样式修改与适配

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

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