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

简述:

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

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

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

图片[1]-Darkmode – 如何让网站支持炫酷暗黑模式/夜间模式-智南娱乐社区-爱学习爱进步

安装代码

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

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

默认选项:

    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: ''
    }
 
    const darkmode = new Darkmode(options);
    darkmode.showWidget();

比如说可修改成这样:

    <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
    <script>
      new Darkmode({ label: '🌓' }).showWidget();
    </script>

总结

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

图片[2]-Darkmode – 如何让网站支持炫酷暗黑模式/夜间模式-智南娱乐社区-爱学习爱进步
© 版权声明
THE END
喜欢就支持一下吧
点赞79赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容