博客暗黑模式怎么做？一晚上搞定深色主题

有天晚上11点多，我躺床上刷自己的博客检查错别字，屏幕白得跟手电筒似的，晃得眼睛疼。第二天就有读者留言："哥，你这博客晚上看太刺眼了，能不能加个夜间模式？"

行吧，安排。原本以为要折腾好几天，结果一个晚上就搞定了，核心代码不到100行。今天把整个过程分享出来，你的博客也可以照着做，纯前端方案，不挑博客程序，Z-Blog、WordPress、Typecho、Hexo全都适用。

暗黑模式的三种实现方案

动手前先搞清楚有哪几条路，选适合自己的：

方案	原理	优点	缺点
CSS媒体查询	跟随系统深色设置自动切换	零JS、体验最顺	用户不能手动切换
CSS变量+JS切换	点按钮切换主题变量	灵活、可记住偏好	要写一点JS
filter反色	一行CSS全页面反色	最快最省事	图片会反色变鬼图

我的建议：方案一和方案二结合。默认跟随系统，同时给个手动切换按钮，用户的选择存在localStorage里，下次访问还记得。这也是目前主流网站的做法。

filter反色那个方案就别用了，图片全变底片效果，蓝天变成橙色，人脸变成阿凡达，翻车现场看过一次就忘不掉……

第一步：把颜色抽成CSS变量

这是整个方案的地基。把主题里写死的颜色全部换成CSS变量：

```css

:root {

--bg: #ffffff;

--text: #333333;

--card: #f7f7f7;

--border: #e5e5e5;

--link: #4285f4;

}

html[data-theme="dark"] {

--bg: #1a1a2e;

--text: #d0d0d0;

--card: #24243e;

--border: #3a3a52;

--link: #7ab5ff;

}

body {

background: var(--bg);

color: var(--text);

}

```

然后全局搜索你CSS里的#fff、#333这些写死的颜色，逐个替换成var(--bg)、var(--text)。这一步最花时间，但值得——以后想换任何配色，改几个变量就行。

有个细节：深色模式的文字别用纯白#fff，太扎眼，用#d0d0d0这种灰白色，长时间阅读舒服很多。背景也别用纯黑，#1a1a2e这种深蓝黑更有质感。

第二步：加切换按钮和记忆功能

页面上放个按钮（一般在导航栏右侧，月亮/太阳图标），配上这段JS：

```javascript

const btn = document.getElementById('theme-toggle');

博客暗黑模式怎么做？一晚上搞定深色主题-第1张图片-无双博客

const saved = localStorage.getItem('theme');

const sysDark = matchMedia('(prefers-color-scheme: dark)').matches;

// 优先用户选择，没选过就跟随系统

document.documentElement.dataset.theme = saved || (sysDark ? 'dark' : 'light');

btn.onclick = () => {

const now = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';

document.documentElement.dataset.theme = now;

localStorage.setItem('theme', now);

};

```

就这么点代码，逻辑是：先看用户以前选过没有，选过就用他的；没选过就跟随系统设置。

重要：这段JS要放在head里内联执行，不要放页脚。 不然页面先渲染成白色再变黑，会闪一下白屏，专业术语叫FOUC，晚上看特别刺眼，体验直接减分。

第三步：处理图片和代码块这些细节

主体颜色搞定后，还有几个容易漏的地方：

1. 图片太亮：深色模式下给图片降一点亮度，`html[data-theme="dark"] img { filter: brightness(0.85); }`，既不刺眼又不失真

2. 代码高亮：如果用了highlight.js或prism，直接给深色模式换一套暗色代码主题，比自己调省事

3. logo适配：深色logo在黑背景里会消失，准备两套logo用CSS切换，或者直接换成带描边的透明PNG

4. 第三方评论框：像Twikoo、Artalk都支持暗黑模式参数，记得同步切换

5. 滚动条：Windows下白色滚动条配黑页面很出戏，用scrollbar-color调一下

对了，meta标签里加一行``，浏览器自带的表单控件、滚动条也会跟着变色，白捡的适配。

暗黑模式对SEO有影响吗

直接说结论：没有直接影响，但有间接好处。

百度不会因为你有夜间模式就给你加排名，但用户停留时间会变长——晚上看着舒服，自然多读几篇。停留时长、跳出率这些用户行为数据，是实打实影响排名的。我加了暗黑模式后，晚上时段（22点-1点）的平均停留时间从1分40秒涨到了2分15秒，跳出率降了6个点。这买卖划算。

FAQ 常见问题

Q：不会写代码能搞吗？

A：WordPress有现成插件（WP Dark Mode），Z-Blog部分主题自带夜间模式。实在不行把本文代码丢给AI，让它帮你改到你的主题里。

Q：会拖慢网站速度吗？

A：几乎不会。CSS变量是原生特性，JS就十几行，加起来不到2KB。

Q：深色模式配色有什么工具推荐？

A：推荐Realtime Colors这个网站，实时预览深浅两套配色，调好直接导出CSS变量。

Q：微信内置浏览器支持吗？

A：支持CSS变量和localStorage，没问题。老旧浏览器（IE系）不支持，但2026年了，可以放心不管它。

博客暗黑模式怎么做？一晚上搞定深色主题