如果你正准备着给你的的 WordPress 网站添上暗黑模式这个实用功能，那这篇攻略可就太适合你啦～ 接下来，我会分享暗黑模式能给网站带来哪些优点，比如让访问更便捷、给访客更健康的浏览体验、还能省点电量（哈哈），当然，也能满足不同用户的个性化喜好。之后，我还会手把手教你用无代码插件或者自定义代码这两种方式，轻松给 WordPress 装上暗黑模式。等看完这篇内容，你就会彻底明白 “为什么要加” 和 “怎么加” 暗黑模式！
什么是 WordPress 暗黑模式？
WordPress 暗黑模式，简单说就是让网站访客能自由切换 “明亮款” 和 “暗黑款” 两种主题风格。其实这个概念你可能早就不陌生了，就像电脑或手机系统里的明暗模式切换一样 —— 大多数操作系统都允许你在亮色和暗色界面之间做选择，有些还能根据时间自动切换！
WordPress 的暗黑模式也是这个道理～ 访客只要点一下按钮或者其他界面元素，就能轻松在明暗模式之间切换。不管是哪种模式，网站里的内容都是一模一样的，唯一的区别就是配色方案。
这是我们测试用的 WordPress 网站在默认 “明亮模式” 下的样子：
而这是同一个网站在 “暗黑模式” 下的模样：
我们的测试网站会先根据访客的系统偏好自动选择展示哪种模式，之后用户也能通过右下角的小工具手动调整，怎么舒服怎么来～
为什么要给 WordPress 加暗黑模式？
给网站加暗黑模式的理由可太多了，从满足用户的小偏好，到让网站更易访问，再到给访客带来更健康的浏览体验，对了，还能省电（再哈哈），方方面面都能照顾到：
1. 让网站更 “平易近人”
加暗黑模式的一大好处就是能让网站的可访问性大大提升。可访问性（通常简称 a11y）指的是让尽可能多的人都能顺畅使用网站，包括残障人士在内。比如，要确保用屏幕阅读器浏览网站的人也能有好的体验。
而且在很多地区，网站的可访问性还是法律要求！像《美国残疾人法案》（ADA）和《欧洲无障碍法案》都有相关规定。虽然暗黑模式并没有直接出现在《网络内容无障碍指南》（WCAG）里，但它在不少方面都能悄悄提升网站的可访问性：
- 让文字更清晰易读：暗黑模式下，背景色和文字色的对比度通常都很高，这对有视力问题的用户来说特别友好，能让他们更轻松地阅读内容。而高对比度本身就是 WCAG 的要求之一，所以加暗黑模式也能间接帮你符合这些规范哦。
- 帮特殊访客更好理解内容：有些患有阅读障碍（比如失读症）或其他视觉处理障碍的用户，看白底黑字会觉得很吃力，而暗黑模式就能给他们带来更舒适的体验。这种白底黑字带来的不适，还有个专门的名字叫 “暗视敏感度综合征” 或 “伊尔伦综合征” 呢。
- 减少偏头痛患者的困扰：有偏头痛问题的人，医生通常会建议他们避开强光。暗黑模式能营造出柔和的浏览环境，让这些用户既能享受你的网站内容，又能减少偏头痛发作的风险。
不过暗黑模式也不是在所有情况下都适合提升可访问性。比如，患有散光的人看黑底白字可能会觉得模糊，出现一种叫 “光晕” 的效果。所以给用户提供明暗模式的选择，才是最周全的做法～
2. 给访客更健康的浏览体验
网站加了暗黑模式，还能从两个方面给访客的健康保驾护航。
首先能帮大家养成更好的睡眠习惯，尤其是在睡前浏览网站的时候。睡眠专家早就提醒过，睡前几小时要尽量避开强光。网站越亮，对访客的睡眠影响就越大。而有了暗黑模式，访客就算睡前想逛你的 WordPress 网站，也不会太打乱自己的睡眠节奏啦。
而且很多暗黑模式都能跟着访客的系统偏好自动切换。如果访客设置了系统在睡前自动切换到暗黑模式，你的网站也会乖乖跟着调整，特别贴心～
暗黑模式还能减轻眼睛负担，减少视疲劳。比如，中佛罗里达大学（UCF）的一项研究就发现：“参与者在暗黑模式下的视疲劳明显比明亮模式下轻”。不仅如此，参与者在暗黑模式下的视觉敏锐度更高，完成测试时的错误率也显著更低。
3. 更省电量
虽然这不是对所有访客都有用，但对用 OLED 屏幕的用户来说，暗黑模式可是个省电小能手！因为 OLED 屏幕能单独关闭一个个像素，而不是照亮整个屏幕，所以显示深色像素的时候，耗电量会少很多。
具体能省多少电，要看用户的屏幕亮度设置。普渡大学的一项研究分析了不同亮度下的屏幕耗电量，结果发现：低亮度时，暗黑模式能省 3%-9% 的电；而亮度越高，省电量就越明显，能达到 39%-47% 呢！
4. 满足用户的个人喜好
除了上面这些实实在在的好处，还有些访客就是单纯喜欢暗黑模式～ 可能是因为上面提到的某点原因，也可能就是自己觉得暗黑模式看起来更舒服、更对胃口。给网站加个暗黑模式选项，就能让这些用户拥有更合心意的浏览体验啦。
4 种给 WordPress 添加暗黑模式的方法
如果你已经心动，想给 WordPress 网站加暗黑模式，其实有好几种办法可以选。下面我就给你详细说说这 4 种方式：
- 用 WordPress 暗黑模式插件
- 选自带暗黑模式的主题
- 用暗黑模式 JavaScript 库
- 自己写代码实现
1. 用 WordPress 暗黑模式插件
如果你不想碰代码，那用插件绝对是最简单的方式，分分钟就能搞定暗黑模式，之后还能根据需要调整设置。
比如WordPress.org上超受欢迎的免费插件 WP Dark Mode，用起来就特别方便。激活插件后，网站立刻就能用上暗黑模式 —— 我们前面示例里的暗黑模式，用的就是它哦！
它会先根据访客的系统偏好自动选择展示模式，用户也能通过右下角的悬浮小工具手动切换。要是你想调整暗黑模式的效果，进入插件设置页面就行啦，在这里可以修改样式、设置默认模式等等。
除了 WP Dark Mode，还有这些免费的暗黑模式插件也很受欢迎，你可以试试：
- Dracula Dark Mode
- Dark Mode Toggle
- DarkMySite
不过要注意，这些插件会直接影响网站的前台显示效果，所以一定要先测试再在正式网站上激活！
2. 选自带暗黑模式的主题
还有一种不用写代码的办法，就是直接选一个自带暗黑模式功能的 WordPress 主题。
比如 Rich Tabor 开发的免费主题 Kanso，就内置了暗黑模式功能，你可以去 Rich 的个人网站看看实际效果～
要是你已经用其他主题搭建好了网站，为了暗黑模式特意换主题就不太划算啦。但如果你的网站还在搭建中，而且暗黑模式对你来说很重要，那选主题的时候，就可以把 “自带暗黑模式” 这一点加进你的筛选条件里哦。
3. 用暗黑模式 JavaScript 库
如果你不怕碰代码，也可以用现成的 JavaScript 库来给网站加暗黑模式。要是你是 WordPress 开发者，还能把这些库用到自己开发的插件或主题里 —— 其实WordPress.org上有些暗黑模式插件，就是基于这些库做的呢。
下面这两个是最受欢迎的暗黑模式库，你可以了解一下：
- darkmode.js
- drkmd.js
同样，用这些库之前，也建议先在测试网站上试试，确认没问题再用到正式网站上。如果用的是 Kinsta 主机，直接用它自带的 staging 功能就行。
darkmode.js
这个库用的是 VanillaJS 和 CSS 的 mix-blend-mode 属性，不用额外配置就能实现暗黑模式。默认情况下，它会添加一个悬浮切换按钮，访客点一下就能在明暗模式之间切换；要是你想自己设计切换方式，也能把这个按钮关掉。
访客第一次访问网站时，它会根据系统偏好选择模式，还支持本地存储 —— 这样访客下次再来，网站就会记得他们上次选的模式。你可以去 darkmode.js 的官方页面看看实际效果。
因为它用了 mix-blend-mode，不用你自己写 CSS 规则，差不多算是 “即插即用”，特别省心。
drkmd.js
这个库的思路有点不一样。它不是用 mix-blend-mode 自动生成暗黑模式，而是让你自己指定暗黑模式要用的 CSS 样式，然后通过 “theme-light” 和 “theme-dark” 这两个类，把这些样式应用到网站上。
你还能轻松添加自己的切换按钮：只要在脚本标签里加个 data-drkmd-attach 属性就行。另外，它也支持自动检测用户的系统偏好，还能把用户的选择存在本地存储里，功能特别实用。
4. 自己写代码实现
除了用 JavaScript 库，你也可以自己写代码来实现暗黑模式。通常的思路是，给明亮模式和暗黑模式分别写一套 CSS 规则，然后通过代码控制切换。
比如你可以用 jQuery 来实现（有专门的教程可以参考）：先写好明暗两种模式的 CSS 规则，再添加一个按钮或开关。当用户点击开关时，就用 JavaScript 切换要应用的 CSS 类 —— 上面提到的教程，就是用 jQuery 的 hasClass ()、addClass () 和 removeClass () 方法来实现的。
如果你想让功能更强大，也可以试试更复杂的写法。比如有个 JavaScript 教程就教你给暗黑模式加两个实用功能：
- 自动检测用户的系统偏好模式
- 存储用户的选择，下次访问时自动加载
不过用上面提到的暗黑模式 JavaScript 库会更简单。如果不想用库，这些自定义代码的方法也能帮你实现暗黑模式～
如何开启 WordPress 后台暗黑模式？
前面说的都是给网站前台加暗黑模式，其实你也可以给 WordPress 后台加暗黑模式！这样你管理网站的时候，也能体验上暗黑模式的各种好处，
给后台加暗黑模式，最简单的还是用插件。这类插件主要分两种：
- 只改样式，保留原来的后台界面：比如 Dark Mode for WP Dashboard 插件，就能在不改变后台布局的情况下，给它换上暗黑模式的样式。
- 自定义后台界面，同时支持暗黑模式：比如这些插件，不仅能让你体验全新的后台界面，还自带暗黑模式，你可以试试：
- UiPress
- WP Adminify
- CommandUI
另外，前面提到的一些前台暗黑模式插件，比如 WP Dark Mode，也支持开启后台暗黑模式，功能很全面～
给网站加暗黑模式，既能提升可访问性、给访客更健康的浏览体验、帮 OLED 屏幕用户省电量，还能满足部分用户的个人喜好，好处多多～
给 WordPress 加暗黑模式的方法也很多：不想写代码，就用插件或自带暗黑模式的主题；想稍微动动手，就用 JavaScript 库或自己写代码。
不过暗黑模式会直接影响网站的前台显示，所以一定要先充分测试，确认没问题后再在正式网站上启用！
