Chris Mallinson Chris Mallinson at night
Chris Mallinson

New Tech, New Design, and Dark Mode Support

Posted on October 25, 2018

I ditched WordPress. Not because I don’t like it. I just don’t need it. I’ve been recommending static sites to a lot of clients, and it was time to take my own advice. I don’t use comments, and don’t need the features of a large CMS any more. I noticed a few articles about a new light CMS called Vapid, and I decided to give it a go. It’s still early in development, but it seems really solid, and I love it. It’s template driven — so much so that the templates are what drive the data structure. Give it a look if you create simple sites that need occational updates. I’ll be writing soon about my experience getting it running on a VPS.

A new site means a new design. I went with something really simple, and wanted less than 10k of CSS/JS combined. Done. I got it down to 6k, with good browser support, so I’m pretty happy with that. I also wanted to align the design with my photography site. That has a heck of a lot more CSS, but if you're previewing full resolution photos, you won't care so much.

I also took this opportunity to implement dark mode. The latest version of the Safari Technology Preview (for Mojave) supports a new media query.

prefers-color-scheme

This query accepts the values light and dark, and you can expect it to start appearing in browsers in the next year or so. Right now, it only works in the preview version of Safari.

body {

	background-color:#FFF;
	color:#333;

	@media (prefers-color-scheme: dark) {

		background-color:#000;
		color:#CCC;

	}

}

Here’s a screen recording of this in action.

Fun stuff. For a deeper dive into dark mode support, check out this article by Craig Hockenberry