Darkmode – 网站支持炫酷暗黑模式/夜间模式
时间:2019-11-17
本文章向大家介绍Darkmode – 网站支持炫酷暗黑模式/夜间模式,主要包括Darkmode – 网站支持炫酷暗黑模式/夜间模式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 文件的之前都可以。
默认选项:
-
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 代码来插入即可,开箱即食。大鸟修改了自己的图床网站:
其实玩玩就可以了,不想用就删了吧。对于保护眼睛会不会有一点效果,这种暗黑模式!
原文地址:https://www.cnblogs.com/idid/p/11877410.html
- 1218: [HNOI2003]激光炸弹
- Java多线程高并发学习笔记(一)——Thread&Runnable
- 1257: [CQOI2007]余数之和sum
- 【LeetCode 136】 关关的刷题日记34 Intersection of Two Arrays II
- 1724: [Usaco2006 Nov]Fence Repair 切割木板
- 【LeetCode 202】 关关的刷题日记35 – Leetcode 202. Happy Number
- JAVA多线程高并发学习笔记(三)——Callable、Future和FutureTask
- 算法模板——Trie树
- JavaScript Alert 函数执行顺序问题
- 算法模板——计算几何1(图形面积)
- 算法模板——线段树6(二维线段树:区域加法+区域求和)(求助phile)
- 【LeetCode 242】 关关的刷题日记36 Valid Anagram
- javascript闭包
- 【LeetCode 438】关关的刷题日记37 Find All Anagrams in a String
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 多个请求下 loading 的展示与关闭
- 第13期:表统计信息的计算
- 2019.8.15乘兴打Codeforces Round #569 (Div. 2)小记A题A. Alex and a Rhombus
- 2019.8.15乘兴打Codeforces Round #569 (Div. 2)小记B. Nick and Array
- 《hdu 免费馅饼》
- 技术分享 | 使用 pt-query-digest 分析慢日志
- 2019.8.15乘兴打Codeforces Round #569 (Div. 2)小记
- Codeforces Beta Round #14 (Div. 2)A. Letter
- Vue 改变数据,页面不刷新的问题
- R语言再保险合同定价案例研究
- 开发一个简单的 Vue 弹窗组件
- R语言模拟人类生活预期寿命动态可视化动画图gif
- Vue 动态添加路由及生成菜单
- R语言泊松回归对保险定价建模中的应用:风险敞口作为可能的解释变量
- Vue 页面权限控制和登陆验证