Lzh on GitHub

color-scheme

用于控制元素 颜色方案 的工具类。

快速参考

类名样式
scheme-normalcolor-scheme: normal;
scheme-darkcolor-scheme: dark;
scheme-lightcolor-scheme: light;
scheme-light-darkcolor-scheme: light dark;
scheme-only-darkcolor-scheme: only dark;
scheme-only-lightcolor-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>

在深色模式下应用

在 color-scheme 工具类前加上 dark: 等变体，使其仅在该状态下应用：

<html class="scheme-light dark:scheme-dark ...">
<!-- ... -->
</html>

在 变体文档 中了解更多关于使用变体的信息。