使用 CSS 滤镜实现穷人的黑暗模式

点击右上角的“暗模式”复选框。

复选框仅切换元素dark-mode上的类<html>。

这个班级做什么dark-mode？

html.dark-mode {
    filter: invert(100%);
}

html.dark-mode img {
    filter: invert(100%);
}

filter设置为的属性将invert(100%)反转页面上的所有颜色。由于该属性img也已被赋值（并且所有图像都将位于<html>元素的子树中），因此它将在每个元素上再次反转颜色，<img>以防止图像看起来像照片负片。

瞧！🚀