Dark Mode on AJ.dev

Just upgraded AJ.dev to support Dark Mode! Just a quick run down for how I did it.

Media Queries

I learned about prefers-color-scheme from CSS Tricks. I set up the two essential queries below.

@media (prefers-color-scheme: light) {
    /* light background, dark foreground */
}

@media (prefers-color-scheme: dark) {
    /* dark background, light foreground */
}

Then I copied all the CSS tags with colors down into these two brackets and filled out the light/dark alternatives. I primarily just inverted colors from the previous background/foreground, plus a little help from ColorHexa.

Light/Dark Image

The only thing left after CSS colors was changing the logo of AJ.dev to be visible in Dark Mode. To do so, I created a second version of the logo using Affinity Designer.

transition logo

Then in my index.md file I updated the contents to add a second image, plus I added two CSS classes - one for light mode and one for dark.

<img src="aj-sketch.png" width="300" class="aj-sketch">
<img src="aj-sketch-dark-mode.png" width="300" class="aj-sketch-dark">

Then back in the CSS, I added the following to my media queries:

@media (prefers-color-scheme: light) {
    .aj-sketch{
        display: block;
    }
    .aj-sketch-dark{
        display: none;
    }
    /* ... */
}

@media (prefers-color-scheme: dark) {
    .aj-sketch{
        display: none;
    }
    .aj-sketch-dark{
        display: block;
    }
    /* ... */
}

These queries will hide/show the correctly tinted images with the theme.

Profit

The results? A beautiful dark theme that changes easily with macOS Appearance 🎉

dark mode swap gif

Awesome right!? Let me know what you think about the theme @ajkueterman on Twitter, or shoot me suggestions for any changes I could make to get it perfect.