利用 CSS 标签 prefers-color-scheme 使网站支持深色模式

概览

何星星所有网站群现已支持深色模式（iOS, iPadOS, macOS, Windows），如果您的设备开启该模式，将自动将页面随系统切换为暗黑色。

代码

主要实现代码如下：

@media (prefers-color-scheme: dark){
	html{filter: invert(100%);}
	img{filter: invert(100%);}
}

其中核心代码是 @media(prefers-color-scheme: dark)，根据这个 CSS 媒体查询标签，当检测到系统为深色模式后，自动触发标签内的代码。

其后代码 html{filter: invert(100%);} ，将整个页面反色，即黑色；

再后代码 img{filter: invert(100%);} ，将页面图像反色后再反转，使图像正常显示。

拓展

同时，如果网站有其他类图像的元素，根据以上逻辑可以同样增加，通过 CSS 的 class 来绑定对象即可。

附录

1. 根据 Can I Use… 网站的兼容性检查，prefers-color-scheme 标签对主流浏览器版本有强大的支撑表现能力。
2. 如果需要个性化自定义网站页面的深浅明暗色切换，请参考 MDN 的 prefers-color-scheme 语法规范来扩展。