Select a theme. Inspired by Breath of the Wild and Max's awesome color switcher
August 27, 2020

Collecting Theme Toggles

Collecting Theme Toggles

For the past few years, I've been tinkering with designing dark/light modes and themes for the web - experimenting with CSS variables, different stylesheets, CSS-in-JS, etc. It's been awesome to be inspired by how other products, websites, and design portfolios are experimenting with dark/light modes - inspiring some of the recreations in code which you can find below.

One of my most complex experiments is actually the theme toggle on this website! (Play with it using the button in the top navigation)

I'll try to keep this list updated as I add something new to CodePen or when I throw together a new design. Click an image to play with a toggle and check out the code.


Themes in my Portfolio

I've documented the theme toggles in my own portfolio (new and old), but here they are again:

Theme toggle
(https://ryanparag.com)

Theme toggle
(https://grapalab.com)


More Theme Toggles

Here are some code sketches in CodePen - click an image to play with a toggle and check out the code:

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle

Theme toggle
View the toggle


Do you have a cool idea for a way to toggle themes? Let me know what you're playing around with using the form below.


Have feedback?

I'd love to see if this was helpful or if there was anything I should look to update - let me know below!


Hey, I'm Ryan.👋

I'm a designer and regularly bite off more than I can chew - literally and figuratively.

More about me