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