很多网站都需要添加暗黑模式，怎么添加呢，有一种简单的方式
只需在 css 代码中添加这么一句
html[theme="dark-mode"] {
filter: invert(1) hue-rotate(180deg);
}
filter：将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
对于暗黑模式，将使用两个 filter 的两个属性：invert 和 hue-rotate：
-
invert：反转配色。黑色变为白色，白色变为黑色，其它颜色也都是如此。 -
hue-rotate：帮助我们处理所有其他非黑色和白色的颜色。将色相旋转 180 度，确保应用程序的颜色主题不会改变，而只是减弱其颜色。
但是缺点是，它会反转应用程序中的所有图像的颜色，这是我们不希望看到的，所以我们应该再把图像反转回去
html[theme="dark-mode"] img {
filter: invert(1) hue-rotate(180deg);
}
给打开暗黑模式添加过渡
html {
transition: color 300ms, background-color 300ms;
}
然后需要添加暗黑模式的时候就只需要给 html 根标签添加 theme="darkmode" 就行了