一行代码就实现网站暗黑模式(续)
昨天介绍了一行代码就实现网站暗黑模式,发到群里面,很多人说博客绿色变成紫色不好看,暗黑模式应该仅仅亮度反转,色相不应该反转;
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 代码中贴入这段代码即可:
版权声明:
作者:云小叔-高级程序员
链接:http://liboven.cn/161.html
来源:微芯引擎 秒加载 快如闪电
文章版权归作者所有,未经允许请勿转载。
THE END
85
二维码
文章目录
关闭
共有 0 条评论