Re: [csswg-drafts] [mediaqueries-5] Script control of (prefers-*) queries (#6517)

oh I somehow missed this issue before 🙈

made a comment on a related chromium bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1046660#c46

which guided be back here... (I searched here before - I swear 🙈)

let me copy it in here

> Should we expand this issue to also talk about a JavaScript API for setting a "per website preference toggleable on the website itself".
>
> Some ideas are for something in the spirit of `window.setMedia('prefers-color-scheme', 'dark');`
>
> 1. Blog post which problem such a setting would solve https://www.bram.us/2022/05/25/dark-mode-toggles-should-be-a-browser-feature/
> 2. Issue reply with `:media()` is not solving this use case https://github.com/w3c/csswg-drafts/issues/6247#issuecomment-1135531723
>
> And to give it some "weight" and backstory I am from the Design System Team from the ING Bank and we struggle to scale dark mode for our design system based on a shared attribute compared to "just" using a `@media (prefers-color-scheme: dark) {`
>
> Why? Because aligning different teams in different countries with different knowledge and requirements around web standards is "pretty" straight forward... but aligning a custom attribute (where everyone may have a different idea on where to put it, how to name it) is hard.
>
> PS: if this is not the right place - any pointers?

so it seems here a more appropriate place? 😬

the ideas "sketched out "in both of these links in the quote are very similar to `CSS.customMedias.set("prefers-color-scheme", ...);`

any way we can help? maybe there is more details needed for the problem space it would solve? I think for the API - there is nothing more to it?

I sort of think that this is all you would need to get a fully custom dark mode that persists while reloading or navigating ... which is like soooo much less than all the other (attribute) workarounds 😅

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dark Mode Switch Example (localstorage for persistence)</title>
    <script>
      const appColorScheme = localStorage.getItem('my-app-color-scheme');
      // restore saved custom color scheme if set
      if (appColorScheme) {
        CSS.customMedias.set('prefers-color-scheme', appColorScheme);
      }
      function changeColorScheme(colorScheme) {
        localStorage.setItem('my-app-color-scheme', colorScheme);
        CSS.customMedias.set('prefers-color-scheme', colorScheme);
      }
    </script>
    <style>
      /* light mode is default */
      p {
        color: black;
        background: white;
      }
      @media (prefers-color-scheme: dark) {
        /* dark mode rules */
        p {
          color: white;
          background: black;
        }
      }
    </style>
  </head>
  <body>
    <p>some text</p>

    <hr />
    <p>Light/Dark preference will be stored for reloads/page navigation</p>
    <button onclick="changeColorScheme('light')">go light</button>
    <button onclick="changeColorScheme('dark')">go dark</button>
  </body>
</html>
```


-- 
GitHub Notification of comment by daKmoR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6517#issuecomment-1140301242 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 28 May 2022 17:24:45 UTC