Re: [csswg-drafts] [selectors][mediaqueries] :media() pseudo-class as a shortcut for one-off media queries (#6247)

My use case is "to provide the user a way to override the system setting for light/dark mode".
e.g. as a user, I want to set a dark/light mode on a per-website basis and not change my system settings.

typically that is nowadays implemented in a way that sets an attribute on the body like `<body theme="dark">` or `<body theme="light">`.

However, that means that in this case media queries like `@media (prefers-color-scheme: dark) {` do become "hostile" because as soon as they are used somewhere I will be forced to "override" it back.

So not only do I need to duplicate the dark mode styles but also the light mode styles 😭

It will look something like this
Codepen: https://codepen.io/daKmoR/pen/WNMZpMm
```css
/* light mode is default */
:root {
  --p-color: black;
  --p-background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark mode rules */
    --p-color: white;
    --p-background: black;
  }
}

:root[theme=light] {
  /* override back to light mode - duplicating  */
  --p-color: black;
  --p-background: white;
}

:root[theme=dark] {
  /* duplicated dark mode rules */
  --p-color: white;
  --p-background: black;
}

p {
  color: var(--p-color);
  background: var(--p-background);
}
```

## shadow root

In the above example, if someone uses a media query in a CSS file you can at least "solve" it by adding more duplicate CSS. 

However, once you have a shadow root it means you can no longer solve it on CSS level 😭

Consider this code in a shadow root
Codepen: https://codepen.io/daKmoR/pen/jOZGBgO

```html
  <style>
    :host {
      --p-color: black;
      --p-background: white;
    }
    @media (prefers-color-scheme: dark) {
     :host {
      /* dark mode rules */
        --p-color: white;
        --p-background: black;
      }
    }
    p {
      color: var(--p-color);
      background: var(--p-background);
    }
    /* no way to override it based on the fakeroot theme */
    /* selectors like body[theme=light]" will not select anything */   
  </style>  
  <p>text in shadow root</p>
```

within the shadow root there is no way to adjust the color based on a bodys attribute as far as I know.
outside of the shadow root you can not influence the css of the inside...

also imagine that this component with the shadow root is potentially an external dependency either from open source or from a different team/department.

### Workaround

The only why I can think 😅

1. Duplicate the theme attribute to EVERY component 
  ```html
  <body theme="dark">
    <my-el theme="dark"></my-el>
    <other-el theme="dark"></other-el>
  </body>
  ```  

2. Enfore a company wide "ban" on using `@media (prefers-color-scheme: dark)` and on any external dependency using it

With that you can then ALWAYS force using the theme attribute 
```css
:host([theme=dark]) {
  /* dark theme styles */
}
```

Imho these are massive downsides and basically prevent usage of a core platform feature like media queries.

## Suggestion

Provide a way to set a "user prefers color scheme". Something that can be set via js.

```js
document.userPrefersColorScheme = 'dark';
```
and then all media queries like `@media (prefers-color-scheme: dark) {` would be true.

That would mean you can use media queries in all cases and no duplication in any css would be needed.

A see that this is a completely different "solution"... is there already an issue for a solution in this direction or shall I open a new one?

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


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

Received on Tuesday, 24 May 2022 07:52:04 UTC