Docs: Option to use system preference for light/dark theme

[JoshuaKGoldberg]

Docs page(s)

all of them

What documentation issue do you want to solve?

The ESLint docs currently default to the browser's prefers-color-scheme setting for light/dark mode by default. And they have a Light/Dark selector to let the user specify an override.

But, there's no way to remove the override: i.e. go back to the default behavior of using the browser/system preference. This feels like a bug / missing feature to me: what if the user wants go back to the system preference?

I've hit this where I've needed to change the page temporarily, but subsequently wanted to go back to synced with the browser/system preferences.

What do you think is the correct solution?

A few UI options come to mind, in order of what I think is most intuitive & usable first:

• Adding a third button like System to the existing Light/Dark selector
• Adding a dismiss/x button to clear the current state
• Have pressing the button again dismiss the current state

The current selector, for reference:

Participation

• I am willing to submit a pull request for this change.

Additional comments

Sibling issue to #18189.

[kecrily]

I like the third button. It does seem more common too.

[Rec0iL99]

ping @eslint/eslint-team

[Tanujkanti4441]

i think we can just click on the light/dark button to match it with the system preference.

[nzakas]

I'd like to see some examples of how other sites are doing this before coming to a conclusion here. @JoshuaKGoldberg can you compile a few sites that have implemented something along the lines of what you're describing so we can evaluate?

[JoshuaKGoldberg]

A few popular sites that have options on all pages, rather than in profile settings...

Site	Style	Visual
Astro	Dropdown
MDN	Dropdown
Netlify	Dropdown
Next.js	Buttons
Solid (Beta)	Dropdown
TypeScript	Dropdown
Vercel	Buttons

[nzakas]

Nice, thanks! Given those, I think adding a third button with a monitor that says "System" probably makes the most sense for us.

I'm also not opposed to making the "Light", "Dark", and "System" as aria-labels that are visually hidden to save space.