peachtea.xyz / writing / software / you probably dont need a theme toggle

You Probably Don’t Need A Theme Toggle

The user has already set a theme, and will likely not care to change it just for your website.

As reminder: a theme toggle is a switch that lets you change the theme on a website - usually between light and dark 🌅 / 🌃

Some folks set their theme based on the time of day, others just because they prefer one over the other. The only thing you need to do in order to respect this preference is to add a stylesheet declaring dark styles for your site:

<link rel="stylesheet" href="/css/dark.css"
media="screen and (prefers-color-scheme: dark)">

Theme toggles can be fun to build. If you’re looking for something interesting to work on, there’s the “Flash of Incorrect Theme” problem that comes up when solving it on the client. (As an aside, maybe javascript in the <head> is good enough for this).

If you want to go a step further you might provide a monochrome theme:

<link rel="stylesheet" href="/css/mono.css"
media="screen and (monochrome)">

I’m very thankful this problem is already solved - now I have more time to focus on choosing colors I like.