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
html
<!-- [!code classes:scheme-light-dark,scheme-light,scheme-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>在深色模式下应用
使用 dark:* 等变体为 color-scheme 工具类添加前缀，使其仅在该状态下生效：
html
<html class="scheme-light dark:scheme-dark ...">
<!-- ... -->
</html>在 变体文档 中了解如何使用变体。