深色模式可能会消耗更少的电量

[Dimaeiya333]

虽然并不是对所有访客都有好处，但提供黑暗模式的另一个小优势是它在 OLED 屏幕上消耗的电量更少。由于 OLED 显示器能够关闭单个像素而不是照亮整个屏幕，因此 OLED 显示器显示深色像素所需的功耗较少。

确切的节能效果取决于用户的屏幕亮度设置，但范围可以从低亮度时适度的 3%-9% 到用户屏幕亮度调高时的大幅节能 39%-47%。

这些数据来自普渡大学的一项研究，该研究考察了不同亮度水平下的显示器功耗。

有些人只是更喜欢深色模式
除了提到的优点之外，您还应该记住，一些访问者可能只是因为个人喜好而想使用深色模式。

这些偏好可能是列出的一些优点的结果，或者有人可能出于自己的原因更喜欢深色模式。

通过提供深色模式作为选项，您可以为这些访问者创造更好的用户体验。

在 WordPress 中实现深色模式的 4 种方法
如果您热衷于向 WordPress 添加深色模式，您可以通过多种方式实现。

接下来，我们将讨论四种不同的选项：

使用 WordPress 的暗模式插件
选择已经支持深色模式的主题
使用暗模式 JavaScript 库
使用您自己的代码解决方案
1.使用WordPress的暗模式插件
如果您不想使用代码，向网站添加暗模式的最简单方法之一就是使用 WordPress 暗模式插件。

大多数这些插件之所以如此易于使用，是因为它们基本上是即插即用的。您可以在几分钟内启动并运行深色模式，然后根据需要进行调整。

例如，以下是最流行的选项之一的工作原理—— 来自 WordPress.org 的免费WP 深色模式插件。

激活插件后，您的网站将立即拥有可运行的暗模式。事实上，它与我们在上面的示例 比特币数据 屏幕截图中使用的插件相同。

它将根据每个访问者的操作系统偏好自动选择要使用的版本。然后，用户可以使用右下角的浮动小部件在模式之间手动切换。

深色模式下的 WordPress 网站示例。
深色模式下的 WordPress 网站示例。
如果您想调整深色模式的工作方式，可以转到插件设置。在那里，您可以调整样式、选择如何选择默认体验等等。

WP 深色模式插件设置区域。
WP 深色模式插件设置区域。
如果您对插件路线感兴趣，可以考虑以下一些免费的暗模式插件：

WP 深色模式
德古拉黑暗模式
深色模式切换
黑暗我的网站
由于这些插件会对您的前端网站产生很大影响，因此我们强烈建议您在生产网站上激活它们之前先对其进行测试。

如果您使用Kinsta 托管的 WordPress 托管，则可以使用Kinsta 的暂存功能在站点的安全沙箱版本中轻松测试这些插件。

2.选择已经支持深色模式的主题
无需代码即可访问深色模式的另一种方法是选择具有内置深色模式功能的 WordPress 主题。

例如，Rich Tabor 的免费 Kanso 主题包含其自己的内置暗模式功能，您可以在Rich 的个人网站上看到该功能的实际效果。

Kanso 主题包含内置的深色模式功能。
Kanso 主题包含内置的深色模式功能。
如果您已经使用其他主题创建了网站，那么仅仅为了访问深色模式而更改主题可能不值得。但是，如果您仍在致力于构建网站并且暗模式对您很重要，那么可能值得将其包含在选择 WordPress 主题时要考虑的功能列表中。

3.使用暗模式JavaScript库
如果您习惯使用代码，还可以使用预构建的JavaScript 库向您的网站添加暗模式。

或者，如果您是 WordPress 开发人员，您还可以使用这些库轻松地将暗模式添加到您正在开发的插件或主题中。事实上，WordPress.org 的一些暗模式插件就是基于这些库的。

您可以找到几个不同的暗模式库，但以下是两个最流行的选项：

暗模式.js
dkmd.js
如果您想使用这些库中的任何一个，我们强烈建议您在将代码添加到生产网站之前在临时站点上测试它们。同样，如果您使用 Kinsta 托管 WordPress 网站，则可以使用 Kinsta 的内置暂存功能。

暗模式.js
Darkmode.js使用 VanillajS 和CSSmix-blend-mode添加深色模式，无需任何额外配置。默认情况下，它添加了一个浮动切换开关，访问者可以使用它在深色模式和浅色模式之间切换，但如果您更喜欢创建自己的解决方案，则可以禁用此小部件。

用户第一次访问时，会根据自己的操作系统偏好选择模式，并且它还支持本地存储，以便保存访问者的偏好以供将来访问。您可以在上面链接的 darkmode.js 页面上查看正在运行的预览。

由于它使用mix-blend-mode而不是要求您添加自己的 CSS 规则，因此它实际上是即插即用的。

dkmd.js
Drkmd.js使用略有不同的方法。mix-blend-mode它允许您直接指定要用于深色模式的CSS，而不是使用 CSS自动为您的网站创建深色模式。然后，您可以使用theme-light和类将这些样式规则添加到您的网站theme-dark。

它还允许您轻松添加自己的开关以在模式之间切换。为此，请将该属性添加