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.";

<ApiTable rows={[ ["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;"], ]} />

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

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