概览

何星星所有网站群现已支持深色模式(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 语法规范来扩展。


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 技术维新

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注