ContextQMD
Back to Tailwindcss

Color Scheme

src/docs/color-scheme.mdx

latest2.5 KB
Original Source

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;"], ]} />

Examples

Basic example

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

<Figure hint="Try switching your system color scheme to see the difference"> <Example> { <div className="flex justify-between gap-8 text-sm max-sm:flex-col"> <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-light"> <p className="font-mono font-medium text-gray-500 dark:text-gray-400">scheme-light</p> <input type="date" className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10" /> </div> <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-dark"> <p className="font-mono font-medium text-gray-500 dark:text-gray-400">scheme-dark</p> <input type="date" className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10" /> </div> <div className="flex flex-grow flex-col items-center gap-3 text-center scheme-light-dark"> <p className="font-medium text-gray-500 dark:text-gray-400">scheme-light-dark</p> <input type="date" className="w-full rounded-lg border border-gray-950/10 bg-[Field] px-3 py-2 text-[FieldText] dark:border-white/10" /> </div> </div> } </Example>
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>
</Figure>

Applying in dark mode

<TargetingSpecificStates element="html" property="color-scheme" variant="dark" defaultClass="scheme-light" featuredClass="scheme-dark" />