Nope, it is not déjà vu. I revised my website colors again. This time, if you are viewing my website in in light mode, you are seeing a rich brown text on a creamy, ivory-colored background. In dark mode, you are likely seeing light text on a rich chocolatey dark brown background.

You can go ahead and read my post from October 2021 detailing how I originally shipped a dark mode on this site to see a screenshot of the previous implementation. Not much has changed on the technical front. After a few months of using my own site, I decided to change the color scheme with these warmer, earthier colors, because the blue links left me feeling a bit cold, especially in dark mode.

Not much else to say design-wise. I have been using the Instapaper app for over a decade, as well as the reader view in Firefox (my main web browser of choice these days). Both of these reading apps support a “sepia” background option. Sometime last year, I stumbled across the Wikipedia entry for cosmic latte, the alleged average color of the universe, represented by hex triplet #FFF8E7. In addition to being a bit of trivia or a miserable inside joke, this particular shade of beige is pretty easy on the eyes for longform reading.

I used a shade that is just a bit lighter, and instead of charcoal or black I paired this with a color that reminded me of dark chocolate. I found I love my type choices even more in this understated palette. To get a few midpoints (colors for card components, supporting text, etc.) I used a classic web design tool, Eric Meyer's Color Blender. Link color matches text color this time, except links will always be underlined.

With almost all blues eliminated in this new minimal palette, I thought it would be a good time to take stock of any CSS declarations I no longer needed and remove them. I used cssstats.com to audit these styles.

Wow, that’s a lot of color. When I started working on this site in 2020, I grabbed the whole tachyons palette. I’m not sure what I was thinking at the time, perhaps I might be a little ambitious with a rainbow of different colors throughout my site. That didn’t really pan out, and so I was able to get rid of a big chunk of my _config.scss file, plus a bunch of color utility classes it turns out I wasn’t using at all.

With my earlier implementation of dark mode, I also struggled a bit with how other user interface (UI) components should translate from light to dark. Should a card component be lighter or darker than the background color? What about code and pre elements? Does this relationship switch from one mode to another?

Accessibility, as always is a primary concern. To get a range of values that are interoperable in both light and dark modes, I put some of my color values from color blender into EightShapes’ Contrast Grid tool. I also added shades and tints of my red brand color, since I want a link style to stand out for certain links, like my post tags. The contrast grid tool is one of my favorites. It allows you to test many foreground and background colors at once in compliances with WCAG 2.0’s minimum contrast requirements.

I wanted to make it easier on myself this time, using CSS variables again, and making the little UI decisions less variable themselves. In light mode, the “card” background will be a bit darker than the background color, and in dark mode, the “card” will be a bit lighter. In my current case, “card” styles are divs with a .panel class applied, plus the blockquote, code and pre elements. I am applying a strict rule to my internal brand guidelines not to mix these up too much. When I do (putting code samples in a blockquote for example), hopefully my type system sorts these out perceptively. Minimalism is harder than it looks!

So to review, that’s six different values: a body background color, a “card” background color, a text color, a supporting (light) text color, a default link color (same as text color), and a hovered link color. Here’s those variables in action:

:root {
  --bg-color: #faf6ef;
  --bg-card: #e6e0d7;
  --text-color: #433c33;
  --light-text: #5d574e;
  --link-color: #433c33;
  --link-hover: #ee453b;
}

And the colors for dark mode:

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #231c13;
        --bg-card: #433c33;
        --text-color: #f9f4eb;
        --light-text: #e6e0d7;
        --link-color: #f9f4eb;
        --link-hover: #f18680;
      }
}

I’ve found lately when working with CSS variables, and dark mode especially, that it is better to name classes and variables with the purpose of the color, rather than the color’s name. Now that I’m going down this road, there is probably a lot more in my stylesheets I can refactor, maybe embracing more repeatable utility classes for the different components that make up my site. It is always a work in progress.

I hope you like the new color scheme as much as I do.