You’re reading an article at 6:00 PM. The sun dips below the horizon, and suddenly, your screen violently shifts from a dark, moody aesthetic to a blinding white light. You didn’t touch anything. The interface just decided to fight you.
This is the dark reality of the three-state dark mode toggle. For years, web designers have been taught that giving users three options—Light, Dark, and System—is the gold standard of accessibility. It feels smart. It feels considerate. It is actually a UX nightmare.
Most designers assume more options are better. But the ‘system’ setting in dark mode toggles is a classic case of feature creep: it adds complexity for marginal benefit. When you defer to the operating system, you aren’t giving users a ‘smart default’—you’re outsourcing your design decisions to an unpredictable black box.
Think about the user who sets their macOS to auto-toggle from Light to Dark at sunset. It’s a neat OS-level trick. But when they land on your website, they are engaging with your interface, not their OS. If your site is set to ‘System’, it will abruptly switch themes mid-scroll. Imagine reading a long-form article or filling out a complex form, and the entire color palette flips on you. It breaks focus, destroys visual orientation, and creates a jarring experience.
The core tension here is the desire for convenience versus the need for clarity. Designers want to be helpful by syncing with the OS, but what seems helpful actually creates a confusing third state that undermines user control. Convenience that hijacks user intent isn’t convenience; it’s a glitch wearing a tuxedo.
If a user wants their entire digital experience to shift at sunset, they can configure their browser to respect the OS setting. But your website shouldn’t be a passive victim of the operating system’s schedule. A two-state toggle—Light or Dark—is sufficient. It provides absolute clarity. When the user picks Dark, they get Dark. When they pick Light, they get Light. There is no ambiguity, no sudden mid-session shifting, and no fighting the interface.
The real value in UI design isn’t found in ‘smart’ defaults that try to guess what the user wants based on the time of day. It’s found in respecting the user’s explicit choice. Respecting the user means accepting their explicit choice, not guessing what they might want when the sun goes down.
Stop adding the ‘System’ option to your dark mode toggles. It’s time to kill the third state, simplify your UI, and give the control back to the person who actually matters: the user.
FAQ
Q: But doesn't the 'System' option respect the user's OS-level preference?
A: No, it hijacks it. The user's OS preference is for their operating system, not necessarily for your specific web app. By forcing a 'System' toggle, you introduce unpredictability where the UI can shift mid-session, breaking the user's focus and visual orientation.
Q: What should I do instead of offering a 'System' toggle?
A: Offer a simple two-state toggle: Light or Dark. Default to the OS preference on the initial load if you must, but once the user interacts with your toggle, lock it to their explicit choice. Give them absolute control.
Q: Is dark mode itself just a fad?
A: No, but the obsession with syncing it to the OS is. Dark mode solves real accessibility and eye-strain issues, but it should be a user-controlled utility, not an automated, time-sensitive light show.