一行代码就实现 WordPress 博客暗黑模式
暗黑模式是指把所有 UI 换成黑色或者深色的一个主题模式,现在主流的操作系统都已经支持暗黑模式了,比如 Mac 系统的暗黑模式:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/08/1629387275-2a316f66f8d31d15fdd4b4c17bd12e2c.png?imageMogr2/auto-orient/thumbnail/1280x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
如果用户的系统已经支持了暗黑模式,所以我们的网站最好也实现暗黑模式。如何实现给网站实现网站暗黑模式,一般来说需要写一个暗黑模式下的 CSS。
一行代码就实现网站暗黑模式
比如「WordPress果酱」的博客页面,默认是:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/08/1629387276-a1aff2d005c3dbed0d53910bb3950934.png?imageMogr2/auto-orient/thumbnail/1280x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
我们可以给使用 CSS 3 的滤镜将页面的所有标签的颜色都反转:
html{filter: invert(100%);}
效果:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/08/1629387277-04efd935bfb66f45b0289f4eab7a1f7b.png?imageMogr2/auto-orient/thumbnail/1280x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
厄,把图片也反转了,有点见了鬼的感觉,那图片再反转下:
img{filter: invert(100%);}
效果:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/08/1629387278-8b62170c6120d8f90ef98ea55fe4e647.png?imageMogr2/auto-orient/thumbnail/1280x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
感觉博客绿色变成紫色不好看,暗黑模式应该仅仅亮度反转,色相不应该反转,CSS 的 invert 滤镜是亮度和色相同时反转,我们可以用另外个 CSS 滤镜 hue-rotate 把颜色的色相再反转回来,然后再把图片亮度调低一点。
html, img { filter: invert(1) hue-rotate(180deg); }
img { opacity: .8; }
最终的效果:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/08/1629387278-25864cd14fd977773008a6f32967057e.png?imageMogr2/auto-orient/thumbnail/1280x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)
最后一步,能不能系统在暗黑模式才启用这段 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 代码中贴入这段代码即可:
![](https://cdn.97866.com/wp-content/uploads/sites/26/2021/08/1629387279-8f94612412bcec4ba6ad8c3ba339ffc4.png?imageMogr2/auto-orient/thumbnail/1280x/quality/70/interlace/1|watermark/1/image/aHR0cHM6Ly9jZG4ud3BqYW0uY29tL3dwamFtL3dhdGVybWFyay5wbmc/dissolve/50/dx/11/dy/11#)