Kev Quirk|

Menu

Automatic Dark Mode

I’ve had a lot of feedback in the past about adding a dark mode to this website. I always resisted doing this, as I wanted my theme just how I designed it – to be a first class citizen.

After lots more feedback about it, I ended up adding dark theme support via a WordPress plugin. This was a toggle at the top of the page that invoked some JavaScript when toggled. This JavaScript then applied a dark theme to the site.

I was never happy with this solution, as I try to minimise the JavaScript on this site wherever I can. Mainly so people who disable JavaScript can still read this site in comfort.

The New Solution

I’ve decided to re-implement this feature in CSS using the prefers-color-scheme property. I have removed the toggle and got rid of the JS that changed the theme.

If you’re using a dark theme on your operating system, my website should now respect that setting and render the dark version of this website.

Light Theme
Dark Theme

When I get a chance, I will write a guide on how to implement the prefers-color-scheme property so you can implement this on your website too.

Want to leave a comment?

I have decided to remove the comments from this blog (here's why). If you want to give me some feedback on this post, please contact me.

«

»