Webwide is the inclusive forum community for web designers, developers & makers.

Whether you're an enthusiast, in training, or a seasoned pro – you'll fit right in at Webwide. We understand that our community is one of creation which is why we, unlike many other discussion forums, encourage sharing of your own projects and content. Creating a forum account is fast, easy and completely free so you can start participating right away.

Read our Code of Conduct

Free Forum Membership Benefits

  • Participate in hundreds of interesting discussions
  • Network with industry peers and make new connections
  • Show off your own projects and relevant content
  • Get help and feedback for your coding and designs
  • Buy and sell services and resources in the marketplace
  • Participate in our friendly community challenges
  • Earn trophies and work your way up our leaderboards
  • Enjoy exclusive Webwide member discounts and offers
  • ...and so much more!

Dark Mode / Light Mode toggles

Evan

Wordpress / Divi / Avada / Oxygen
Gold Member
Joined
Oct 5, 2019
Messages
49
Reaction score
57
Points
270
Location
Michigan
Local Time
Today, 05:23
Credits
417
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:
  • Like
Reactions: Sharkie

Adam

Mr. Webwide
Administrator
Joined
Sep 24, 2019
Messages
1,138
Reaction score
1,169
Points
1,115
Location
United Kingdom
Local Time
Today, 10:23
Credits
10,483
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
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 11:23
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
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.
 
  • Like
Reactions: Adam

kilian

Member
Gold Member
Joined
Oct 7, 2019
Messages
56
Reaction score
58
Points
80
Location
Zoetermeer, Netherlands
Local Time
Today, 11:23
Website
kilianvalkhof.com
Credits
206
Pronouns
he/him

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 11:23
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski

kilian

Member
Gold Member
Joined
Oct 7, 2019
Messages
56
Reaction score
58
Points
80
Location
Zoetermeer, Netherlands
Local Time
Today, 11:23
Website
kilianvalkhof.com
Credits
206
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.
 
  • Like
Reactions: Adam and Gummibeer

Gummibeer

Astroneer
Joined
Oct 5, 2019
Messages
1,060
Reaction score
889
Points
985
Age
27
Location
Hamburg, Germany
Local Time
Today, 11:23
Website
gummibeer.de
Credits
2,036
Real Name
Tom Witkowski
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!
 
  • Love
Reactions: kilian
Top