如何在 WordPress 中激活夜间模式

一段时间以来，操作系统和应用程序已经包含了它们的图形界面版本，其中白色背景被黑色背景取代，以减少夜间发光，从而减少对眼睛的伤害。 这称为夜间模式。

无论是时尚还是因为它确实有效，夜间模式越来越受欢迎。 有些人确保夜间模式对环境有益，因为黑屏比白屏消耗更少的能量。 但也有这种黑暗模式的批评者。

尽管如此，这可能是您有兴趣在您的网站上拥有的功能，为此，今天我们将讨论 WordPress 中的夜间模式。

默认情况下，WordPress 尚不包含夜间模式，但在 WordPress 仪表板和前端都有添加夜间模式的选项。 像往常一样，插件是使用这种奇怪的视觉功能扩展 WordPress 的解决方案。

如何在 WordPress 仪表板上激活夜间模式

我们从 WordPress 的暗模式插件开始，它允许您在 WordPress 仪表板上激活夜间模式。 它易于使用且免费。

首先是安装和激活插件。 我们可以直接在 WordPress 插件目录中通过插件菜单直接在 WordPress 仪表板中找到它，如上面的屏幕截图所示。

安装暗模式插件后，您的 WordPress 的每个用户都将在他们的个人资料中选择在他们的仪表板上激活它：

这个插件的好处是每个用户都可以选择他们希望在暗模式或正常模式下查看 WordPress 仪表板的方式。 这样，如果有人想像往常一样继续使用 WordPress Dashboard，白色背景，那么这样做没有问题。

在上一个屏幕截图中，您可以看到启用暗模式的结果。 它看起来很棒！ 我真的很喜欢在页面的中央部分也有黑色背景颜色的结果，而不仅仅是在侧面菜单中。

不幸的是，WordPress 暗模式插件存在一个悬而未决的问题：提供与 Gutenberg 块编辑器的兼容性。 在以下屏幕截图中，您可以看到它还不能将深色背景应用于古腾堡：

我想如果插件足够成功并且用户要求它，它的开发人员最终会对其进行调整，以便块编辑器也出现在夜间模式中。 无论如何，古腾堡疯狂的开发速度和其风格的“频繁”更新使得改编有些复杂。

如何为您的 WordPress 访问者激活夜间模式

暗模式插件仅在 WordPress 仪表板上添加夜间模式。 您网站的其余部分，即访问者看到的前端，将继续保持相同的外观，而不会发生任何变化。

如果您希望访问者可以选择在您的网站上激活夜间模式，使用深色背景而不是浅色背景，您必须安装 WP Night Mode 插件。

这个插件，就像黑暗模式一样，是完全免费的，你也可以在 WordPress 插件目录中找到它。

安装后，您将不会在“设置”或任何其他菜单中看到任何内容。 您需要做的是转到外观菜单并在那里编辑您的菜单。 在您的主菜单中，您必须添加一个没有任何特定 URL 的自定义链接。 这个新的菜单项将帮助我们添加开关来激活和停用夜间模式。

在菜单管理界面本身中，您必须打开右上角的屏幕选项以激活添加 CSS 类的选项，如以下屏幕截图所示：

完成此操作后，当您要编辑我们添加的菜单项时，您会看到一个额外的字段，您可以在其中添加 CSS 类。 在这里，您必须包含 CSS 类wp-night-mode 。 此类是 WP Night Mode 需要识别应使用什么项目作为夜间模式开关的类。

默认情况下，WP Night Mode 是一个不会向您的界面添加深色的插件。 您必须为背景、文本和链接选择要显示的深色。 要定义这些颜色，您必须转到外观菜单并打开自定义菜单。

WordPress 定制器将打开，您将在那里找到夜间模式选项。 如果您选择它，您将看到您可以选择默认激活夜间模式并创建多种样式。 在每种样式中，您可以定义背景颜色、文本颜色和链接颜色。

定制器的好处是您可以看到使用所选颜色的网站外观的真实预览：

不幸的是，结果并不完美：某些元素仍然具有在夜间模式下看起来很奇怪的浅色背景。 但别担心，我们可以解决这个问题。 从定制器本身，您可以添加额外的 CSS 规则来解决这些小问题。

返回定制器，您将看到Additional CSS选项。 如果您选择它，您就可以在此处编写 CSS 规则。 这些规则可以是以下类型：

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

请记住，该插件的真正作用是在您网站的body标签中应用 CSS 类wp-night-mode-on 。 因此，如果您想修复 HTML 元素的背景并使其变暗，您所要做的就是为该元素找到一个选择器，并在body标记具有wp-night-mode-on类时应用修复。

在以下比较中，您可以看到普通模式和夜间模式与我们应用的颜色之间的基本比较：

多亏了几个插件，为您的 WordPress 添加夜间模式非常容易。 今天我们回顾了帮助我们在 WordPress 仪表板和前端激活夜间模式的插件。

您是应用程序中夜间模式的常客吗？ 记得在下方留言说出你的看法！

Priscilla Du Preez 在 Unsplash 上的精选图片。