# Dark Mode — Tailwind CSS

Source: https://www.skillbyai.com/en/tailwind/v-dark

> The dark: variant.

## 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.

```css
@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 <head> before the page renders.

**Quiz:** By default, when do dark: utilities apply in Tailwind v4?

- [ ] Always
- [x] When the system prefers a dark colour scheme
- [ ] Only after 6pm
- [ ] Only when a .dark class exists

*Answer:* When the system prefers a dark colour scheme. Override with @custom-variant for a toggle.