一行代码就实现网站暗黑模式

暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式,现在主流的操作系统都已经支持暗黑模式了,比如 Mac 系统的暗黑模式:

如果用户的系统已经支持了暗黑模式,所以我们的网站最好实现暗黑模式。如何实现给网站实现网站暗黑模式,一般来说需要写一个暗黑模式下的 CSS;

一行代码就实现网站暗黑模式

比如「WordPress果酱」的博客页面,默认是:

我们可以给使用 CSS 3 的滤镜将页面的所有标签的颜色都反转:

html{filter: invert(100%);}

效果:

厄,把图片也反转了,有点见了鬼的感觉 👹那图片再反转下:

img{filter: invert(100%);}

效果:

还行基本实现了暗黑效果;

最后一步,只在系统在暗黑模式,才启用这段 CSS,我们可以使用 prefers-color-scheme 这个 CSS 媒体特性用于检测用户是否有将系统的主题色设置为暗色;

最终代码:

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

把这段代码加到网站的 header.php 文件中即可,如果你不知道怎么加,那么 WPJAM Basic 插件也可以帮到你,WPJAM Basic 就是那么棒;

在 WordPress 后台,「WPJAM」主菜单下的「样式定制」的字菜单中,在前台 Head 代码中贴入这段代码即可:

 

版权声明:
作者:云小叔-高级程序员
链接:http://liboven.cn/166.html
来源:微芯引擎 秒加载 快如闪电
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录