Dark mode without chaos: Tailwind tokens and one-off themes

January 8, 20267 min read

Tailwind CSSDesign systems

Using semantic colors, `dark:` responsibly, and keeping contrast consistent when you add a third brand palette.

Semantic colors first

Name tokens for role (`surface-elevated`, `border-subtle`) before you name hues. Tailwind dark mode stays maintainable when `dark:` mirrors structure, not one-off hex overrides.

Co-locate light/dark pairs in your config or component tokens.
Reserve neon accents for true emphasis—not every link.

Light theme shapes — Light canvas — borders carry structure.

Dark theme pulse — Dark canvas — contrast from luminance, not saturation alone.

Checklist

Run contrast checks on both themes for body and accent text.
Avoid identical grays for border vs. divider—users lose hierarchy.