Xcnte

Darkmode.Js 一键为网站添加黑暗模式
前言 Darkmode.Js 是一款开源项目,非常易于使用,只需一段代码就可以为网站添加夜晚模式/黑暗模式/夜间模...
扫描右侧二维码阅读全文
15
2019/07

Darkmode.Js 一键为网站添加黑暗模式

前言

Darkmode.Js 是一款开源项目,非常易于使用,只需一段代码就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式

安装好之后,在网页的右下角有一个圆形按钮,点击即可切换白天/夜晚模式,让你的网站跟上 UI 界的潮流。

这是一个不需要任何技术,很容易使用的开源项目

代码

看到这个代码估计很多人都会安装了。

随便找个 footer.php 文件放到合适的位置就可以了

并且数据保存于本地浏览器,用户下次访问的时候依旧会根据上一次的设置显示。

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

默认选项

 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: '&#x1f313;' // 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: '&#x1f313;' }).showWidget();
 </script>

总结

你想用的越精致,就越要一点技术来修改,如果实在搞不来就用一段 js 代码来插入即可

另外,还可以自定义按钮位置,以及显示方式,比如永久显示不提供开关等

详见 Darkmode.Js 官网

支付宝扫码领红包

支付宝红包二维码
Last modification:September 25th, 2019 at 12:06 am
如果觉得我的文章对你有所帮助,请随意赞赏

Leave a Comment

7 comments

  1. 灰常记忆

    用了完全没有效果!?

    1. Xcnte
      @灰常记忆

      我测试了一下没问题,你看看是不是哪里冲突了

  2. 鸟不拉屎

    文章写得不错,支持一下!
    骚年,我怀疑你写了一篇假的文章!
    滴!访客卡!请上车的乘客系好安全带,现在是:Fri Jul 26 2019 18:08:04 GMT+0800 (中国标准时间)
    三连卡已打满

  3. 小夜

    文章写得不错,支持一下!

  4. 奶爸de笔记

    我昨天还是前天刚发这个插件。

    1. Xcnte
      @奶爸de笔记

      这么巧

  5. Xcnte

    滴!签到卡!请上车的乘客系好安全带,现在是:Mon Jul 15 2019 22:05:25 GMT+0800 (中国标准时间)