How does Tailwind dark mode work?

Tailwind CSS uses the dark: variant prefix to apply styles when dark mode is active. By default, it uses the prefers-color-scheme CSS media feature, but you can configure it to use a class or data attribute for manual toggling.

How do I invert Tailwind colors for dark mode?

The standard approach is to invert shade numbers: 50↔950, 100↔900, 200↔800, etc. Light backgrounds (white, slate-50) become dark (slate-950), and dark text becomes light. The 500 shade typically stays the same for accent colors.

What happens to white and black in dark mode?

White (bg-white) typically becomes a very dark color like slate-950 in dark mode. Black becomes white or a very light shade. This maintains the same visual hierarchy while inverting the color scheme.

Should I use class or media query for dark mode?

Use 'selector' strategy (class-based) if you want users to manually toggle dark mode. Use 'media' strategy if you want to respect the system preference. Many sites use both - respecting system preference initially but allowing manual override.

How do I copy dark mode classes?

Our tool generates both light and dark classes together (e.g., 'bg-white dark:bg-slate-950'). Click 'Copy All' to get all mappings, or copy individual pairs for specific elements.

Auto Luminance Inversion

Dark Mode Helper

Generate dark mode equivalents for your Tailwind light mode colors. Build consistent themes with proper luminance inversion.

Light Mode Colors

Generated Classes

bg-white

dark:bg-slate-950

text-slate-900

dark:text-slate-100

bg-indigo-600

dark:bg-indigo-400

text-white

dark:text-slate-950

Preview

Preview Heading

This is how your colors will look in light mode. The luminance is automatically inverted for optimal readability.

Dark Mode Rules

Shades are inverted: 50 → 950, 100 → 900, etc.

Middle shade (500) stays the same for accent colors

white becomes slate-950

black becomes white