HTML/CSS

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

也想出现在这里?联系我们
面包多

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

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

也想出现在这里?联系我们
创客主机

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

安装代码

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

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

默认选项:

  1.     var options = {
  2.       bottom: '64px', // default: '32px'
  3.       right: 'unset', // default: '32px'
  4.       left: '32px', // default: 'unset'
  5.       time: '0.5s', // default: '0.3s'
  6.       mixColor: '#fff', // default: '#fff'
  7.       backgroundColor: '#fff',  // default: '#fff'
  8.       buttonColorDark: '#100f2c',  // default: '#100f2c'
  9.       buttonColorLight: '#fff', // default: '#fff'
  10.       saveInCookies: false, // default: true,
  11.       label: '&#x1f313;' // default: ''
  12.     }
  13.  
  14.     const darkmode = new Darkmode(options);
  15.     darkmode.showWidget();

比如说可修改成这样:

  1.     <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
  2.     <script>
  3.       new Darkmode({ label: '&#x1f313;' }).showWidget();
  4.     </script>

总结

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
(0)

本文由来源 大鸟博客,由 PetitQ 整理编辑!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!