WP Dark Mode:一键给博客添加夜间模式

发布于 2023-10-11  6.56k 次阅读


本文于 2023年10月11日 11:57 更新,注意查看最新内容

前言

因为使用的博客主题制作相对较早,当时还没有夜间模式这个观念,或许当时也有,但我使用的博客主题并没有自带,这些年逛其他博客的过程中,看到对方的博客在晚上的时候会自动调整成夜间模式,觉得还挺新奇的,但当时眼睛还算好,对这个功能的需求倒也没强烈,随着年龄的增长,越发感觉到保护眼睛的重要性,于是也想给自己博客整一个夜间模式,以供自己晚上访问时,不用被那明晃晃的白色闪瞎了眼睛。

方法

添加夜间模式的方法有很多,有直接改代码的,还有安装插件的,方法多种多样,这里我选择的是WP Dark Mode插件。

这里简单说一下,为什么选择了插件,而没有选择直接改代码。

其实现有的解决方案中,直接改代码的轮子应该也有很多,基本直接拿来就可以用。

但考虑到兼容性的问题,最终还是选择了现成的成熟方案,毕竟公开的代码都是相对局限的,对于一些定制化的内容,例如代码块、图片等并非所有博客都有的内容,会显得拙荆见肘。

步骤

1、在WordPress后台点开安装插件。

2、搜索WP Dark Mode,安装并启用。

3、在插件设置选项的General Settings中,打开Enable Frontend Darkmode(忘了是不是默认开启的,如果不是,就按照此步骤打开即可)。

以上就是在前台打开夜间模式按钮的相关设置,至于后台打开夜间模式(没错,后台也支持开启)、夜间模式按钮显示位置都可以在设置中找到,这里就不做过多介绍(右键翻译成中文了解一下)。

演示

本博客所有页面左下角均有显示(不包含外链页面)。

后话

目前基本没有太大问题,只是在显示代码块时,若代码块只有一行代码,左上角的圆角会显示成直角(这仅为本博客遇到的问题,本博客代码块的显示是通过Enlighter插件显示,若未使用该插件,则基本不用担心该问题,或许之后我也会向插件开发去反馈该问题,总之并不是特别影响),还有就是回到顶部的按钮在启动夜间模式之后会被隐藏,因为回到顶部的按钮颜色与夜间模式的背景颜色几乎一样,启动之后并不是特别好辨别,但也不是特别影响。

总而言之,言而总之,都是无关痛痒的一些小问题,只要你不是强迫症,基本就不影响,另外,隔壁还有一款夜间模式的插件,若使用那一款,可能会出现较多的兼容问题,具体名字我忘记了,推荐先通过本文介绍插件实现,若不满意,再选择其他方案。

最后,这插件貌似广告有点多,我指的广告是,经常性要评分,以及经常告诉我推广该插件有多少佣金(这是付费插件,有一些几乎用不到的功能是收费的)。


这短短的一生,我们最终都会失去。