Color scheme

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { TargetingSpecificStates } from "@/components/content.tsx";

export const title = "color-scheme"; export const description = "Utilities for controlling the color scheme of an element.";

Examples

Basic example

Use utilities like scheme-light and scheme-light-dark to control how element should be rendered:

{

scheme-light

scheme-dark

scheme-light-dark

}

<!-- [!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>

Applying in dark mode