Post

Three values of course: ☀️, 🌙 and 🤡

Ah, I should've read the replies before commenting! I didn't think about things like the OS naturally changing based on time of day. I think context matters a lot; if it's something like a blog, I still don't think it really solves a big problem. But I can see the value for apps with power users.

I change system color scheme several times per day, depending on light conditions in my office (sunlight shining through window or not) or whether I'm working outside or inside.

My system theme changes with sunrise/sunset daily. I also enjoy working from a variety of locations, and will manually switch to system light mode in bright/sunny places and system dark mode in dimmer settings. That said, I always want everything to match system theme and prefer 0 manual overrides

No you are not alone! Three options feels right but in practice it confuses the general user. Binary -> light dark vs Trinary -> light dark system. It's a little too much of a leap when your attention is focused elsewhere

To verify an assumption / get more data: I guess you have your OS set up to _not_ to automatically switch from light to dark depending on the time of day?

Good discussion. For me, the explicit is always the winner. So, three options: system, light, dark. An example: pawelgrzybek.com For me the problem with 2 options is precisely the ambiguity you're asking about. The user intention may not necessarily align with your logic.

3 values but default should always be system It infuriates me how often the default is light/dark

This is the same approach I use and I feel similarly!

Dark, Light, System for sure. I toggle my OS preference a bunch on both my phone and desktop, depending on whether I'm outside or inside. I want some websites to follow that switch, some others I always want in a specific dark or light mode (not all themes are created equally).

Always 3 values: System, Light, or Dark and always with system being the default I always want users to be able to switch back to default when the selected one of the 2 manual values

Three values - auto(system), light and dark.

Thinking about this some more. System makes sense to reset the state. To me it feels strange that it’s part of the dropdown. If you’re offering more themes the user should be able to select a single theme. However when choosing “system” the user should be able to choose a day _and_ a night theme.

this is a great writeup!

What a wild concept

One thing I see more than I'd like is two values and none of them are system it just defaults to a value and you can toggle it but never have it obey system. This is very silly.

To show the current state: Auto=active in system mode Light=active when in light mode (automatically / manually selected) Dark=active when in dark mode (automatically / manually selected)

Literally implemented this the last couple of days. Light * system * dark J

three if you SSR, since you need an explicit 'system' state to avoid a flash before prefers-color-scheme resolves client-side. two is fine for pure client-rendered, just read matchMedia once. syncing multiple open tabs when the OS setting flips mid-session is the annoying part either way.

Always three values. Two values don't give me a clear way to reset my choice to auto (follow the system). Especially if one of them is mapped to the system. All my UIs are following the system scheme that changes depending on the time of the day. And I avoid using apps that don't respect my choice.

None if possible. Consistency with then system is more important to me. Also less options is less interactive surface areas is less opinions is less bugs is less ... Otherwise, two values where one is clearly labeled as system default

I do two values, but selecting the value that matches your current system themes means you want to follow the system. github.com/mxdvl/mxdvl/...

I had three - system, light, dark - along with 6 different 'colour themes' (using color-mix, etc) … then I removed it all for a simpler life :lolsob:

Three. Default is system.

If you're asking what happens when the OS changes from light to dark but the user specifically wants to keep a particular site on dark no matter what, the answer is I don't. I do a light/dark instead. But I do believe this is important and I'm working on something for this. standard.mode.place

My stupid answer is that I like 3. I always want everything site/app to match system theme, but occasionally I’m curious about what the other theme looks like and manually switch it to check. Then I want to go back to system theme matching. 🙃

We typically show 5 at ngrok: system, dark, light, dark high contrast, light high contrast.

But it depends on context - if it’s an app that would be expected to be used on a regular basis (unlike a site you would sometimes visit) I would probably have three options along with more customization options

It totally depends on the app! For complex apps with long sessions, 3 options (System/Light/Dark) give the best UX, even if they're hidden in a settings menu. But for short session sites like blogs or docs, a simple 2 option toggle right on the main UI is better for instant switching.

Well, coming from the post "The best dark mode toggle is probably none", that API doesn't feel quite like the right tool for the job 😅 lea.verou.me/blog/2026/da...

Theme switching base on my system preference is confusing to me, I might need the dark interface for the system but browse the web in light mode, or vice versa.

bsky.app/profile/lea....

None. If all programs follow system and don’t have toggles, why should websites have toggles? For the three users who have a different mode per website? They can use a certain browser extension 😉

Fair, but as I commented in another thread I cannot guarantee that their choice will be respected as their cookies or local storage get cleared after a week of not visiting, and I have very few sporadic visitors! I also struggle to meaningfully dinstinguish between two identically visual states

Indeed, I wish I had more visitors that provided me feedback, but this works for me and I’m an auto-switcher. That being said if they do not visit my site for over a week their local storage is likely to be cleared anyways so I cannot guarantee their preference is actually saved for the long run.

I would go with 4 modes the 4th being green why is green mode never an option? 🐸

Three on CodePen. We offer System, Light or Dark in the Editor Settings. It seems like the right choice to let users be explicit about which specific color scheme they want, especially for a code editor.

3 values; like people said: sometimes you want it to follow your OS transition.

In terms of opinion. Well, more reasoning. I want to make it clear to the user that I respect their OS-level choice by default, but then allow them to override it if they prefer dark or light for _my_ particular website.

Three, defaulting to system.

two: sync with system and opposite of current system (disguised as light/dark)

Because my opinion might not be the right one, so I’m looking for extra data.

My preference is 1. system, 2. forced light, 3. forced dark

Love to hear different opinions ofcourse !

Three values (and hidden in settings, not in the header)

No values and follow the system, or three values. (Or an indeterminate amount once theming goes beyond light/dark only. Where's my prefers: hot-dog-stand)

I vote for three. With two, I have no idea what to do if the OS gets switched mid-session :)