specification for embedding a dark/bright-mode toggle-switch into websites

[D4n2021]

Introduction

In the past year, I (and probably everyone else too) stumbled across more and more websites (news websites for example) that automatically render in darkmode when the OS (example: Windows) user-setting is set to dark mode and the browser-dark-mode-preference is set to "automatic" instead of bright or dark. We have to assume however that there also is a large group of users surfing the web that only would like their Windows OS and browser-settings menus to appear in a dark design (example: Firefox) while displaying most websites in the normal bright (white) reading mode. (for the other way around, even browser-addons like "dark reader" already exist, but this is regarding displaying websites that do not depend on a preference to display in dark).

I was looking for a W3 specification regarding recommending web-developers to embed a dark/bright-mode toggle switch into the top right corner into their websites but I could not find any.

We can not expect from web-developers to also create "bright mode"-browser-addons, as those would massively conflict with usage of "dark reader"-addons to my knowledge, if users have both types of addons installed (which would be in a desperate attempt to overwrite website-preferences, obviously).

Use Cases

If user has set OS (example: Windows) to dark mode and browser display-mode preference (if applicable) to "automatic", but user prefers to manually display specific websites in bright mode and save that setting via a website cookie. Many many websites do not include such a dark/bright/device-setting toggle-switch yet.

Proposed Solution

A W3 specification recommending web-developers to embed a dark/bright-mode toggle-switch into the top right corner into their websites and save the state in a cookie (or also maybe mention top left corner instead, if the switch does not fit to the top right corner in their website-design? This part of the proposal would need to be discussed)

Example

www.YouTube.com has a dark/bright switch already for a very very long time now, which is saved across browser sessions (in a browser-cookie, I assume)

Privacy & Security Considerations

"No considerable privacy or security concerns are expected, but we welcome community feedback."*

Let’s Discuss (Optional)

In my opinion it does not make sense to expect from web-developers to also create "bright mode"-browser-addons, as those would massively conflict with usage of "dark reader"-addons to my knowledge, if users have both types of addons installed (which would be in a desperate attempt to overwrite website-preferences). Correct?

[marcoscaceres]

This seems to have some overlap with #117 ... however, this doesn't propose a feature, but rather authoring (web developer) requirements?

[HaTheo]

It is advisable for authors to honor the prefers-color-scheme setting, which is conveyed to the browser by the user agent. While I hesitate to suggest that a W3 working group explicitly dictate the placement of a toggle, I can envision scenarios where specific design systems—such as those developed by Google(Material) or Microsoft(Fluent)—might address this matter.

[mgifford]

Just wanted to put up a link to the FluidUI project https://fluidproject.org/projects which handles this quite well. 

As much as browsers can handle much of this, I do think it is useful to have the buttons as users often forget or never knew they could set their preferences. 

Just like the text size, browsers can do it, but ultimately users probably haven't memorized the Control-+ key strokes to adjust the size.

[D4n2021]

So you would want a draft to ask webdevelopers to embed FluidUI into their websites, right?

[D4n2021]

@mgifford Do you want to reply to my previous post? Also, even the official Brussels website already has such button on the right side. https://www.brussels.be/