交互性
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 带有像 dark:* 这样的变体的 color-scheme 工具类，仅在该状态下应用该工具类 dark:* 仅在该状态下应用该工具类
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>在变体文档中了解更多关于使用变体的信息。
