利用 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%);} ,将页面图像反色后再反转,使图像正常显示。

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

0 条评论

昵称

沙发空缺中,还不快抢~