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. windows.open、 window.location.href

    windows.open("URL","窗口名称","窗口外观设定");打开新窗口,window对象的方法 不一定打开新窗口,只要有窗口的名 ...

  2. 最简单直接地理解Java软件设计原则之开闭原则

    写在前面 本文属于Java软件设计原则系列文章的其中一篇,后续会继续分享其他的原则.想以最简单的方式,最直观的demo去彻底理解设计原则.文章属于个人整理.也欢迎大家提出不同的想法. 首先是一些理论性 ...

  3. 八：SpringBoot-集成JPA持久层框架，简化数据库操作

    SpringBoot-集成JPA持久层框架,简化数据库操作 1.JPA框架简介 1.1 JPA与Hibernate的关系: 2.SpringBoot整合JPA Spring Data JPA概述: S ...

  4. Spring Boot 基础，理论，简介

    Spring Boot 基础,理论,简介 1.SpringBoot自动装配 1.1 Spring装配方式 1.2 Spring @Enable 模块驱动 1.3 Spring 条件装配 2.自动装配正 ...

  5. Python3爬取猫眼电影信息

    Python3爬取猫眼电影信息 import json import requests from requests.exceptions import RequestException import ...

  6. Kubernetes --（k8s）Job、CronJob

    Job https://www.kubernetes.org.cn/job https://www.kubernetes.org.cn/cronjob Job负责批量处理短暂的一次性任务 (short ...

  7. Codeforces Round #665 (Div. 2) Distance and Axis、

    题目链接:Distance and Axis 题意:在ox轴上,给出点A的横坐标x,你可以向左或右移动点A(x+1/x-1),问你最小移动A的次数,以使得可以在ox轴上找到B点位置,B点满足从O到B的 ...

  8. Beautiful numbers CodeForces - 55D

    题意: 找出区间[li,ri]内有多少数满足,这个数的每一个位的非0数都能把这个数整除 题解: 因为这个数每一位的值都可以把这个数整除,那也就是说这个数是它所有位数的公倍数,但是可能不是最小公倍数. ...

  9. Java_web-response的outputStream和Write输出数据的问题

    解决方法: 把方法换成这个也可以: 因为浏览器也是一个html解析工具,所以认识html文本 下面这个直接write(1),那么浏览器上就会显示L 这个样子在浏览器上看到的就是1: 字节流输出: 这个 ...

  10. 无所不能的Embedding6 - 跨入Transformer时代～模型详解&代码实现

    上一章我们聊了聊quick-thought通过干掉decoder加快训练, CNN-LSTM用CNN作为Encoder并行计算来提速等方法,这一章看看抛开CNN和RNN,transformer是如何只 ...