Theme switcher proposal

[theetrain]

Currently, the theme toggle indicates when light mode or dark mode is active, but not 'system' or 'auto' user preference.

I propose we switch this to a 3-button switcher: light, dark, system (default). I can contribute this change if it's agreeable.

[Rich-Harris]

It will respect the system preference if you select the mode that matches it (i.e. if your system is in dark mode and you're somehow in light mode, switching to dark mode will then mean that if you later switch the system to light mode the site will also switch to light mode).

If you set the site mode to something other than the system preference, it will persist across system preference changes.

While that's slightly convoluted when you say it out loud, in practice I think it works well. If someone switches their system to a different mode and is annoyed that svelte.dev followed suit, their annoyance will only last as long as it takes them to flip the toggle — thereafter, things will behave as they want.

To me that makes more sense than having a more complex UI, where you either need a dropdown (which is annoying from a design perspective — the edge of the current button lines up with everything else using var(--sk-page-padding-side)!) or a button that cycles through three different options (which is weird by itself) and where one of those transitions appears to have no effect beyond changing the icon on the button (and what's a universally understood icon for 'system preference'?). So at that point we're talking about tooltips, which aren't ideal on mobile, and more complicated code.

I'm open to being outvoted on this and I'd be curious to see successful prior art, but my gut tells me this isn't worth it.

[brunnerh]

Some examples, not sure about how "successful" they are. I suspect that they fall into the "decent enough" category.

YouTube

StackOverflow

GitHub

(Kind of complex, you can choose from different themes that are used for either the light/dark settings of the system or set it one fixed theme.)

---

Given that the automatic theme should work for most people, I don't think clicking twice is too much of a hurdle for the few people that do want to switch to manual. I would go with either a simple dropdown or a small dialog.

The icon also does not need to be able to represent all states if you don't cycle on click, it can just be one icon symbolizing themes in general or one theme.

(Note by the way that SO & GitHub offer separate high contrast modes/themes for extra accessibility.)

[Rich-Harris]

It takes 6 clicks to change the settings in GitHub, 3 in YouTube and Stack Overflow (took me a while to even find the settings there) compared to 1 for us. If we were to add high contrast modes etc then maybe the extra complexity would be worth it.

Our peer websites (React, Vue, Solid) generally have the same UI we do — a toggle — though React and Solid don't respect system preference, while Vue doesn't respect your site preference if it differs from the system preference as soon as the system preference changes to match the site preference.

So I think we're already in a good spot. There are many pressing concerns on the site and I don't think this is one of them to be honest.

[theetrain]

There are many pressing concerns on the site and I don't think this is one of them to be honest.

No problem, we can get to it when we get to it, and I'd be happy to contribute once consensus is reached.

With that said, here's a sample design used at my workplace:

Here we have always-visible buttons, and in two clicks the theme preference can be set and then rarely touched again because the effects are assured (much like GitHub, but with fewer clicks).

My personal issue with the current svelte.dev theme toggle is I could never get the current theme toggle to respect my system preferences, so I need to change it 1-2 times daily. Knowing when it's set to "system" would make my life easier.

With that in mind, here's proposal 1: three buttons (please excuse the low fidelity sketch)

Proposal 2: single button with three states; light, dark, auto/system.

Proposal 3: single button with four states; light, light (following system), dark, dark (following system)

[Rich-Harris]

My personal issue with the current svelte.dev theme toggle is I could never get the current theme toggle to respect my system preferences

Wait really? Then there's a bug somewhere, and that's what we should fix rather than making the UI more complicated

[theetrain]

rather than making the UI more complicated

The only increased complexity is with potentially more representation of state, or more real estate in the case of showing 3 buttons inline (some say that's unclean). Either way, it will improve the user experience because the current theme selection would be more clearly labelled. In the case of 3 buttons, all options are visible and the toggled selection is permanent and clear.

As a side note, we could use child copy instead of aria-label using .visually-hidden CSS for potentially better JAWS support (though that test was made in 2021, so it could be a non-issue today).

If we were to keep it as a single button, could we try proposal 2?

• single button cycling between 3 states: system, light, dark
• 'system' is the default selection until the user makes their preference
• when clicked, the state cycles through system, light, and then dark
• remove aria-pressed (source) since that's reserved for single-labelled toggled buttons that change between a single binary state. The current 'light/dark' states and proposed 'system/light/dark' states both disqualify toggle button use
• Demo: https://svelte.dev/playground/0975bc04a8464faab6cdcbbf9c092a9c?version=5.1.9

[Rich-Harris]

As I say, I don't think it's an improvement in UX, I think it's a downgrade. Let's focus on fixing the bug you're apparently experiencing