除了前面介绍的使用CSS变量来让HTML元素跟随主题颜色外，主题还在 html 根元素上增加了 data-color-scheme 属性来标记当前颜色。
data-color-scheme 逻辑
- 当首次进入页面（用户没有手动切换颜色时），
data-color-scheme属性值永远跟随系统颜色，如下所示：
| 操作系统状态 | data-color-scheme值 |
|---|---|
| 浅色 | light |
| 深色 | dark |
| 不支持 | light |
- 当用户手动切换过颜色时，
data-color-scheme属性值为用户切换后的状态
示例
有以下html：
<div class="sample_word">
This is an example.
</div>要求：浅色模式时颜色为红色，深色模式时颜色为蓝色。则写以下CSS
[data-color-scheme="light"] .sample_word {
color: red;
}
[data-color-scheme="dark"] .sample_word {
color: blue;
}