skip navigation

Design Update

Tagged in: design , prefers dark , typography
Grouped in: site updates

So some major design updates. I wanted a dark scheme using prefers-color-scheme but choosing colours is not easy. I looked on Color Hunt and found some nice looking schemes but when I tried them they didn’t look the way I’d hoped.

Eventually I just stuck with trial and error in the browser. Currently the scheme is pretty monochrome and I’m not overly keen on it but it’s OK.

The other change made was the body font. I like the display font, Akzidenz Grotesk Condensed but not sure what goes with it. Currently using Source Sans Pro, a nice font but not sure I’ll stick with it: too modern for Akzidenz perhaps?

Dark mode with CSS

Anyway adding a dark scheme with CSS is very easy.

@media (prefers-color-scheme: dark) {
    :root {
		--code-bg: #655a5a;
		--text: #9cc8f7;
		--headercolor: #0668b0;
		--MainBorderColor: #3e4e5e;
		--container-bg: #2e3641;
		--body-bg: #222831;
	}
}

This says for users that have their OS set to dark mode these are the colours for each custom property (CSS variables).

Dark mode meta tag

You can also add a dark mode meta tag to the <head> section of your pages.

This helps the browser render the background colour immediately, without having to download and parse the whole css file first.

<meta name="color-scheme" content="dark light">

This declaration says:

The page supports both dark and light color schemes, and the page author prefers dark.

☝