一行代码 - 使用 CSS 的暗黑模式

这是将已开发的网站转换为支持暗模式的绝对简单的方法。

事不宜迟，让我们开始吧！👾

以这个新闻应用程序为例

现在添加神奇的 CSS

html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

瞧！你完成了✌

黑暗模式已实现

解释

现在让我们尝试了解一下幕后发生了什么。

CSSfilter属性会将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染效果。（参考：MDN Web 文档）

对于这种暗模式，我们将使用两个过滤器，invert即hue-rotate

反转滤镜用于反转应用程序的配色方案。因此，黑色会变成白色，白色会变成黑色，所有颜色也是如此。

hue-rotate滤镜可以帮助我们处理除黑白之外的所有其他颜色。将色相旋转 180 度，可以确保应用程序的颜色主题不会改变，而只是减弱其颜色。 此方法唯一的缺点是，它还会反转应用程序中所有图像的颜色。因此，我们将对所有图像添加相同的规则来反转效果。

html[theme='dark-mode'] img{
    filter: invert(1) hue-rotate(180deg);
}

我们还将向 HTML 元素添加过渡，以确保过渡不会变得刺眼！

html {
    transition: color 300ms, background-color 300ms;
}

结果： 暗黑模式就这么实现了。干得漂亮！

我每天都靠咖啡来补充能量，而且只靠咖啡。所以我知道，你知道我们都应该怎么做🤞