除了前面介紹的使用CSS變量來讓HTML元素跟隨主題顏色外，主題還在?html?根元素上增加了?data-color-scheme?屬性來標記當前顏色。
data-color-scheme 邏輯
- 當首次進入頁面（用戶沒有手動切換顏色時），
data-color-scheme?屬性值永遠跟隨系統(tǒng)顏色，如下所示：
| 操作系統(tǒng)狀態(tài) | data-color-scheme值 |
|---|---|
| 淺色 | light |
| 深色 | dark |
| 不支持 | light |
- 當用戶手動切換過顏色時，
data-color-scheme?屬性值為用戶切換后的狀態(tài)
示例
有以下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;
}