互動性
color-scheme
用於控制元素配色方案的實用工具。
| 類別 | 樣式 |
|---|---|
scheme-normal | color-scheme: normal; |
scheme-dark | color-scheme: dark; |
scheme-light | color-scheme: light; |
scheme-light-dark | color-scheme: light dark; |
scheme-only-dark | color-scheme: only dark; |
scheme-only-light | color-scheme: only light; |
範例
基本範例
使用 scheme-light 和 scheme-light-dark 等實用工具來控制元素的呈現方式
嘗試切換您的系統配色方案以查看差異
scheme-light
scheme-dark
scheme-light-dark
<div class="scheme-light ..."> <input type="date" /></div><div class="scheme-dark ..."> <input type="date" /></div><div class="scheme-light-dark ..."> <input type="date" /></div>在深色模式中套用
前綴a 具有變體（例如）的 color-scheme 實用工具 dark:* 僅在該狀態下套用實用工具
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>在變體文件中了解更多關於使用變體的資訊。
