Thinking about dark/light mode pickers that have three options: Auto/Dark/Light.
If the default is “Auto” — in what scenario might someone want to move away from Auto (which would visually be a noop to the same theme?)
Zach Leatherman 3838 replies 1010 likes11 repost Original on Bluesky38 replies
I like my OS to be in light mode but some websites in dark mode
yeah, for sure. Would you ever swap a site to use Light mode instead of Auto in the chooser though?
Oh. i see what you mean now, I don’t think I would care tbh.
To check out the dark and light mode of the website and maybe stick to one of them. They're often not created equally.
To be clear, I mean: if Light was your (Auto) system preference, would you ever select Light in the chooser?
Ah, sorry, that's different. Hm! Not if there is an auto (match system setting) option, I wouldn't need it. I don't know if this case is relevant to your question, but my system preference is Light mode during the day and Night mode at night and for that I might still need the button.
if the website's dark mode is butt ugly 👹
I explained it bad bsky.app/profile/zach...
ah, in that specific scenario no i wouldn't bother
i guess i don't understand what you're getting at though? like are you wondering why even show the option to set the website color scheme to the system one?
I’m curious if the third option is superfluous or necessary (for some scenario I’m not thinking of)
i have all my devices set to change their color scheme at sunrise/sunset so losing the third option would be annoying
might be a pretty niche edge case though, i'm not sure how big the intersection of "uses color scheme based on time-of-day" and "overrides color schemes on websites" is
Are you asking for situations where a user might manually specify whichever theme is already their system default?
If so: I know some people have their OS set to light during the day and dark at night. So they might want to opt into a permanent theme for a specific site regardless of time of day.
that makes sense! I used to use the time of day swap too
- Browser color pref doesn't match system color pref (naive anti-tracking config)
- You have a bad Dark/Light theme, so I have to move away from my color pref
- Don't have auto-color pref change for Day/Night cycle on OS, so you want a different theme depending on time of dayI explained it poorly, but I meant this: bsky.app/profile/zach...
I’m confused, I interpret ‘auto’ as ‘changing automatically based on whether the sun is up’ but I would expect that only as an OS setting. I expect applications to offer options light/dark/system (as in fallback to OS setting).
yeah, I’m not sure most folks would understand the practical distinction between those options. Developers, sure.
It’s been like that in macOS for a while? But indeed, in iOS they simplified/dumbed it down to:
I think in a web GUI you can treat selecting the “system” setting analogous to how macOS treats the “automatic” (day/night) setting.
Auto would just mean always adhering to the users OS preferences. So if it did automatically change based on time of day, it would respect that. Or if they’re like me and it’s always dark, it would always adhere to my preference even though it doesn’t change.
I may be a particular type of weird, but I do do this! I often set appearance to explicitly dark in apps/websites even if my system setting is dark. No real justification it just makes me feel better bc it convinces me less things can go wrong.
I get the question.
It's just soooooo much simpler code-wise with CSS color-scheme to leave all three options in - otherwise you've got to start doing a load of media queries and event listeners and all that jazz.
wait is this a UX versus DX question
Apparently for me, yes 😅
Based on the way I like to do it, you leave it in auto (color-scheme: light dark;), offer light (color-scheme: light;) or dark (color-scheme: dark;) and if you've used light-dark() on all the colors in the CSS, that's it, you're done.
Otherwise you have to test the current
OS setting, and then set color-scheme to be light or dark based on that, and set up your toggle to match, and keep an event listener on window.matchMedia() and make sure to flip it when the user flip it, UNLESS they've picked a theme manually, and then don't flip it...
My current main website does
work like that, but I think I prefer the simplicity and clarity of always showing the 3 options. That's how I've done any personal projects since then.
Anyway I'm both a n00b to big prod projects while also very opinionated about this particular thing, lol. So not sure how seriously to take myself!
I know at least one person IRL who prefers a dark theme for their OS, but doesn't like reading white text on black background in long form.
I do this with the Azure portal on one of my directory/subscriptions. My system and Azure portal are in dark mode but for my production directory/subscription I force it to light mode as a reminder this is production.
-
That’s what I’m curious about, yeah!
Feedback I've heard is people want to set to one of these sometimes regardless of what the OS setting is.
If you have an auto setting, I feel like auto should be the default, and you should let people 'override' via using the other two settings. Like - "I use AM light mode / PM dark mode in a bunch of places but I just don't want it in this app, please stick to light mode 24/7"
Sometimes when my phone is in dark mode I will switch the website to light mode for reading (docs, article, etc).
(I have astigmatism and can't read chunks of text in dark mode)
I see it as an option for when you're one someone else's system lol, some people stare into that light. Also if I'm logged in I expect it to save my preference to my acct but some sites don't (like youtube)
