Dark Mode / Light Mode toggles

[Evan]

These seem to be popping up quite frequently. I know they've existed for quite a few years, but within the past few months they've gotten a lot of attention. Do you think these should be standard on websites in the future? Have you added them to any websites?

The simplest CSS variable dark mode theme

Use CSS variables and simple javascript to enable dark mode and themes on your website.

lukelowrey.com

 

[Adam]

I think they can add a fun touch. I’m not sure outside of the developer community how much people would really miss them if they weren’t there.

I’m adding one to my new site, CSS variables make them nice and easy. There’s also one here in the themes picker.

Personally, I tend to prefer light theme designs particularly for reading long text.

 

[Gummibeer]

Do you think these should be standard on websites in the future? Have you added them to any websites?

Not necessarily a toggle but you should respect the global theme preferences by checking/using the corresponding media query.

I think they can add a fun touch. I’m not sure outside of the developer community how much people would really miss them if they weren’t there.

Dark themes aren't only fun. There are eye illnesses which make it super hard to watch/read a light theme.
But for them and also devs the media query is more important than any toggle.

I would say that toggles are fun, the media query is accessibility and should be necessary and respected.

Same for the reduced motion media query.

 

[kilian]

Make sure your toggle also has a third option that follows the system setting, so it's not just the initial setting (which is really important, like @Gummibeer suggested) but also a way to go back to that setting. I wrote an article about that here: https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken/

 

[Gummibeer]

Make sure your toggle also has a third option that follows the system setting, so it's not just the initial setting (which is really important, like @Gummibeer suggested) but also a way to go back to that setting. I wrote an article about that here: https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken/

Good point, even if I develop only websites using "system" without any manual toggle.^^
Makes things a LOT easier. 😂

 

[kilian]

Fair enough, though there is a group out there that would like your dark mode and their system's light mode (or the other way around), or you have your system set up to switch between light and dark depending on the time and they always want the dark version of your site. A toggle would help in that case.

 

[Gummibeer]

Fair enough, though there is a group out there that would like your dark mode and their system's light mode (or the other way around), or you have your system set up to switch between light and dark depending on the time and they always want the dark version of your site. A toggle would help in that case.

True! But I've checked myself and some colleagues: none uses the toggle for readability/accessibility reasons.
They toggle to check the dark theme or just play around.
For sure that doesn't mean that there's no one using a toggle for not only fun reasons. But also for accessibility: a lot if not most dark themes are poorly done. Not enough contrast, only swapped background and primary text color, don't darken images/videos and so on.

That's why I've decided to support dark theme, but only by system preference. Because this way I don't need any JS and don't have to double my CSS/selectors to work with media query and body class or anything. Sure CSS variables could help a bit. And possibly even could work without any JS by doing some crazy radio button check styling.

But all of this wasn't worth it for me. I think instead of putting time and energy into a toggle the time is better spent into creating a good dark theme. Styling the whole page including buttons, links, images, forms and so on.
Doing some accessibility checks/work with AXE.js or similar.

Because creating the toggle in an accessible way is also a bit harder.

But if the dark theme itself is good already and you have free time: for sure a toggle doesn't decrease UX!