非变量方式处理主题当前颜色状态

除了前面介绍的使用 CSS 变量来让 HTML 元素跟随主题颜色外，主题还在 html 根元素上增加了 data-color-scheme 属性来标记当前颜色。

data-color-scheme 逻辑

• 当首次进入页面（用户没有手动切换颜色时），data-color-scheme 属性值永远跟随系统颜色，如下所示：

• 当用户手动切换过颜色时，data-color-scheme 属性值为用户切换后的状态

示例

有以下 html：

1
<div class="sample_word">
2
    This is an example.
3
</div>

要求：浅色模式时颜色为红色，深色模式时颜色为蓝色。则写以下 CSS

1
[data-color-scheme="light"] .sample_word {
2
    color: red;
3
}
4
[data-color-scheme="dark"] .sample_word {
5
    color: blue;
6
}