互动性
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; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 scheme-light 和 scheme-light-dark 等工具来控制元素的渲染方式：
¥Use utilities like scheme-light and scheme-light-dark to control how element should be rendered:
尝试切换系统配色方案以查看差异
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>在夜间模式下应用(Applying in dark mode)
¥Applying in dark mode
在 color-scheme 工具前面加上一个变体，例如 dark:*，以便仅在该状态下应用该工具：
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>请参阅 变体文档 详细了解如何使用变体。