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. （Sql Server）SQL FOR XML

    摘要:sql中的for xml语法为表转化为xml提供了很好的支持,当然使用同样的程序语言也能够达到同样的效果,但是有了for xml将使得这一切更加的方便. 主要内容: Select 的查询结果会作 ...

  2. .Net 5 C# 泛型（Generics）

    这里有个目录 什么是泛型? 后记 什么是泛型? 我们试试实现这个需求,给一个对象,然后返回 另一个同样的对象,先不管这个实用性,我们实现看看 首先是int型 private int Get(int a ...

  3. LOJ10096掠夺计划

    题目传送门:https://loj.ac/problem/10096 ----------------------------------------------------------------- ...

  4. JQuery——基本概念

    ###JQuery语法 格式:$(selector).action() 美元符号$本身是JQuery对象的缩写 选择符selector查询和查找HTML元素 Action执行对元素的操作 ###JQu ...

  5. java+js正则表达式获取URL(带端口)域名

    function isPassUrl(remoteLoginUrl){ var flag = false; var passUrlStr = document.getElementById(" ...

  6. java-poi创建模板

    package com.jy.demo.web; import java.io.FileOutputStream; import org.apache.poi.ss.usermodel.Cell; i ...

  7. Vuejs 基础学习教程

    (四)构建基础进阶-env文件与环境设置 我们在实际开发中,我们一般会经历项目的开发阶段,测试阶段,和最终上线阶段,每个阶段对于项目代码的需要可能都有所不同,那我们怎么让它在不同阶段呈现不同的效果呢? ...

  8. 2019牛客暑期多校训练营（第五场）I.three points 1(暴力几何)

    题意:现在给你一个矩形边框 一个三角形的三边长 现在问你能否把三角形放入矩阵边框中 并且输出三个点的坐标 思路:我们可以发现如果一定有解 我们就可以让一个点在左下角(0,0)处 还有一个点在矩形边上 ...

  9. 2019牛客暑期多校训练营(第三场) F.Planting Trees(单调队列)

    题意:给你一个n*n的高度矩阵 要你找到里面最大的矩阵且最大的高度差不能超过m 思路:我们首先枚举上下右边界,然后我们可以用单调队列维护一个最左的边界 然后计算最大值 时间复杂度为O(n*n*n) # ...

  10. Navicat 快捷键 for Mysql

     常用快捷键: 1. ctrl + q: 打开新查询窗口 2. ctrl + r: 运行当前窗口内的所有语句 3. ctrl + w: 关闭当前窗口 4. F6: 打开一个MySQL命令行窗口 5. ...