为网站快速添加黑色主题的方法

Flavio Copes 用下面这段 CSS 代码为他的网站添加了黑色主题：

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(100%);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .astro-code,
  .emoji,
  iframe /* for recaptcha */ {
    filter: invert(100%) !important;
  }
}

网友表示，这个方法如果用在 UI 复杂的大网站会对性能产生明显影响。

有网友建议把 invert(100%) 改为 invert(1) hue-rotate(180deg)：

I always use invert(1) hue-rotate(180deg) which will preserve the hue of the original colors while inverting luminosity.

我试了一下，上述代码在我的博客不能直接拿来用，需要对已有 CSS 进行较多调整，但如果一开始就用这种方法实现黑色主题可能也是一种不错的做法。

2023-05-28 更新：科技微讯博客使用了这种方法开启黑色主题。

@media (prefers-color-scheme: dark) {
  body {
    filter: invert(1) hue-rotate(180deg);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .emoji,
  .canvas-no-invert {
    filter: invert(1) hue-rotate(180deg) !important;
  }
}