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

昨天介绍了一行代码就实现网站暗黑模式,发到群里面,很多人说博客绿色变成紫色不好看,暗黑模式应该仅仅亮度反转,色相不应该反转;

html{filter: invert(100%);}

CSS 的 invert 滤镜是亮度和色相同时反转,群里的用户和我说可以用另外个 CSS 滤镜 hue-rotate 把颜色的色相再反转回来,然后再把图片亮度调低一点;

所以最最终的代码:

@media (prefers-color-scheme: dark){
	html, img { filter: invert(1) hue-rotate(180deg); }
	img { opacity: .8; }
}

所以最最终的效果:

对比一下效果,还是可以的:

应用到博客

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

@media (prefers-color-scheme: dark){
	html, img { filter: invert(1) hue-rotate(180deg); }
	img { opacity: .75; }
}

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

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

THE END
分享
二维码
海报
一行代码就实现网站暗黑模式(续)
这个才是最终效果。
<<上一篇
下一篇>>
文章目录
关闭
目 录