how to disabled prefers-color-scheme in js & dark theme
how to disabled prefers-color-scheme in js
dark theme
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
https://web.dev/prefers-color-scheme/#supporting-dark-mode
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log(' Dark mode is supported');
}
https://gosink.in/javascript-css-toggle-dark-light-theme-based-on-your-users-preferred-scheme/
data-user-color-scheme
const applySetting = passedSetting => {
let currentSetting = passedSetting || localStorage.getItem(STORAGE_KEY);
if (currentSetting) {
document.documentElement.setAttribute('data-user-color-scheme', currentSetting);
setButtonLabelAndStatus(currentSetting);
} else {
setButtonLabelAndStatus(getCSSCustomProp(COLOR_MODE_KEY));
}
};
https://codepen.io/xgqfrms/pen/qBbdbbJ?editors=1010
See the Pen user controlled dark mode & them toggole by xgqfrms
(@xgqfrms) on CodePen.
document.documentElement.setAttribute
https://stackoverflow.com/questions/56300132/how-to-over-ride-css-prefers-color-scheme-setting
// root/default variables
:root {
--font-color: #000;
--link-color:#1C75B9;
--link-white-color:#fff;
--bg-color: rgb(243,243,243);
}
//dark theme
[data-theme="dark"] {
--font-color: #c1bfbd;
--link-color:#0a86da;
--link-white-color:#c1bfbd;
--bg-color: #333;
}
//the redundancy is for backwards compatibility with browsers that do not support CSS variables.
body
{
color:#000;
color:var(--font-color);
background:rgb(243,243,243);
background:var(--bg-color);
}
document.documentElement.setAttribute('data-theme', 'light');
html customize element & dark theme
https://codepen.io/xgqfrms/pen/eYJBBVB
See the Pen html customize element & dark theme by xgqfrms
(@xgqfrms) on CodePen.
js toggle theme
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
how to disabled prefers-color-scheme in js & dark theme的更多相关文章
- mac系统终端的color scheme配置和vim配置
一.配置终端 solarized http://ethanschoonover.com/solarized 简单配置脚本: #!/bin/sh git clone git://github.com/a ...
- mplayer-for-windows change color scheme in win 7
Q: When I play movie on Windows7, always comes this message: The color scheme has been changed The f ...
- 程序员的底色(IDE color scheme、CLI 命令行界面)
1. IDE ⇒ Dracula(吸血鬼) IDE:PyCharm,VS2013: sublime:color scheme,Monokai: 2. CLI 命令行界面 $ setterm -inve ...
- css dark theme & js theme checker
css dark theme & js theme checker live demo https://codepen.io/xgqfrms/pen/GRprYLm <!DOCTYPE ...
- 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/ ...
- a标签(普通标签如span)没有disabled属性 ,怎样利用js实现该属性
a标签以及其她普通标签没有disabled属性,要想实现类似input框属性disabled可以通过css样式设置pointer-events的值来设定: <!DOCTYPE html> ...
- 如何为属性是disabled的表单绑定js事件
$(document).click(function(e){ var el = e.target; if (el.tagName == 'INPUT') { $(el).removeAttr('dis ...
- 我的ubuntu配置
每次装系统都是非常蛋疼的过程,新装的系统还是要配置一下的 首先安装google拼音 sudo apt-get install fcitx fcitx-googlepinyin 然后按装numix主题 ...
- Frontend Development
原文链接: https://github.com/dypsilon/frontend-dev-bookmarks Frontend Development Looking for something ...
随机推荐
- 自动化接口差异测试-diffy 回归测试 charles rewrite 请求
https://mp.weixin.qq.com/s/vIxbtQtRRqgYCrDy7XTcrA 自动化接口差异测试-diffy Boris 搜狗测试 2018-08-30 自动化接口差异测试- ...
- noip 注意事项 (个人向)
目录 非常重要 对拍 空间 极限数据 模数,YES/NO等大小写 个人 考场 神仙 czdzx 说要写,我也来写 非常重要 对拍 空间 极限数据 模数,YES/NO等大小写 个人 养身体,不要紧张,不 ...
- Navicat,Dbeaver,heidiSql,DataGrip数据库连接工具比较
Navicat,Dbeaver,heidiSql,DataGrip数据库连接工具比较 1.Navicat 2.DBeaver 3.heidiSql 4.DataGrip 1.Navicat Navic ...
- vmware打开虚拟级断电情况下,无法找到虚拟机文件
1.此时会在建立的虚拟机目录下,有一些 %虚拟机名字%.vmx.lck 或者别的 %虚拟机名字%.***.lck 删除这些文件夹 2.虚拟文件 是一个后缀名为vmx的文件,发现断电后 变成了v ...
- MapReduce参数调优
原文链接:http://blog.javachen.com/2014/06/24/tuning-in-mapreduce/ 本文主要记录Hadoop 2.x版本中MapReduce参数调优,不涉及Ya ...
- 洛谷P4719 【模板】"动态 DP"&动态树分治
[模板]"动态 DP"&动态树分治 第一道动态\(DP\)的题,只会用树剖来做,全局平衡二叉树什么的就以后再学吧 所谓动态\(DP\),就是在原本的\(DP\)求解的问题上 ...
- Uva 10815 Andy's First Dictionary(字符串)
题目链接:https://vjudge.net/problem/UVA-10815 题意 找出一段文本中的所有单词,以小写形式按照字典序输出. 思路 用空白符替换文本中所有非字母字符后再次读入. 代码 ...
- Codeforces Global Round 12 D. Rating Compression (思维,双指针)
题意:给你一长度为\(n\)的数组,有一长度为\(k\ (1\le k \le n)\)的区间不断从左往右扫过这个数组,总共扫\(n\)次,每次扫的区间长度\(k=i\),在扫的过程中,每次取当前区间 ...
- hdu5247 找连续数
Problem Description 小度熊拿到了一个无序的数组,对于这个数组,小度熊想知道是否能找到一个k 的区间,里面的 k 个数字排完序后是连续的. 现在小度熊增加题目难度,他不想知道是否有这 ...
- 2019 ICPC Asia Taipei-Hsinchu Regional Problem J Automatic Control Machine (DFS,bitset)
题意:给你\(m\)个长度为\(n\)的二进制数,求最少选多少个使它们\(|\)运算后所有位置均为\(1\),如果不满足条件,则输出\(-1\). 题解:这题\(n\)的范围很大,所以我们先用\(st ...