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. Git恢复之前版本的两种方法reset、revert

    实战 回退 1.删除之前的提交 git reset --hard id 推送到远程 git push -f [git log中确实删除了,但是拿到可以恢复] 2.不删除之前的提交 git revert ...

  2. C++ Primer Plus读书笔记(五)循环和关系表达式

    1.前缀运算符的优先级是从右到左,例如: 1 *++p; //这句话的含义是先对p进行++,再取* 2.循环 c++11新增了一种循环方式,有点和python类似,如下: 1 array<int ...

  3. C# 8.0 可空(Nullable)给ASP.NET Core带来的坑

    Nullable reference types(可为空引用类型) 可为空引用类型不讲武德 C#8.0 引入了"可为空引用类型"和"不可为空引用类型",使我们能 ...

  4. Elasticsearch 之 Filter 与 Query 有啥不同?

    今天来了解下 Elasticsearch(以下简称 ES) 中的 Query 和 Filter. 在 ES 中,提供了 Query 和 Filter 两种搜索: Query Context:会对搜索进 ...

  5. 阅读笔记:Item-based Collaborative Filtering Recommendation Algorithms

    概要: 推荐系统通过信息获取技术解决在线的个人的消息.产品或者服务的推荐问题.这些系统,特别是基于k临近协同过滤算法,在网络上取得了广泛的成功.可用信息和访问人数的巨大增加成了推荐系统一个难题.基于商 ...

  6. P2762 太空飞行计划问题 (最小割)

    题意:n个实验 每个实验可获利ai元 做每个实验需要几个仪器 购买每个仪器有不同的花费 不同实验可能会用到同一个仪器 只用购买一次 求最大收益 题解:......................... ...

  7. CodeForces - 948C (前缀和+二分)

    博客界面的小人搞不好导致无心写博客 题意:tyd非常喜欢玩雪,下雪下了n天,第i天她会堆一堆大小为Vi的雪堆,但因为天气原因,每堆雪会融化Ti,问每天总共融化了多少雪: 直接上代码+注释 1 #inc ...

  8. Codeforces Round #678 (Div. 2) C. Binary Search (二分,组合数)

    题意:有长度\(n\)的序列,让你构造序列,使得二分查找能在\(pos\)位置找到值\(x\).问最多能构造出多少种排列? 题解:题目给出的\(pos\)是固定的,所以我们可以根据图中所给的代码来进行 ...

  9. C#程序报找不到时区错误

    原因:win10电脑里的时区在win7里不全有 解决:将win10时区注册表导出,在win7电脑上安装 时区注册表路径:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Wi ...

  10. 使用 Tye 辅助开发 k8s 应用竟如此简单(二)

    续上篇,这篇我们来进一步探索 Tye 更多的使用方法.本篇我们来了解一下如何在 Tye 中使用服务发现. Newbe.Claptrap 是一个用于轻松应对并发问题的分布式开发框架.如果您是首次阅读本系 ...