简单代码实现网站的黑暗.夜间模式

某些时候我们需要将网站灰度或者黑色,以适应某些特殊的场景或者实现夜间阅读的需要,即进入夜晚/黄昏模式。这样看上去网站比较暗,亮度降低,对视力也会有一定程度上的保护。网上也有部分的插件实现相应的功能,今天看到了这样一个简单的代码,试用了下,还是基本符合要求的,临时可用。

这段代码来自于Darkmode.Js ,官网上的一段介绍是:

Add a dark-mode / night-mode to your website in a few seconds

其使用的代码为:

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

经测试,也可以将其中的JS代码替换为国内BootCDN的地址:

<script src="https://cdn.bootcss.com/Darkmode.js/1.4.0/darkmode-js.js"></script>
图1.样式代码

效果是一样的,不会收到影响,如果确有必要的话,也可以直接将这个JS代码保存到本地后,再进行调用,这样就不管相应的CDN发生什么变化或者无法访问等情况,都可以正常调用,加快载入的速度。将简单的代码加入网页任意位置,即会出现相应的按钮,可以切换。

这里面有2个JS文件,一个是darkmode-js.min.js,另外一个是Darkmode.js,主要差别是一个是简版,一个是可以调整的版本。例如在Darkmode.js可以调整按钮的大小、样式、切换过渡的时间,具体的代码有:

var options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true}

const darkmode = new Darkmode(options);
darkmode.showWidget();

通过相应的代码可以对实现的效果进行微调,一般情况默认就行。但如果进行微调之后就不要调用CDN上的JS代码了,否则是没有效果的。请保存到服务器本地后再进行调用。默认的代码切换的效果如下:

图2.点击按钮切换

可见基本上还是符合要求的,另外官网上同样也提供WordPress的插件,可以直接到WordPress插件上搜索blackout-darkmode-widget或者darkmode均可以找到,或者直接到如下页面下载后再上传到WordPress的plugins文件夹后启用。

https://wordpress.org/plugins/blackout-darkmode-widget/

https://wordpress.org/plugins/darkmode/

一般来说,插件跟代码实现的效果基本是差不多的,选择代码还是插件,见仁见义,自由选择。

官方网站地址:https://darkmodejs.learn.uno