Apart from `light` and `dark`, add a `system` option

[filiptronicek]

Is there any way (currently) or are there any plans on adding a system theme option that would just reflect the system and not override it? Or do I have to somehow make a custom one that clears the localStorage?

[tomayac]

If you never touch the toggle, it uses what the system says.

[filiptronicek]

@tomayac yes, I'm aware of that, but if I (as a random user) once accidentally touch the toggle, I can never go back (I have no idea how to clear local storage). Is that supposed to work like that? I think there could be a better solution.

[tomayac]

If the toggle doesn't have the permanent attribute, the site will reset to the system default.

Let's assume the system preference is light mode.

<dark-mode-toggle>:

• Toggle dark mode.
• Reload.
• Mode is light again.

<dark-mode-toggle permanent>:

• Toggle dark mode.
• Reload.
• Mode is dark again.

[tomayac]

(It's up to the site owner to choose if they set the permanent attribute. Personally, I do on my blog.)

[vapier]

this is just bad UX. interacting with UI that cannot be undone, and practically speaking, is not recoverable for users, is bad design. a pretty fundamental key UI principle is that actions be easy reversible which this violates.

it's not like Google doesn't know how to write this behavior. some of its properties have a tristate theme selector.

[tomayac]

I changed my mind and now do think we should have at least an option to have a three-way toggle. Is anyone on this thread happy to work on a PR that adds such a feature?

[tomayac]

Functionality-wise, the "system" option would just need to delete the localStorage entry. The actual work would more need to focus on how to expose this UI wise. Some of the properties need rethinking, and the HTML structure, too. The appearance toggle means there's just one visible thing to click at a time that cycles through the possible states, and the switch means all possible states are visible at the same time and clickable.

[vapier]

for me, the most time consuming part is the graphics, not the underlying logic. do we have an icon ready-to-go here ?

[tomayac]

I have seen sites use a slash icon like this.