Dark mode variants
Tailwind provides the dark: variant for styling a component differently in dark mode. The exact activation strategy depends on the project's setup and whether the design follows system preference or an application-controlled theme.
Design both themes together
Do not simply invert every color. Check surface hierarchy, borders, muted text, focus indicators, images and semantic states in both themes.
Use semantic tokens for larger systems
When an application has many components, CSS theme variables can make light and dark palettes easier to manage than repeating individual color decisions throughout the markup.
ADVERTISEMENT