深色模式！

2026年10月30日

Writefreely 只有最基础的自定义 CSS 功能，但好在本身它的模板也不复杂，只需要稍微改一改颜色就可以了。

其实更直接的方法可能是把整个网站反色，但考虑到我还是上传过一张图片的，遂放弃。

可惜后台不能自定义 CSS，但转念一想，WordPress 的后台在不装插件的情况下也没办法改 CSS，于是我释怀了。

顺便把 CSS 代码放出来。可能不太完美，而且颜色纯粹是出于我的个人喜好，特别是链接的颜色，如果不喜欢的话可以自己改。

以及一放出来 CSS 我就发现问题了，很明显我没有考虑过代码块的深色模式问题……这可能要通过替换语法高亮代码的主题来解决了。

body {
    background-color: #000;
    color: #eee;
}

#paging a,
.e-content a {
    color: DodgerBlue;
}

#paging a:visited,
.e-content a:visited {
    color: MediumSlateBlue;
}

nav#manage ul a,
body h1 a,
body header h2 a,
body h1 a:hover,
body header h2 a:hover,
header nav a,
.post-title a:link
 {
    color: #fff;
}

body h1 a:visited,
body header h2 a:visited,
header nav a:visited,
.post-title a:visited {
    color: #ccc;
}

nav#manage ul ul {
    background: #000;
}

nav#manage ul li:hover {
    background: #333;
}

nav#manage ul ul li img.ic-18dp {
    filter: invert(1);
}

body footer nav,
body footer nav a:hover,
body footer ul a:hover,
header p.description {
    color: #ddd;
}

body#collection code,
body#post code,
body#subpage code {
    background-color: #111;
    border: 1px solid #333;
}

body#collection pre,
body#post pre,
body#subpage pre {
    background: 0 0;
}

结果我发现官方有深色模式，在这里：Dark Theme — Themes，不过没有考虑过语法高亮的问题。

所以如果要把语法高亮也替换掉的话要么就复制一份官方的主题粘贴进自定义 CSS 的地方，然后在所有地方加上 !important（因为内联 CSS 的加载时机比 HighlightJS 要早），要么就替换掉原来的文件。

然后把文件替换了，在和 Cloudflare 斗智斗勇之后（对我忘了我这个网站跑在 Cloudflare 后面了），发现嗯对原生的主题覆盖了一部分 HLJS 的主题……

终于在擦完所有屁股后，代码高亮也变成深色了。