HTML/CSS

Darkmode – 网站支持炫酷暗黑模式/夜间模式

PetitQPetitQ HTML/CSS 2023-7-03 3.29K 0
收藏
阿里云

Darkmode.js 这个东西还是挺好玩的，非常易于使用，只需一段代码就可以让你的网站支持暗黑模式，安装好之后，在网页的右下角有一个圆形按钮，点击即可切换白天/夜晚模式。Darkmode.js 是开源的项目，所以可以免费玩耍 ，不过如果想玩的好，还是需要点技术的。这篇文章就来看看如何安装这个 Darkmode.js。

官网：https://darkmodejs.learn.uno/

也想出现在这里？联系我们吧
创客主机

Github：https://github.com/sandoche/Darkmode.js

安装代码

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

看到这个代码估计很多人都会安装了。随便找个 footer.php 文件放到合适的位置就可以了,或者是模板文件 footer.HTML 文件的之前都可以。

默认选项：

  1.     var options = {
  2.       bottom: '64px', // default: '32px'
  3.       right: 'unset', // default: '32px'
  4.       left: '32px', // default: 'unset'
  5.       time: '0.5s', // default: '0.3s'
  6.       mixColor: '#fff', // default: '#fff'
  7.       backgroundColor: '#fff',  // default: '#fff'
  8.       buttonColorDark: '#100f2c',  // default: '#100f2c'
  9.       buttonColorLight: '#fff', // default: '#fff'
  10.       saveInCookies: false, // default: true,
  11.       label: '&#x1f313;' // default: ''
  12.     }
  13.  
  14.     const darkmode = new Darkmode(options);
  15.     darkmode.showWidget();

比如说可修改成这样：

  1.     <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
  2.     <script>
  3.       new Darkmode({ label: '&#x1f313;' }).showWidget();
  4.     </script>

总结

你想用的越精致，就越要一点技术来修改，如果实在搞不来就用第一段 js 代码来插入即可，开箱即食。修改了自己的图床网站：

其实玩玩就可以了，不想用就删了吧。对于保护眼睛会不会有一点效果，这种暗黑模式！

Darkmode – 网站支持炫酷暗黑模式/夜间模式

已有 823 人购买
查看演示升级 VIP立刻购买

咨询客服 咨询客服

专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！

创客主机
收藏
赞(0)

相关文章

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！

登录