更改waline主题颜色

发表于 分类于 ， Waline： 阅读次数： 本文字数： 909 阅读时长 ≈ 1 分钟

  之前就想自定义waline的样式以适配当前的背景图，但又因为没学过css，也不会自己上传cdn，所以向waline的开发者求助，最后知道了!important大法，希望能给到和我一样没接触过css的博主一些参考。

  • 修改主题配置文件

  在.../next下的_config.yml文件中搜索custom file paths，这是自定义文件的路径，将#style: source/_data/styles.styl前面的#去掉，并且到这个路径下创建对应的文件夹和文件，这样可以在styles.styl中自定义样式并覆盖主题的样式，并且方便后续的维护和更改。

  • 定位到需要修改的样式

  在自己的博客页面检查需要修改的元素，比如我要修改waline的按钮颜色，那么右键按钮检查就可以调出开发者工具：

可以看到这个按钮的样式代码，发现这里的颜色统一采用了一个全局样式--waline-theme-color，如果能将这个元素覆盖掉，那就不用一一修改了。

  将鼠标悬浮到这个按钮后是另一个颜色，这里查看源代码可以看到悬浮时的样式：

在active处同样采用了一个全局颜色--waline-active-color，那么要做的就是把这两个颜色覆盖掉。再进行查找可以找到全局声明：

这里就包含了主题原来的颜色。由于我已经进行了修改，所以图片显示的是已被覆盖的样子。

  • !important覆盖样式

  由于waline插件的import采用的是官方提供的cdn，想要在本地修改样式就需要以覆盖的形式。这里我们打开开始所创建的styles.styl，在里面写入：

1
2
3
4
:root {
  --waline-theme-color: #4b3425 !important;
  --waline-active-color: #9c8877 !important;
}

颜色改成需要的颜色即可。

  效果可以参考评论区，修改全局样式的好处就是可以做到很方便的统一：

  可以看到在后面加入!important后，此声明将覆盖任何其他声明。但是这样做会破坏样式表中的固有的级联规则，使得找bug变得困难，所以不推荐大量使用，有条件的还是建议自己将官方css文件进行修改并上传cdn导入自己的主题。