Dark Mode / Light Mode toggles

Dark Mode / Light Mode toggles

Evan

Wordpress / Divi / Avada / Oxygen
Local time
05:46
Joined
Oct 5, 2019
Messages
55

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?

 
Last edited:

Adam

Mr. Webwide
Administrator
Local time
10:46
Joined
Sep 24, 2019
Messages
1,243
Pronouns
he/him

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

Astroneer
Moderator
Local time
11:46
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

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.

 

Gummibeer

Astroneer
Moderator
Local time
11:46
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

kilian

Member
Gold Member
Local time
11:46
Joined
Oct 7, 2019
Messages
60
Pronouns
he/him

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

Astroneer
Moderator
Local time
11:46
Joined
Oct 5, 2019
Messages
1,150
Pronouns
he/him

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!

 
Top