Light/Dark Template Toggles? Amateur Hour!

One of the boons to accessibility of late has been the ability to (in some cases, support is sketchy) detect if the user is using a light or dark theme on their OS and follow suit with your site template. Failing that, we can add a toggle to turn light/dark off overriding the automatic behavior.

Honestly, the autodetection routines for both CSS and JS of light/dark templates does not work on a single device I own. So… yeah.

Note, some people try to jump through hoops for non-scripted behavior of this, but to be frank if your base “light” template meets accessible colour contrasts, wasting time worrying about the handful of people with scripting disabled simply isn’t worth the time or effort. You met the minimums, people want the enhancement they can turn scripting on. When it comes to accessibility there’s meeting or exceding minimums — job done — then ENHANCING the already working page with scripting.

Now that said, what if we could take it further. No, WAY further. What if we could real-time switch between full-on colour palettes?

It’s easier than you think.

HSL And Custom Properties To The Rescue!

HSL having lightness as a separate component can actually make switching between light and dark templates as easy as…