现在有多种设备支持深色模式，您可能希望将深色模式添加到您的 WordPress 网站。 使用名为 WP Dark Mode 的免费 WordPress 插件可以轻松实现这一点。 如果您是高级用户，我还包括用于添加自定义暗模式 CSS 的暗模式媒体查询。
现在让我们开始为您的 WordPress 网站添加暗模式：
如何使用插件快速将暗模式添加到您的 WordPress 网站
向您的 WordPress 网站添加深色模式的最简单方法是使用插件 WP 深色模式。 有很多方法可以为您的 WordPress 网站添加深色主题，但首先我们将使用这个易于使用的插件。
WP Dark Mode 插件提供了一系列设置。 它甚至可以让 WordPress 管理员选择暗模式。 您还可以控制让用户在样式之间切换的按钮的样式。 另外，您可以控制按钮的位置，甚至可以使用包含的简码在任何页面上切换暗模式。
这个插件最好的地方是它会自动将您的网站转换为暗模式。 现在这可能并不适合每个站点，尤其是如果您从头开始构建站点并希望控制每个功能。
如果您需要更多选项，WP Dark Mode 插件还提供专业版，可让您替换特定图像（如徽标）等等。
使用 CSS 创建深色模式样式表
如果你更高级并且熟悉 CSS，你可以使用媒体查询 prefers-color-scheme: dark 来定位暗模式。
这只会将样式应用于设置为暗模式的浏览器。 因此，例如，如果用户在 iOS14 上启用了深色模式，它将激活 prefers-color-schema 媒体查询中的样式。
因此，它就像使用 prefers-color-schema 媒体查询向您的 WordPress 网站添加自定义 CSS 一样简单。
/* Example dark mode color schema for CSS */
@media (prefers-color-scheme: dark) {
body {
background-color: #fff;
color: #000;
}
img {
opacity: .8;
transition: opacity .3s ease-in-out;
}
img:hover {
opacity: 1;
}
}
当然，要对此进行测试，您需要将设备设置为深色模式以触发 CSS。 以下是在 MacOS、iOS、Android 和 Windows 上启用深色模式的教程。
如果您的深色主题需要色彩灵感，这里有流行的深色调色板。
我希望本教程有助于将暗模式添加到您的 WordPress 网站。 如果您对黑暗模式有任何疑问或意见，请在下面的评论中告诉我们！
