Thread by @adamwathan

This is a great example of why you need more control when implementing dark mode than just reversing the color scheme or overriding basic variables like "--color-primary" or similar.

Short thread pointing out some of the neat design decisions here 👉

https://twitter.com/quarterdeck/status/1350416361701470210

1. The top banner – the background color changes a bit and so does the link, but it doesn't *invert*, it's still light on dark in both versions.

Dark sections shouldn't be inverted to light in dark mode, you'd get a blinding light block — bad in dark environments.

2. The background switches from light to dark, but in the light design it's a solid color, and in the dark design it's a gradient. You can't do this by changing a color variable.

3. The little badge/well above the headline is already dark, but it gets darker in dark mode to retain enough contrast against the background. A naive dark implementation would make this well light, and it wouldn't look like a well anymore.

From Refactoring UI:

4. Call to action buttons switch from indigo in light mode to pink in dark mode, again not an inversion.

Light indigo is dull because indigo is inherently dark. Pink is inherently light, so you can saturate it to bits while still maintaining high contrast over a dark background.

Here's a related tip again from Refactoring UI, about how rotating the hue instead of (or in combination with) adjusting the lightness can lead to more vivid results when you need a lighter version of an existing color:

To learn more about how dark mode works in Tailwind, check out this great video @simonswiss put together when Tailwind CSS v2.0 was released 🥳