WordPress网站增加黑暗模式图形教程

现在越来越多的网站跟风Android和iOS，为访客提供黑暗模式。一些新的WordPress主题将直接带有黑暗模式(也称为夜间模式，以下简称为黑暗模式)的切换功能，例如眼睛主题。当然，很多WordPress主题都没有这样的功能。

本文将详细介绍暗黑模式及其功能，如何使用插件添加网站和WordPress dashboard的暗黑模式:

什么是黑暗模式及其功能？

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

一些设备有夜间模式，实际上使用了更温暖的颜色。黑暗模式使用其他方法-在背景中添加深色。

如果你使用的是iPhone或Android设备，只需使用拨动开关就可以切换到暗黑模式。

或者，使用电脑上的Chrome扩展(如Night Eye)在黑暗模式下查看网站。该扩展实现的雷电Bo官网暗黑模式外观如下:

闪电官网黑暗模式

在网站中加入暗黑模式，这样用户可以在浏览网站时选择开启或关闭暗黑模式。该扩展还允许用户通过设置更好地控制网站在黑暗模式下的外观。

一些热门视频网站还提供黑暗模式，方便用户在深夜观看视频，获得更舒适的观看体验。

YouTube黑暗模式

除了在网站首页加入暗黑模式，你甚至可以在WordPress的后台加入暗黑模式。如果你经常在晚上编辑文章，这是非常有用的。

下面，我们将分别介绍如何给WordPress网站和WordPress dashboard添加黑暗模式。

WordPress网站添加黑暗模式教程

首先，你需要安装并启用WP黑暗模式插件。

启用后，在WordPress后台进入“设置WP黑暗模式”页面，然后点击“常规设置”选项卡。

你可以看到“Enable OS aware Dark Mode”是默认开启的，也就是当访问者的设备设置为黑暗模式时，访问者会直接看到你网站的黑暗模式版本。

“显示浮动开关”设置也是默认启用的。即使用户没有在设备上启用黑暗模式选项，他们也可以通过插件提供的黑暗模式切换按钮随时将其站点视图切换到黑暗模式。

WP黑暗模式插件设置

启用插件后，访问你的网站，你会在右下角看到开关。点按它以将网站切换到黑暗模式:

黑暗模式按钮

在“设置WP黑暗模式”插件设置页面有更多的自定义选项。然而，插件的免费版本有许多限制。

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

WP黑暗模式插件显示设置

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

WP黑暗模式插件风格设置

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

注意:对于WP黑暗模式的免费版本，只有前2个浮动开关样式和前2个颜色预设可用。WP黑暗模式专业版提供了更多的选项，以及在特定时间开启黑暗模式功能和添加自定义CSS代码的选项。

WordPress管理后台添加黑暗模式教程

WordPress自带了一个托管的背景配色方案，但是没有默认的配色方案可以减少屏幕的白光。对此，我们还是借用插件来解决这个问题。

下面我们来看看如何在WordPress dashboard中加入暗黑模式，保护你在夜间编辑文章时的眼睛。

只需进入设置WP黑暗模式页面，点击常规设置选项卡。然后，将“启用后端黑暗模式”开关切换到打开位置。

WP黑暗模式插件背景夜间模式设置

你会在WordPress管理背景的顶部栏看到一个新的开关:

黑暗模式WordPress背景

简单地点击这个开关，立即将你的WordPress管理后台切换到Diablo模式。

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

由于“深色模式”不是管理界面的配色方案，所以可以和WordPress管理界面现有的配色方案一起使用。只需进入“用户资料”并点击“管理界面配色方案”下的一个选项。

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

管理界面配色方案设置

在WordPress Gutenberg editor写文章的时候也可以打开暗黑模式。点按左上角的小颜色图标，然后选择您想要使用的模式:

古腾堡编辑器黑暗模式

现在，你可以在晚上舒适地在网站上编辑文章。

对于本教程，就是这样！无论是想在网站前端实现黑暗模式，还是后台需要，都可以通过插件来实现！

然而，边肖认为所谓的“黑暗模式或夜间模式”更适合移动终端而不是PC终端！