File: color-scheme.md | Updated: 11/15/2025
⌘KCtrl KDocs Blog Showcase Sponsor Plus
Interactivity
Utilities for controlling the color scheme of an element.
| Class | Styles |
| --- | --- |
| 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:
Try switching your system color scheme to see the difference
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>
Prefix a color-scheme utility with a variant like dark:* to only apply the utility in that state:
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>
Learn more about using variants in the variants documentation .
Copyright © 2025 Tailwind Labs Inc.·Trademark Policy