As you may have noticed, i have a theme switcher! It's the lil dropdown in the bottom right of the site, if you open it up you'll see the themes i've currently got. It's a JavaScript widget i threw together, which uses localStorage to persist theme preferences across my site!

 Basically the way it works, is i've got the floating div over there which has a named radio button group to pick the theme. Each of those inputs has a value with the name of the theme in it, so in the script I grab the selected theme with a document.querySelector('input[name="theme"]:checked')?.value and pass it to my theme swapper. I also check if there's a theme already selected or not, and set the theme accordingly.

 The theme swapper itself is pretty simple. I've got a big dictionary (in Python terms) which for each theme stores the name of all the variables i use in my CSS, along with their values for that theme. The theme swapper iterates over the CSS variables and sets new values. That's it. Super easy. I also have the option of changing the background image (which i think i'll do as soon as a make some new ones) and i plan on making it so you can swap font sets too!

 Feel free to check out the source for the widget! It's on just about every page on this site, so you can find it pretty easily. It's right above the header in the code.

 As always, you (yes you! and anyone else!) are free to copy, modify, share, and distribute this as you please, with or without attribution. For more information, refer back to the playground home.