Mark

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

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

前言

Darkmode.Js 是一款开源项目,只需要添加一段代码,就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式,让你的网站跟上 UI 界的潮流。
这是一个不需要任何技术,很容易使用的开源项目。


方法

只需要添加一段代码,就能在网页的右下角出现一个按钮,点击即可切换白天/夜晚模式。
并且数据保存于本地浏览器,用户下次访问的时候依旧会根据上一次的设置显示。

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

效果嘛,肯定没有手动修改的好,但毕竟省事…按钮就是一个大圆形,黑白两色切换。

另外,还可以自定义按钮位置,以及显示方式,比如永久显示不提供开关。更多的细节就需要一点点技术能力了,详见 Darkmode.Js 官网。

标签:
Last modification:October 22nd, 2019 at 07:09 pm
如本文“对您有用”,欢迎随意打赏我,让我坚持创作!

Leave a Comment

3 评论

  1. 缙哥哥 贵宾   Windows 10 x64 Edition Windows 10 x64 Edition Google Chrome 77.0.3865.90 Google Chrome 77.0.3865.90

    发现个问题,就是点夜间模式之后不能全局,到别的页面又得重新点!


    1. Mark 博主   Windows 10 x64 Edition Windows 10 x64 Edition Google Chrome 77.0.3865.90 Google Chrome 77.0.3865.90
      @缙哥哥

      嗯 这个只适合简单的网页,你说的这个问题应该是PJAX所致,看看能不能在回调函数加上这个JS来重新激活。


  2. 林阿三 贵宾   Windows 10 x64 Edition Windows 10 x64 Edition Google Chrome 74.0.3729.131 Google Chrome 74.0.3729.131

    可以可以