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

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

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 代码中贴入这段代码即可：