css dark theme & js theme checker

live demo

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

<!DOCTYPE html>

<html lang="zh-Hans" ️amp>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="xgqfrms">

    <meta name="generator" content="VS code">

    <title>css dark theme</title>

    <!-- css -->

</head>

<body data-theme="css-theme-flag">

    <header>

        <h1 class="header-h1"></h1>

    </header>

    <footer>

        <p>copyright&copy; xgqfrms 2020</p>

    </footer>

    <!-- js -->

</body>

</html>


:root {

  --mode: 'unknown';

  --lightColor: #000;

  --darkColor: #fff;

  --lightBackground: #fff;

  --darkBackground: #000;

}

@media (prefers-color-scheme: light) {

  /* 浅色主题 */

  :root {

     --mode: 'light';

     --colorLink: #34538b;

     --colorMark: #cc0000;

     --colorText: #000000;

     --colorLight: #cccccc;

  }

  [data-theme="css-theme-flag"] {

    background: var(--lightBackground);

    color: var(--darkColor);

    // flag: "light";

    content: "light";

  }

}

@media (prefers-color-scheme: dark) {

  /* 暗黑模式 */

  :root {

     --mode: 'dark';

     --colorLink: #bfdbff;

     --colorMark: #cc0000;

     --colorText: #ffffff;

     --colorLight: #777777;

  }

  [data-theme="css-theme-flag"] {

    background: var(--darkBackground);

    color: var(--darkColor);

    // flag: "dark";

    content: "dark";

  }

}

pre{

  color: #0f0;

}


/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-04-23

 * @modified

 *

 * @description css dark theme & js theme checker

 * @augments

 * @example

 * @link https://www.cnblogs.com/xgqfrms/p/12764741.html

 *

 */

const log = console.log;

const body = document.querySelector(`[data-theme="css-theme-flag"]`);

const h1 = document.querySelector(`h1`);

const color = window.getComputedStyle(body, null).color;

// log(`body color`, color);

const theme = window.getComputedStyle(body, null).content;

log(`body theme`, theme);

if(theme === `"dark"`) {

  h1.innerText = `css dark theme`;

} else {

  h1.innerText = `css light theme`;

}

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

wx dark theme

@media (prefers-color-scheme: dark) {

  .js_darkmode__0 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__1 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__2 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__3 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__4 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__5 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__6 {

    color: rgb(167, 167, 167) !important;

  }

}


@media (prefers-color-scheme: dark) {

  .js_darkmode__7 {

    color: rgb(167, 167, 167) !important;

  }

  .js_darkmode__31 {

    background: rgb(192, 190, 183) !important;

  }

  .js_darkmode__37 {

    color: rgb(167, 167, 167) !important;

  }

}


@media (prefers-color-scheme: dark) {

body:not([data-weui-theme='light']) {

    --weui-BG-COLOR-ACTIVE: #282828;

}

}

@media (prefers-color-scheme: dark) {

body:not([data-weui-theme='light']) {

    --weui-BG-0: #191919;

    --weui-BG-1: #1f1f1f;

    --weui-BG-2: #232323;

    --weui-BG-3: #2f2f2f;

    --weui-BG-4: #606060;

    --weui-BG-5: #2c2c2c;

    --weui-FG-0: rgba(255,255,255,0.8);

    --weui-FG-HALF: rgba(255,255,255,0.6);

    --weui-FG-1: rgba(255,255,255,0.5);

    --weui-FG-2: rgba(255,255,255,0.3);

    --weui-FG-3: rgba(255,255,255,0.05);

    --weui-RED: #fa5151;

    --weui-ORANGE: #c87d2f;

    --weui-YELLOW: #cc9c00;

    --weui-GREEN: #74a800;

    --weui-LIGHTGREEN: #28b561;

    --weui-BRAND: #07c160;

    --weui-BLUE: #10aeff;

    --weui-INDIGO: #1196ff;

    --weui-PURPLE: #8183ff;

    --weui-WHITE: rgba(255,255,255,0.8);

    --weui-LINK: #7d90a9;

    --weui-TEXTGREEN: #259c5c;

    --weui-FG: white;

    --weui-BG: black;

    --weui-TAG-TEXT-ORANGE: rgba(250,157,59,0.6);

    --weui-TAG-BACKGROUND-ORANGE: rgba(250,157,59,0.1);

    --weui-TAG-TEXT-GREEN: rgba(6,174,86,0.6);

    --weui-TAG-BACKGROUND-GREEN: rgba(6,174,86,0.1);

    --weui-TAG-TEXT-BLUE: rgba(16,174,255,0.6);

    --weui-TAG-BACKGROUND-BLUE: rgba(16,174,255,0.1);

    --weui-TAG-TEXT-BLACK: rgba(255,255,255,0.5);

    --weui-TAG-BACKGROUND-BLACK: rgba(255,255,255,0.05);

}

}

xgqfrms 2012-2020

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

css dark theme & js theme checker的更多相关文章

  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 Mode

    CSS Dark Mode https://kevq.uk/automatic-dark-mode/ https://kevq.uk/how-to-add-css-dark-mode-to-a-web ...

  3. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  4. amazeui中css组件、js组件、web组件的区别

    amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...

  5. 报错：You need to use a Theme.AppCompat theme (or descendant) with this activity.

    学习 Activity 生命周期时希望通过 Dialog 主题测试 onPause() 和 onStop() 的区别,点击按钮跳转 Activity 时报错: E/AndroidRuntime: FA ...

  6. Android You need to use a Theme.AppCompat theme (or descendant) with this activity.

    错误描述为:java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with ...

  7. You need to use a Theme.AppCompat theme (or descendant) with this activity解决方法

    报错如下:java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.test2/com.exampl ...

  8. You need to use a Theme.AppCompat theme

    java.lang.RuntimeException: Unable to start activity ComponentInfo{com.dji.sdk.sample/com.dji.sdk.sa ...

  9. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

随机推荐

  1. 美团配送A/B评估体系建设与实践

    https://mp.weixin.qq.com/s/v3Fvp6Hed7ZGoE8FGlGMvQ

  2. Git提交代码规范 而且规范的Git提交历史，还可以直接生成项目发版的CHANGELOG（semantic-release）

    Git提交代码规范 - 木之子梦之蝶 - 博客园 https://www.cnblogs.com/liumengdie/p/7885210.html Commit message 的格式 Git 每次 ...

  3. Index-Only Scans and Covering Indexes

    小结: 1.覆盖索引 回表 2. All indexes in PostgreSQL are secondary indexes, meaning that each index is stored ...

  4. WPF显示命名空间不存在对应名称

    3个办法 1 切换到Release模式,再生成.生成成功后切换回Debug模式就不报错了.这是Release模式下找不到我们自定义的控件导致的报错.所以切换为Release后生成则可以解决此问题. 2 ...

  5. Oracle数据传输MySQL中文编码问题

    最近捣鼓数据库,当使用Navicat将Oracle的数据传输给MySQL时,如果Oracle表中存在中文,则该表传输会出错,错误为: [ERR] 1366 - Incorrect string val ...

  6. Centos7安装成功后，网卡配置及更改镜像地址为国内镜像

    Centos7安装成功后,网卡配置及更改镜像地址为国内镜像 一.网卡配置 二.修改网络配置 踩坑一:IPADDR 踩坑二:网关,DNS与本地不一致 重启网络服务 三.镜像修改为aliyun 四.相关知 ...

  7. 为什么首次ping丢包

    1.之前就有关于为什么我们ping包的时候第一个包总是显示逗点,也就是超时的困惑.很多人的解答就是因为ARP啊,然后就没有下文了.继续追问那么为什么ARP就要是逗点呢?然后就又有一些人说因为要ARP解 ...

  8. Dubbo官网实战使用技巧

    原文链接:Dubbo官网实战使用技巧 1.启动时检查: 我们检查依赖的服务是否启动,可利用下面三个属性,优先级从左到右逐渐降低. 如果服务不是强依赖,或者说服务之间可能存在死循环依赖,我们应该将 ch ...

  9. cf 1305 E. Kuroni and the Score Distribution

    题目传送门:E. Kuroni and the Score Distribution 题目大意:给n和m,输出n个数,这些数里必须要有m对a[i]+a[j]==a[k]  ( i < j < ...

  10. 病毒侵袭持续中 HDU - 3065 AC自动机

    小t非常感谢大家帮忙解决了他的上一个问题.然而病毒侵袭持续中.在小t的不懈努力下,他发现了网路中的"万恶之源".这是一个庞大的病毒网站,他有着好多好多的病毒,但是这个网站包含的病毒 ...