简单 CSS 实现暗黑模式

发表于 Waline： 
@media (prefers-color-scheme: dark) {
    html {
        filter: invert(90%) hue-rotate(180deg);
    }

    img, video, svg, div[class*="language-"] {
        filter: invert(110%) hue-rotate(180deg);
        opacity: .8;
    }
}

具体效果参考本站（打开系统级别的暗黑模式）。 解释：

  1. invert 将所有色值反转，hue-rotate 将黑白以外的其它主色调再反转回来（防止页面主题色出现大的变化）；
  2. 网上的 invert 通常取值为 100%，但是这样反转得到的黑色往往太过黑，眼睛看起来有点累，因此我觉得 90% 是一个更合理的值；
  3. 将图片、视频等其它不需要被反转的元素再反转回来，并加一个透明度，让其不那么刺眼；
  4. 如果 html 反转 90%，则图片等元素需要反转 110%；
  5. div[class*="language-"] 对应的是本站 (VuePress) 上的代码块。