简单代码实现网站的黑暗.夜间模式_为你的网站增加夜间模式

某些时候我们需要将网站灰度或者黑色，以适应某些特殊的场景或者实现夜间阅读的需要，即进入夜晚/黄昏模式。这样看上去网站比较暗，亮度降低，对视力也会有一定程度上的保护。

网上也有部分的插件实现相应的功能，今天看到了这样一个简单的代码，试用了下，还是基本符合要求的。

这段代码来自于Darkmode.Js ，官网上的一段介绍是：
Add a dark-mode / night-mode to your website in a few seconds
其使用的代码为：

code
<script src="https://cdn.bootcss.com/Darkmode.js/1.4.0/darkmode-js.js"></script>
<script>
 new Darkmode().showWidget();
</script>

如果确有必要的话，也可以直接将这个JS代码保存到本地后，再进行调用，这样就不管相应的CDN发生什么变化或者无法访问等情况，都可以正常调用，加快载入的速度。将简单的代码加入网页任意位置，即会出现相应的按钮，可以切换。
这里面有2个JS文件，一个是darkmode-js.min.js，另外一个是Darkmode.js，主要差别是一个是简版，一个是可以调整的版本。例如在Darkmode.js可以调整按钮的大小、样式、切换过渡的时间，具体的代码有：

code
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代码了，否则是没有效果的。请保存到服务器本地后再进行调用。默认的代码切换的效果如下：