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

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

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

Github:https://github.com/sandoche/Darkmode.js
Darkmode – 网站支持炫酷暗黑模式/夜间模式

 

只需要添加一段代码,就能在网页的右下角出现一个按钮,点击即可切换白天/夜晚模式。

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

代码如下:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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: '&#x1f313;' // default: '' } const darkmode = new Darkmode(options); darkmode.showWidget();

比如说可修改成这样:

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script> new Darkmode({ label: '&#x1f313;' }).showWidget(); </script

你想用的越精致,就越要一点技术来修改,如果实在搞不来就用第一段 js 代码来插入即可,开箱即食。大鸟修改了自己的图床网站:
Darkmode – 网站支持炫酷暗黑模式/夜间模式其实玩玩就可以了,不想用就删了吧。对于保护眼睛会不会有一点效果,这种暗黑模式!

百度已收录
未经允许不得转载:更好的设计 - 免费源码分享_苹果cms模板_各类精品资源免费下载 » Darkmode – 网站支持炫酷暗黑模式/夜间模式
微信公众号:wsmserver
关注我们,获取更多的全网素材资源,有趣有料!
12008人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

严正声明:本站只出售html页面效果模板,不提供任何类型的网站内容数据,模板仅供学习交流使用,不得用于任何商业以及触犯国家法律法规的用途,违者需自行承担全部责任,与本站无以及模板设计作者无关,本站以及模板作者不承担任何连带责任!!!!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏