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 prefers-color-scheme.
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
Top comments (6)
I like it. I've generally followed with only light/dark as options, but defaulting to system detected / auto during the initial set. There have been a couple occasions where a site I've visited may have chosen correctly but looked wrong, so having a third option makes sense. Good work.
Thanks! I like the third option as personally I like my apps/sites adjusting with the time of day. In some way it's like a sign for me that I'm working too late… "oh shit my apps just switched to dark mode. Maybe I should make dinner"
Similar concept but uses a single button to toggle around
themer
Mine is vanilla js though.
I like your implementation better
Yeah while researching I saw examples that use buttons — missed this one though! I like the toggle as I makes for a nice UI.
I've never seen a three-way switch before. Interesting.
Nice solution. Kudos for using CSS variables.