第 205 题：如何使用 CSS 为网页添加暗黑模式支持？

Question

我是看了面试题才知道还有这种骚操作，以前是每个插件每个标签都加颜色

// 现在仅需增加以下一行魔法 CSS：
html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
}

对于暗黑模式，将使用两个 filter ：invert 和 hue-rotate

• invert：反转配色。黑色变为白色，白色变为黑色，所有颜色都是如此
• hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。 将色相旋转 180 度，我们确保应用程序的颜色主题不会改变，而只是减弱其颜色。

Answer 1

本文将介绍一种简单易懂的方法实现网站支持暗黑模式

话不多说，我们开始吧！