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. 在ubuntu编写helloworld

    安装vim 打开终端 输入sudo apt-get install vim-gtk 输入登陆密码 等待安装完成 编译C 创建.c文件:vim helloworld.c 编写代码,保存并退出 编译:gc ...

  2. js--数组的find()和findIndex()方法的使用介绍

    前言 阅读本文前先来思考一个问题,面对一个非空数组,你如何快速对数组进行遍历,如何快速找到数组中第一个我们需要关注的数据元素,并且如何知道该元素在数组中对应的下标索引,可能用for循环遍历,然后判断元 ...

  3. SpringMVC听课笔记（十三：使用拦截器）

    1.定义一个拦截器: 实现 HandlerInterceptor接口 2. 配置 3.运行流程 4.也可以通过<mvc:mapping>给拦截器设定特定的拦截路径,或者<mvc:ex ...

  4. Java——单例模式、多线程

    单例模式 单例模式练习 单例模式的分类 懒汉式 懒汉式相关练习 饿汉式 饿汉式相关练习 线程安全 使用双重检测机制实现线程安全的懒汉式 使用静态内部类实现线程安全的单例模式 多线程 多线程的三种方式 ...

  5. linux日志中查找关键字、前几行、结尾几行，Linux的find用法示例

    linux在日志中查找关键字.前几行.结尾几行,Linux的find用法示例 1.linux在日志中查找关键字.前几行.结尾几行 1.1查看日志 前 n行: 1.2查看日志 尾 n行: 1.3根据 关 ...

  6. Golang之如何（优雅的）比较两个未知结构的json

    这是之前遇到的一道面试题,后来也确实在工作中实际遇到了.于是记录一下,如何(优雅的)比较两个未知结构的json. 假设,现在有两个简单的json文件. { "id":1, &quo ...

  7. f5添加多个vlan的方法

    1.方法一 方法二: F5不更改配置,核心添加路由 ip route 10.160.101.0 255.255.255.0 10.160.100.10

  8. （22）zip命令：压缩文件或目录&&unzip命令：解压zip文件

    1.zip 命令基本格式如下: [root@localhost ~]#zip [选项] 压缩包名 源文件或源目录列表 注意,zip 压缩命令需要手工指定压缩之后的压缩包名,注意写清楚扩展名,以便解压缩 ...

  9. 设计模式（十）——组合模式（HashMap源码解析）

    1 看一个学校院系展示需求 编写程序展示一个学校院系结构:需求是这样,要在一个页面中展示出学校的院系组成,一个学校有多个学院, 一个学院有多个系.如图: 2 传统方案解决学校院系展示 3 传统方案解决 ...

  10. 国产App为什么如此“臃肿”？！

    引言 App是Application的简称,正是因为有了丰富多彩的各类App,人们就可以通过它们来最大限度地发挥手中设备的功能.本文主要讨论手机上的App,因为手机的硬件和软件与十余年前相比早已有了巨 ...