Tailwind CSS·Tailwind from utilities to design system

Dark mode and theming

Use the dark variant, CSS variables and a persisted preference.

Intermediate 13 min read Lesson 9 of 300 Challenge included

What you will be able to do

Use dark: variants for simple cases.
Store the preference and apply a class on html.
Define semantic tokens such as surface and ink.
Check contrast in both themes.

In plain English

Tailwind’s dark variant can follow the operating system or a class you control. For a product theme, store a small token layer in CSS variables and switch the values, then reference them from utilities or components.

theme.cssCSS

:root {
  --surface: #ffffff;
  --ink: #0f172a;
}

.dark {
  --surface: #0f172a;
  --ink: #e2e8f0;
}

body {
  background: var(--surface);
  color: var(--ink);
}

Your turn

Add a dark variant

Easy

Make a card white in light mode and slate-900 in dark mode using dark: utilities.

HTML · starter

<div class="">

Check your understanding before moving on.

Knowledge checkQuestion 1

Why avoid filter: invert(1) for dark mode?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Build a design system

Lesson 9 of 300 · 0% of course