Darkmode.Js – 几秒钟内让你的的网站支持酷酷的暗黑模式/夜间模式

2019年6月27日17:49:55 9 2,807 1227字阅读4分5秒

Darkmode.js这个东西还是挺好玩的,非常易于使用,只需一段代码就可以让你的网站支持暗黑模式,安装好之后,在网页的右下角有一个圆形按钮,点击即可切换白天/夜晚模式。

Darkmode.Js – 几秒钟内让你的的网站支持酷酷的暗黑模式/夜间模式

Darkmode.js是开源的项目,所以可以免费玩耍 ,不过如果想玩的好,还是需要点技术的。这篇文章就来看看如何安装这个Darkmode.js。

介绍

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

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

安装代码

<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文件的</body>之前都可以。

或者使用npm安装

npm install darkmode-js
然后添加以下javascript代码:
import Darkmode from 'darkmode-js';
new Darkmode().showWidget();

默认的可用选项:

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代码来插入即可,开箱即食。大鸟修改了自己的图床网站:

Darkmode.Js – 几秒钟内让你的的网站支持酷酷的暗黑模式/夜间模式

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

weinxin
微信公众号
关注大鸟博客公众号
大鸟
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:9   其中:访客  5   博主  4
    • 猫叔 猫叔 6

      默哀!三鞠躬!

        • 大鸟 大鸟

          @ 猫叔 就你皮 :lol:

        • 双双对对爸爸 双双对对爸爸 2

          感觉不是特实用啊!

          • 奶爸de笔记 奶爸de笔记 7

            有这个需要的人大部分应该会装一个浏览器插件。

              • 大鸟 大鸟

                @ 奶爸de笔记 必须的顶你,所以这个有时候就是玩玩!

              • 搬瓦工 搬瓦工 1

                学习了
                感谢分享

                • 佛系软件 佛系软件 1

                  大神,我的网站只能把背景弄黑,其他的还是白色的,就像是浮起来了。加了默认选项就是这样的。

                    • 大鸟 大鸟

                      @ 佛系软件 估计和你的站点js文件冲突了,也就是不兼容~~