除了前面介紹的使用CSS變量來(lái)讓HTML元素跟隨主題顏色外，主題還在?html?根元素上增加了?data-color-scheme?屬性來(lái)標(biāo)記當(dāng)前顏色。
data-color-scheme 邏輯
- 當(dāng)首次進(jìn)入頁(yè)面（用戶沒有手動(dòng)切換顏色時(shí)），
data-color-scheme?屬性值永遠(yuǎn)跟隨系統(tǒng)顏色，如下所示：
| 操作系統(tǒng)狀態(tài) | data-color-scheme值 |
|---|---|
| 淺色 | light |
| 深色 | dark |
| 不支持 | light |
- 當(dāng)用戶手動(dòng)切換過(guò)顏色時(shí)，
data-color-scheme?屬性值為用戶切換后的狀態(tài)
示例
有以下html：
<div class="sample_word">
This is an example.
</div>要求：淺色模式時(shí)顏色為紅色，深色模式時(shí)顏色為藍(lán)色。則寫以下CSS
[data-color-scheme="light"] .sample_word {
color: red;
}
[data-color-scheme="dark"] .sample_word {
color: blue;
}