一行代码实现暗黑模式

暗黑模式只需一行代码即可实现。让我们看看它是如何实现的，以及这种简单方法的优缺点。

过滤器：反转（100%）

invert()函数作为属性值filter，将采用 0 到 1 之间的数字或 0% 到 100% 之间的百分比来反转元素及其子元素的颜色。应用filter: invert(1)或filter: invert(100%)会导致颜色完全反转。

您可以使用这一行 CSS 将配色方案从亮切换为暗（反之亦然）。

要反转整个网站的颜色，您需要filter: invert(100%)在 DOM 的最高级别元素上应用：

:root {
  filter: invert(100%);
}

使用切换按钮应用过滤器

要切换主题，您需要一个切换按钮和一个带有暗黑模式样式的类，以便在单击按钮时切换。查看下面的 Codepen 示例，然后单击中间的按钮即可更改配色方案：

filter类内的属性负责.dark-mode改变颜色。

/* this class will be toggled */
.dark-mode {
  filter: invert(100%)
}

document.documentElement我们必须通过在监听器函数内部使用一些基本的 JavaScript 代码。然后，我们可以切换.dark-modeDOM 层级顶部的类，以将其应用于整个filter: invert(100%)站点。

let button = document.querySelector('.btn')


// press the button to toggle the .dark-mode class

button.addEventListener('click', () => {

  document.documentElement.classList.toggle('dark-mode')

})

反转所有像素的利与弊

让整个网站从亮模式切换到暗模式的好处filter: invert(100%)显而易见：这是一个快速而简单的解决方案。而且，像所有快速解决方案一样，它也有一些明显的缺点。

filter应用于 DOM 树顶部的这个操作会向下级联并影响所有子元素。它会反转所有的颜色。这会导致以下一系列问题（我们假设每个要点都以“需要额外的代码来解决这个问题”结尾）：

• 图像和视频等媒体会被反转，而且看起来总是不太好（但您可能仍然希望将 SVG 反转）。

• 所有暗框阴影都将成为高光。

• 如果您的网站有黑色、白色或灰色以外的颜色，您可能会对某些颜色反转的糟糕效果感到惊讶。

• 曾经在浅色背景上有足够的对比度，但当颜色反转或与深色背景形成对比时，情况就会发生变化。

• 想想hover、focus、active、visited以及所有其他特殊元素状态。颜色反转后能传达元素的状态吗？还是颜色本身的含义会丢失？交互方面又如何呢？

• Steve Schoger 提供的一些高级 UI 建议有助于理解
  https://twitter.com/steveschoger/status/1151160261170126850

这个清单可以一直列下去，涵盖了各种可用性和可访问性方面的细节，而这些细节在反转整个配色方案时很容易被忽略。关键在于——你原本以为一行代码就能实现暗黑模式，结果却花了一整天时间编写 CSS 来解决所有问题。

反转还是不反转？

最终结论filter: invert(100%)是：它对于使细节看起来更好非常有用。不过，如果你的网站非常简单且单色，你可以用它来切换整个网站的颜色。

在所有其他情况下，你或许应该尝试一些内容感知技术。例如，我撰写了一篇名为《暗黑模式 - prefers-color-scheme 网站教程》（及其GitHub 仓库），介绍了如何使用媒体查询、变量和 JavaScript 实现暗黑模式prefers-color-scheme。