logo科技微讯

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

作者:科技微讯
日期:2023-02-21
📝 笔记

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;
  }
}
donation赞赏
thumbsup0
thumbsdown0
暂无评论