WeUI v2.3.0 解读06 theme

MDN CSS1
MDN CSS2

// file: src/style/base/theme/vars/light.less

.varsLight() {
    --weui-BG-0: #ededed;
    --weui-BG-1: #f7f7f7;
    --weui-BG-2: #fff;
    --weui-BG-3: #f7f7f7;
    --weui-BG-4: #4c4c4c;
    --weui-BG-5: #fff;
    --weui-FG-0: rgba(0, 0, 0, 0.9);
    --weui-FG-HALF: rgba(0, 0, 0, 0.9);
    --weui-FG-1: rgba(0, 0, 0, 0.5);
    --weui-FG-2: rgba(0, 0, 0, 0.3);
    --weui-FG-3: rgba(0, 0, 0, 0.1);
    --weui-RED: #fa5151;
    --weui-ORANGE: #fa9d3b;
    --weui-YELLOW: #ffc300;
    --weui-GREEN: #91d300;
    --weui-LIGHTGREEN: #95ec69;
    --weui-BRAND: #07c160;
    --weui-BLUE: #10aeff;
    --weui-INDIGO: #1485ee;
    --weui-PURPLE: #6467f0;
    --weui-WHITE: #fff;
    --weui-LINK: #576b95;
    --weui-TEXTGREEN: #06ae56;
    --weui-FG: black;
    --weui-BG: white;
    --weui-TAG-TEXT-ORANGE: #fa9d3b;
    --weui-TAG-BACKGROUND-ORANGE: rgba(250, 157, 59, 0.1);
    --weui-TAG-TEXT-GREEN: #06ae56;
    --weui-TAG-BACKGROUND-GREEN: rgba(6, 174, 86, 0.1);
    --weui-TAG-TEXT-BLUE: #10aeff;
    --weui-TAG-BACKGROUND-BLUE: rgba(16, 174, 255, 0.1);
    --weui-TAG-TEXT-BLACK: rgba(0, 0, 0, 0.5);
    --weui-TAG-BACKGROUND-BLACK: rgba(0, 0, 0, 0.05);
}


// file: src/style/base/theme/vars/dark.less

.varsDark() {
    --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);
};


1 prefers-color-scheme  CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。
MDN prefers-color-scheme

2 [data-weui-theme='dark'] 属性选择器
MDN 不同类型的选择器

更多其他选择器

// file: src/style/base/theme/index.less

@import 'fn';

body {
    .varsLight();
}

@media (prefers-color-scheme: dark) {
    body:not([data-weui-theme='light']) {
        .varsDark();
    }
}

body[data-weui-theme='dark'] {
    .varsDark();
}


3 为主题动态增加规则

// & 作用 在内嵌调用 .dark() 时；将该样式选择器，归入到body[data-weui-theme='dark'] 子节点中

// file: src/style/base/theme/fn.less

@import 'vars/light';
@import 'vars/dark';

.dark(@rule) {
    body[data-weui-theme='dark'] & {
        @rule();
    }

    @media (prefers-color-scheme: dark) {
        body:not([data-weui-theme='light']) & {
            @rule();
        }
    }
}

.setColor(@var, @color) {
    .setColor(@var, @color, @color);
}

.setColor(@var, @light, @dark) {
    ._setColor({
            @{var}: @light;
    }, {
            @{var}: @dark;
    });
}
._setColor(@lightRule, @darkRule) {
    body {
        @lightRule();
    }
    body[data-weui-theme='dark'] {
        @darkRule();
    }

    @media (prefers-color-scheme: dark) {
        body:not([data-weui-theme='light']) {
            @darkRule();
        }
    }
}