Colors for the Dark

A dark version isn't just the colors flipped. For every color on the page, you choose a partner for dark mode, so you get a pair of classes: one without a prefix and one with dark:. The palette makes it easy, because every color has shades from 50 (the lightest) to 950 (the darkest):

• Backgrounds move from the light end of the scale to the dark end: the page from bg-stone-50 to dark:bg-stone-900.
• Text goes the other way: from text-stone-800 to dark:text-stone-100.
• Surfaces that stand out from the page, such as cards, are lighter than the page in both modes: white on stone-50, and stone-800 on stone-900. What is lighter looks closer, as if light fell on it.
• Muted text, such as the cats' descriptions, is a middle gray: stone-500 on light, and one shade lighter, stone-400, on dark, where a middle gray would be harder to read.
• Borders should differ from the background only a little: stone-200 on light, stone-700 on dark.
• The main color of the site: orange text in orange-600 reads well on white, but on a dark background, it's too dark. A lighter shade, orange-400, stands out better. Our orange button with white text works on both and can stay as it is.

The header has bg-white/90: white at 90%, so the content that scrolls under the sticky header shows through a little. Its dark partner keeps the transparency: dark:bg-stone-900/90.

There are three cards, so you'll write some classes three times. That's normal with Tailwind; in the next lesson, you'll see how to avoid repeating the same classes.

A typical mistake is forgetting the prefix: with bg-stone-800 instead of dark:bg-stone-800, the cards would turn dark in light mode too. So after each change, look at the light version as well: delete the class dark from <html> for a moment, run the code, and then put the class back.