On a ✈️ back home, I decided to add Dark mode support to Henry. Having recently upgraded to Tailwind CSS 4.0, this was a piece of cake to do.

I leverage the widely supported CSS @media prefers-color-scheme feature and Tailwind’s native dark-mode support.

The implementation only required a few changes:

1. update main theme.css

In my main theme.css file where I declare the existing colors, I add the CSS @media selector for the “dark” variable indicator.

@theme {
    /* henry background */
    --color-hbg:         var(--color-slate-50);
    --color-hbg-dark:    var(--color-slate-200);
    /* ... */
  }

  @media (prefers-color-scheme: dark) {
    .dark {
      /* henry background */
      --color-hbg:         #1c2b33;
      --color-hbg-dark:    #152027;
      /* ... */
    }
  }

2. update base html body

In my root html page, I simply add the “dark” variable indicator class

<html class="dark">

Now CSS automatically knows to pull in the dark variant of colors when the system indicates light/dark mode.

There is no step 3!

This was so easy to do, in fact, that I even managed to catch up on Gladiator II on the plane ride which I personally give a solid 3.0 just for Denzel.