跳到主要内容

是否要向您的WordPress网站添加暗模式?

现在,许多设备都具有本机暗模式支持。在网站上添加暗模式会自动使您的设计适应用户的浏览器偏好。您甚至还可以在网站上添加深色模式切换器切换开关。

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

如何将暗模式添加到您的wordpress网站
如何将暗模式添加到您的wordpress网站

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

在移动设备和计算机上使用暗模式可减少屏幕上的白光。

某些设备带有夜间模式,实际上使用了较暖的色调。深色模式通过在背景中添加深色来使用其他方法。

如果您使用的是iPhone或Android设备,则只需使用切换开关就可以切换到黑暗模式。

或者,您可以在计算机上使用Chrome扩展程序(例如Night Eye)以暗模式查看网站。使用该扩展名的WPBeginner网站的外观如下:

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

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

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

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

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

向您的WordPress网站添加暗模式

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

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

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

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

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

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

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

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

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

注意:使用WP暗模式的免费版本,您只会获得前2种浮动开关样式以及前2种颜色预设供您选择。

WP Dark Mode的专业版提供了更多的设计选项,以及在特定时间打开Dark Mode的功能以及添加自定义CSS代码的选项。

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

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

让我们看一下如何轻松地将暗模式添加到WordPress管理区域中,以在晚间获得更愉快的用户体验。

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

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

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

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

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

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

WordPress区块编辑器中撰写文章时,您也可以开启深色模式。单击左上角的小颜色图标,然后选择要使用的模式:

现在,您可以在晚上舒适地在网站上编写和工作,而不会睁大眼睛。

回到顶部
关闭菜单