给WordPress网站添加一个夜间模式按钮

如果你使用WordPress搭建了一个文字比较多的网站，例如小说分享网站。那么为了用户体验，你可以考虑给网站增加一个夜间模式，避免夜猫子访问你网站的时候页面太刺眼。

如果你不会添加网站的夜间模式，那么恭喜你，WordPress插件轻松帮你解决这个问题。

Dark Mode for WordPress

Dark Mode for WordPress是一个简单的给网站添加夜间模式（黑夜模式）的WordPress插件，安装插件后启用，即可在网站前台出现一个切换按钮。

没有多余的设置项目，开箱即用。插件调用的只有一个js文件，不用担心拖慢网站速度。

下载地址

Blackout: Dark Mode Widget

Blackout: Dark Mode Widget比上面那款Dark Mode for WordPress功能更完善一点，多了一个自定义功能，可以设置颜色和按钮大小位置。

下载地址

Darkmode.js

上面两款插件，实际上都是使用的Darkmode.js

Darkmode.js是一个开源项目，项目地址：https://github.com/sandoche/Darkmode.js

所以如果你会自己添加代码，那么你可以为任何网站实现夜间模式功能。

最简单的，你直接复制下面这串代码添加到你网站的代码里面，就可以实现夜间模式功能。

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

你还可以通过下面这些代码对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();

如果你网站上有不想使用夜间模式的项目，可以通过添加darkmode-ignore类来禁用，也可以添加isolation: isolate;来禁用。

标签：夜间按钮模式网站