Dark mode is the new web design hotness. There are a lot of examples of switches out there but most of them are just dual switches — Light/Dark. I wanted to implement a three way switch in the site I am designing: Light/Auto/Dark so that people can choose to lock it in one mode or another or leave it auto so that it adjusts with
To implement it, I borrowed some ideas from CSS Toggle Switch using radio buttons and css to build the toggle. I implemented it in Tailwind with light/dark mode colors provided via css variables. I then wrote some simple vanilla JS to store the add "dark"/"light" class to the body tag and store the state in localStorage.
I'm pleased with the result. It's simple and clean and ideally should be accessible since it's based in the same technique that CSS Toggle Switch uses (I haven't tested it for accessibility though so no promises).
Here's my CodePen of it!
Cover photo by Elliott Engelmann