如何为您的 WordPress 网站添加暗模式(简单)

您想为您的 WordPress 网站添加深色模式吗?

许多设备现在都支持原生暗模式。向您的网站添加暗模式会自动使您的设计适应用户的浏览器偏好。您甚至可以为您的网站添加暗模式切换器切换。

在本文中,我们将向您展示如何轻松地将暗模式添加到您的 WordPress 网站的前端和管理区域。

将暗模式添加到您的 WordPress 网站(轻松)

什么是暗模式以及为什么将其添加到您的网站?

暗模式用于移动设备和计算机,以减少来自屏幕的白光量。

有些设备带有夜间模式,实际上使用的是暖色调。暗模式通过在背景中添加深色来使用不同的方法。

如果您有 iPhone 或 Android 设备,则只需使用切换按钮即可切换到暗模式。

或者,在您的计算机上,您可以使用夜眼等 Chrome 扩展程序在暗模式下查看网站。以下是使用该扩展的 WPBeginner 网站的外观:

使用 Chrome 'Night Eye' 扩展程序查看的 WordPress 网站

向您的网站添加暗模式使用户可以在查看您的网站时选择打开和关闭暗模式。它还使您可以更好地控制您的网站在黑暗模式下的外观。

YouTube等热门网站也提供深色方案。这使用户可以在深夜观看视频时获得更舒适的观看体验。

在打开深色主题选项的情况下观看 YouTube

除了向您的网站前端添加暗模式外,您甚至还可以向您的 WordPress 管理员添加暗模式。如果您在晚上或晚上在您的网站上工作,这可能会很有用。

首先,我们将看看为您的WordPress 网站添加暗模式。然后,我们将介绍向您的 WordPress 管理仪表板添加暗模式。

提示:您是否想要一个具有深色配色方案的网站,即使用户的设备处于正常或白天模式?然后查看我们的WordPress 最佳深色主题列表。

将暗模式添加到您的 WordPress 网站

首先,您需要安装并激活WP Dark Mode插件。有关更多详细信息,请参阅我们关于如何安装 WordPress 插件的分步指南。

激活后,转到 WordPress 管理员中的设置 » WP 暗模式页面,然后单击常规设置选项卡。您应该会自动重定向到那里。

在这里,“启用操作系统感知暗模式”设置已为您打开。这意味着当访问者的设备设置为暗模式时,访问者将自动看到您网站的暗模式版本。

“显示浮动开关”设置也已打开。这意味着用户可以随时将他们的网站视图切换到暗模式,即使他们没有在设备上启用暗模式选项。

WP Dark Mode 插件的常规设置页面

只需访问您的网站,您就会在右下角看到开关。单击它可立即将您的网站切换到设备上的暗模式:

黑暗模式开关现在显示在网站上供访问者使用

设置 » WP 暗模式页面上提供了更多自定义选项。但是,免费插件非常有限。

例如,您只需单击“显示设置”选项卡即可更改浮动开关的样式:

在显示设置中选择夜间模式切换按钮的类型

您还可以使用样式设置选项卡自定义暗模式颜色:

在样式设置中选择暗模式配色方案

确保在进行任何更改后单击“保存设置”按钮。

注意:使用免费版的 WP 深色模式,您只能获得前 2 种浮动开关样式和前 2 种颜色预设可供选择。

专业版的 WP 暗模式提供了更多的设计选项,此外还可以在特定时间打开暗模式以及添加自定义 CSS 代码的选项。

为您的 WordPress 管理员添加暗模式

WordPress 带有管理员配色方案,但没有一个默认配色方案会减少来自屏幕的白光。幸运的是,这个插件也解决了这个问题。

让我们看看如何轻松地将暗模式添加到您的WordPress 管理区域,以便在深夜获得更愉快的用户体验。

只需转到设置» WP 暗模式页面,然后单击常规设置选项卡。然后,将“启用后端暗模式”开关切换到打开位置。不要忘记点击页面底部的保存设置按钮:

打开启用后端暗模式切换,以便您可以在 WordPress 管理员中使用暗模式

您现在将在管理区域的顶部栏中看到一个新开关:

WordPress 管理员中的切换开关,用于在管理界面的亮(正常)和暗之间切换

只需单击此开关即可立即将您的管理区域切换到暗模式。

提示:如果您的网站有多个WordPress 用户,每个人都可以根据自己的喜好打开和关闭暗模式。

由于“深色模式”不是管理员配色方案,您可以轻松地将其与现有的 WordPress 管理员配色方案一起使用。要设置它,只需转到用户»配置文件,然后单击管理配色方案下的一个选项。

请注意,您需要关闭暗模式才能查看管理配色方案选项:

在您的用户个人资料页面上选择 WordPress 中的管理员配色方案

在WordPress 块编辑器中撰写帖子时,您也可以打开暗模式。单击左上角的小颜色图标,然后选择您要使用的模式:

在 WordPress 块编辑器中打开暗模式

现在,您可以在晚上舒适地在您的网站上写作和工作,而不会劳累您的眼睛。

我们希望本文能帮助您了解如何为您的 WordPress 网站添加暗模式。您可能还想查看我们关于适用于所有网站的最佳 WordPress 插件的文章,以及我们对管理最好的 WordPress 托管公司的比较。