DEV Community

Cover image for Dark Mode Three Way Switch
Colin Fahrion
Colin Fahrion

Posted on

Dark Mode Three Way Switch

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)

Collapse
 
edm00se profile image
Eric McCormick

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.

Collapse
 
colinaut profile image
Colin Fahrion

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"

Collapse
 
barelyhuman profile image
Reaper • Edited

Similar concept but uses a single button to toggle around
themer
Mine is vanilla js though.
I like your implementation better

Collapse
 
colinaut profile image
Colin Fahrion

Yeah while researching I saw examples that use buttons — missed this one though! I like the toggle as I makes for a nice UI.

Collapse
 
ben profile image
Ben Halpern

I've never seen a three-way switch before. Interesting.

Collapse
 
maroun_baydoun profile image
Maroun Baydoun

Nice solution. Kudos for using CSS variables.