Details in the Dark

The colors are done, but a few details still show that the page was designed for light mode. Let's look at them.

Shadows. A shadow is a darker area around a box, and it makes the cards seem to float above the page. But on a dark page, there's hardly anything darker than the background, so the shadow can barely be seen. Here's the same card with the same shadow on light and on dark, and on the right with a border instead:

In dark mode, cards stand out thanks to their lighter background, which ours already have, and often a thin border as well:

<div class="rounded-2xl bg-white shadow-md dark:bg-stone-800 dark:border dark:border-stone-700">

dark:border adds a border 1 px wide, only in dark mode. Don't forget its color: without a color class, a border has the color of the text (currentColor), here the very light stone-100, which would be far too bright. The shadow can stay: in light mode, it does its job, and in dark mode, it doesn't get in the way.

Badges. Oscar has a green badge "New" (bg-emerald-100 text-emerald-700). On a dark card, a light patch like that is glaring. In dark mode, badges usually get a see-through tint of their color: dark:bg-emerald-500/20 is emerald-500 at only 20%, and the dark card shows through the rest, so the badge is dark green. With light text (dark:text-emerald-300), it's easy to read:

Combining variants. The links in the header turn orange when the mouse is over them (hover:text-orange-600). In dark mode, orange-600 is too dark again. As you know from enabled:hover: in the lesson on states, variants can be chained: dark:hover:text-orange-400 applies only when both are true: dark mode is on, and the mouse is over the link. dark: usually comes first.