Summary

In this lesson, we gave the shelter's page a dark version and learned that:

The variant dark: applies a class only in dark mode: bg-stone-50 dark:bg-stone-900.
By default, dark: follows the setting of the operating system (the rule @media (prefers-color-scheme: dark)).
With the line @custom-variant dark (&:where(.dark, .dark *)); after the import in style.css, dark mode is on when <html> has the class dark. That's how sites with a dark mode switch work: a script adds or removes the class.
Every color gets a partner for dark mode: backgrounds move from light shades to dark ones and text the other way round, cards are a shade lighter than the page, muted text is stone-400, borders stone-700, and the main color of the site gets a lighter shade (orange-400).
The opacity modifier works with dark: too: bg-white/90 dark:bg-stone-900/90. A see-through tint, such as dark:bg-emerald-500/20, suits badges on dark.
Shadows can barely be seen on dark: a lighter background and a thin border (dark:border dark:border-stone-700) work better.
Variants can be combined: dark:hover:text-orange-400.
With dark:hidden and hidden dark:inline, each mode shows different content.

In the next lesson, Customizing Tailwind, you'll add your own colors and fonts to Tailwind and learn how to avoid repeating the same classes.

Practice: here's the shelter's contact card, so far only light. Give it a dark version.

Instructions

In style.css, add the line that makes the class dark turn dark mode on: @custom-variant dark (&:where(.dark, .dark *));.

Turn dark mode on: give the html element the class dark. The page turns dark, but the card stays white.

Give the card its dark version: add the classes dark:bg-stone-800 dark:border dark:border-stone-700 to the card, dark:text-stone-400 to its paragraph and dark:text-orange-400 to the link.

Start programming for free

5/5