Dark Mode and the Footer

The page is complete, in light colors. Now comes its dark version, and finally the footer.

A reminder of how dark mode works on this page: style.css has the line @custom-variant dark (&:where(.dark, .dark *));, so classes with dark: apply when the html element has the class dark. The 🌙 button in the header adds and removes it with the little script at the end of the page. Click it in the preview, and keep checking your dark version as you go.

Pairs of colors. Every light background gets a dark one, and every dark text a light one: for example bg-white dark:bg-stone-800 for boxes on a page with dark:bg-stone-900, and text-stone-600 dark:text-stone-300 for muted texts.
Shadows are hard to see on a dark background. Boxes stand out by a lighter background instead.
Lighter shades of the main color read better on dark backgrounds, for example dark:text-brand-400 for the logo. Orange buttons with white text can stay as they are.
Semi-transparent backgrounds stay semi-transparent: dark:bg-stone-900/90.

The checks switch the page to dark mode by themselves: for a moment, they add the class dark to html, compare the colors, and then remove it again.

Instructions

Give body a dark background and a light text color in dark mode, for example dark:bg-stone-900 dark:text-stone-100.

Give every element with a light background a dark one in dark mode: the header, the hero, the cats' cards, the steps, both boxes in Contact, the 🌙 button and anything else you gave a light background. The form fields come next. Make the muted texts lighter, too.

Give the form fields a dark background in dark mode too, for example dark:bg-stone-900, and a darker border, for example dark:border-stone-600.

Finally, the footer: give it padding, and a background color or a line at the top (border-t) that sets it apart from the page, for example bg-stone-800 px-4 py-10 text-center text-sm text-stone-300. Check it in both modes.

Start programming for free

4/5