CSS Dark Mode

https://kevq.uk/automatic-dark-mode/

https://kevq.uk/how-to-add-css-dark-mode-to-a-website/

css variables

:root {
--accent: #226997;
--main: #333;
--light: #666;
--lighter: #f3f3f3;
--border: #e6e6e6;
--bg: #ffffff;
}
/* dark mode */
:root {
--accent: #3493d1;
--main: #f3f3f3;
--light: #ececec;
--lighter: #666;
--border: #e6e6e6;
--bg: #333333;
}

css & dark theme

demo

https://create-react-app.dev/docs/getting-started/#creating-an-app



prefers-color-scheme

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme


.day {
background: #eee; color: black;
}
.night {
background: #333; color: white;
} @media (prefers-color-scheme: dark) {
.day.dark-scheme {
background: #333; color: white;
}
.night.dark-scheme {
background: black; color: #ddd;
}
} @media (prefers-color-scheme: light) {
.day.light-scheme {
background: white; color: #555;
}
.night.light-scheme {
background: #eee; color: black;
}
} .day, .night {
display: inline-block;
padding: 1em;
width: 7em;
height: 2em;
vertical-align: middle;
}

https://caniuse.com/#search=prefers-color-scheme

https://davidwalsh.name/prefers-color-scheme

https://web.dev/prefers-color-scheme/

https://codepen.io/xgqfrms/pen/RwPyQpB

https://dev.to/rafi993/apply-dark-theme-to-your-site-using-prefers-color-scheme-1k4h

https://github.com/csstools/css-prefers-color-scheme


https://www.cnblogs.com/xgqfrms/p/11044246.html

https://www.cnblogs.com/xgqfrms/protected/p/11165136.html

html customize element & dark theme

https://codepen.io/xgqfrms/pen/eYJBBVB

See the Pen html customize element & dark theme by xgqfrms
(@xgqfrms) on CodePen.

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=zh-cn

js toggle theme



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


CSS Dark Mode的更多相关文章

  1. switchable css dark theme in js & html custom element

    switchable css dark theme in js & html custom element dark theme / dark mode https://codepen.io/ ...

  2. css dark theme & js theme checker

    css dark theme & js theme checker live demo https://codepen.io/xgqfrms/pen/GRprYLm <!DOCTYPE ...

  3. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  4. highlight.js 代码高亮插件的使用

    在网页使用过程中,经常会用到代码的展示.而不同颜色的代码,可以让代码看起来更直观,也更美观. 找了几个不同的插件,觉得highlight的插件比较实用,而且用起来炒鸡简单. 比如这样: 首先,我们先下 ...

  5. ubuntu14.04 64位 安装eclipse

    ubuntu14.04 64位 安装eclipse 1 在官网上下载eclipse http://www.eclipse.org/downloads/下载eclipse-jee-luna-SR1-li ...

  6. Eclipse 项目导航字体设置 左侧树字体

    在解压的文件下 E:\eclipse\plugins\org.eclipse.ui.themes_1.2.0.v20170517-0622\css\dark 找到  e4-dark_basestyle ...

  7. gulp 批量添加类名 在一个任务中使用多个文件来源

    1.首先安装环境 1.安装gulp: npm install gulp 2.安装gulp-clean-css npm install gulp-clean-css 3.安装gulp-css-wrap ...

  8. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  9. 使用开源文档工具docsify,用写博客的姿势写文档

    前提 下面的简介摘抄自docsify的官网 https://docsify.js.org 中的简介 docsify是一个神奇的文档网站生成器.他可以快速帮你生成文档网站.不同于GitBook.Hexo ...

随机推荐

  1. BIO,NIO,AIO 总结

    BIO,NIO,AIO 总结 Java 中的 BIO.NIO和 AIO 理解为是 Java 语言对操作系统的各种 IO 模型的封装.程序员在使用这些 API 的时候,不需要关心操作系统层面的知识,也不 ...

  2. 题解 P3833 【[SHOI2012]魔法树】

    题目 直通车 很显然这是个树刨的板子,树上链查询和子树查询 注意: 1.这个点的树根为 0 而不是 1 所以注意读图时点标号 +1 就解决了 2.注意数据范围\(2^{32}\) 然后板子就能过了 n ...

  3. Java——I/O操作之拷贝文件

    功能描述: 利用文件输入输出流编写一个实现文件拷贝的程序,源文件名和目标文件名通过控制台输入. public static void main(String[] args) { Scanner in= ...

  4. SSM、SSH框架搭建,面试点总结

    文章目录 1.SSM如何搭建:三个框架的搭建: 2.SSM系统架构 3.SSM整合步骤 4.Spring,Spring MVC,MyBatis,Hibernate个人总结 5.面试资源 关于SSM.S ...

  5. f5 http和tcp_80 monitor

    f5上的http和tcp_80 monitor是有区别的.假如使用http为monitor,即使80端口是通的,但是有的情况f5也会根据http的访问返回值情况判断站点不可用. 如, telnet I ...

  6. (29)Vim 5

    Vim显示行号方法详解1.编辑时显示行号 在命令模式下输入":set nu"即可显示每一行的行号 如果想要取消行 号,则再次输入":set nonu"即可.2. ...

  7. JavaScript里处理数组的一些常用方法

    修改器方法: 1.pop() 方法从数组中删除最后一个元素 pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值. let arr2 = ['zh ...

  8. 【uva 753】A Plug for UNIX(图论--网络流最大流 Dinic)

    题意:有N个插头,M个设备和K种转换器.要求插的设备尽量多,问最少剩几个不匹配的设备. 解法:给读入的各种插头编个号,源点到设备.设备通过转换器到插头.插头到汇点各自建一条容量为1的边.跑一次最大流就 ...

  9. hdu4770 Lights Against Dudely

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission ...

  10. hdu2126 Buy the souvenirs

    Problem Description When the winter holiday comes, a lot of people will have a trip. Generally, ther ...