交互
用于控制元素颜色方案的工具。
| Class | Styles |
|---|---|
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 等工具来控制元素的渲染方式：
尝试切换系统颜色方案以查看变化
方案-明亮
方案-黑暗
方案-明亮-黑暗
<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>Prefix a color-scheme utility with a variant like dark:* to only apply the utility in that state:
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>Learn more about using variants in the variants documentation.