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. webmvc 拦截器 允许跨域 跨域问题 sessionid不一样

    package cn.com.yitong.ares.filter; import java.io.IOException; import javax.servlet.Filter;import ja ...

  2. Communicating sequential processes CSP 通信顺序进程 CSP writing to a file by name (process, Erlang) vs. writing to a file descriptor (channel, Go)

    the-way-to-go_ZH_CN/01.2.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...

  3. MySQL如何安全的给小表加字段

    MySQL学习笔记-如何安全的给小表加字段 如果要给一个大表加字段,你一般都会非常谨慎小心,以免对线上业务造成影响,但实际上给一个小表加字段不慎操作也会导致线上业务出问题,这篇文章主要学习一下MySQ ...

  4. Autofac for AutoMapper

    我一直在做的事情.NET 开发已经有一段时间了.有时人们问我,为什么我仍然觉得它有趣.答案很简单: 我是超级 d.r.y.如果你不熟悉这个术语,你应该查一下,但它基本上意味着你应该总是尝试应用那些可以 ...

  5. Python学习【第3篇】：列表魔法

    ##########################深灰魔法-list类中提供的方法###################list 类,列表list = [1,12,9,"age" ...

  6. 五种C语言非数值计算的常用经典排序算法

    摘要:排序是计算机的一种操作方法,其目的是将一组"无序"的记录序列调整为"有序"的记录序列,主要分为内部排序和外部排序. 排序 排序是计算机的一种操作方法,其目 ...

  7. CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

    CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...

  8. Redis，JedisPool工具类

    Redis,JedisPool工具类 1.JedisPool 详细配置解释代码 2.Jedis工具类 导入相关依赖: commons-pool2-2.3.jar jedis-2.7.0.jar 1.J ...

  9. Spark运行程序异常信息： org.apache.spark.SparkException: Task not serializable 解决办法

    错误信息: 17/05/20 18:51:39 ERROR JobScheduler: Error running job streaming job 1495277499000 ms.0 org.a ...

  10. CENTOS7 使用YUM安装MARIADB

    现在在服务器配置数据库,一般都会直接配置MariaDB,它可以实现mysql数据库连接. 1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server ...