Dark Mode

System preference or a toggle

By default dark: utilities apply when the operating system prefers a dark colour scheme (prefers-color-scheme: dark). To let users toggle, override the variant in CSS so it follows a class or data attribute, for example @custom-variant dark (&:where(.dark, .dark *));, then add the dark class to <html> with a little JavaScript and remember the choice. Pair every light colour with a dark one, and consider theme variables so components switch automatically.

Class-based dark mode

A toggleable dark variant.

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* markup:
<html class="dark">
  <body class="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
*/

Avoid a flash of the wrong theme

Set the dark class in a small inline script in before the page renders.

Quick check: By default, when do dark: utilities apply in Tailwind v4?

• Always
• When the system prefers a dark colour scheme
• Only after 6pm
• Only when a .dark class exists