xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

css dark theme & js theme checker

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 发布文章使用：只允许注册用户才可以访问！

posted @   xgqfrms  阅读(399)  评论(5)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
历史上的今天：
2019-04-23 Windows 10 & React Native & Android
2019-04-23 AirPods 2 & Android
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛