网站添加夜间模式

给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;来禁用。

版权申明
如未注明,均为奶爸笔记原创,码字不易,转载请注明出处及原文链接!
本文标题:《给WordPress网站添加一个夜间模式按钮》
本文链接地址:https://blog.naibabiji.com/archives/2354
打赏 赞(4)
微信
支付宝
微信二维码图片

微信扫描二维码打赏

支付宝二维码图片

支付宝扫描二维码打赏

你可能感兴趣