- From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
- Date: Sat, 22 Jun 2019 15:18:25 +0000
- To: public-css-archive@w3.org
One solution for your use case might be custom environment variables (see proposal/discussion in #2627). Since [environment variables](https://drafts.csswg.org/css-env-1/) are associated with the document as a whole, they could be defined to be used inside selectors and other places where a `var(--custom-property)` is invalid (see the inline issues on that spec).
Possible syntax for your case, you would use the `light-or-dark` class in your markup:
```css
/* default values for narrow screens */
@environment --light-selector = .light, .light-or-dark;
@environment --dark-selector = .dark;
@media (min-width: 500px) { /* wider-screen values */
@environment --light-selector = .light;
@environment --dark-selector = .dark, .light-or-dark;
}
env(--light-selector) {
border: 1px solid;
background-color: white;
}
env(--dark-selector) {
border: 1px solid black;
background-color: black;
color: white;
}
```
Again, this is just a proposal: the details & syntax are not confirmed.
--
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4040#issuecomment-504674235 using your GitHub account
Received on Saturday, 22 June 2019 15:18:27 UTC