hexo mellow主题优化 · 更改代码高亮样式

欢迎访问我的个人博客

mellow主题自带的代码高亮主题并不令我满意，将代码高亮风格修改为tomorrow-night可能是个好的idea。方法如下：

路径

E:\blog\themes\mellow\source\css\_partial\highlight.less

修改

把最前面的几行：

@h-background: #f5f5f5; // 背景色
@h-current-line: #efefef;
@h-selectioon: #d6d6d6;
@h-foreground: #4d4d4c;
@h-comment: #8e908c; // 注释颜色
@h-red: #c82829;
@h-orange: #f5871f; // 高亮色
@h-yellow: #eab700;
@h-green: #718c00;
@h-aqua: #3e999f;
@h-blue: #4271ae;
@h-purple: #8959a8;
@h-fs: @font-size;

改为：

@h-background: #2d2d2d; // 背景色
@h-current-line: #393939;
@h-selectioon: #515151;
@h-foreground: #cccccc;
@h-comment: #999999; // 注释颜色
@h-red: #f2777a;
@h-orange: #f99157; // 高亮色
@h-yellow: #ffcc66;
@h-green: #99cc99;
@h-aqua: #66cccc;
@h-blue: #6699cc;
@h-purple: #cc99cc;
@h-fs: @font-size;

发现问题

deploy之后看了一下，发现这个行号及其违和（地狱般的配色）

再修改

还是highlight.less，找到以下段落：

.line-numbers() {
    color: @primaryColor_2; // 行号色，这个是引用了红色
    font-size: 0.85em;
}

把行号颜色改为白色：

.line-numbers() {
    color: #FFFFFF; // 行号色
    font-size: 0.85em;
}

然后就很舒适了。

效果展示：见此处

---

配色参考Tomorrow-night来自NexT主题->https://github.com/iissnan/hexo-theme-next