Using :root condition instead of @-rules (eg. @media) for theming
#1126
wereHamster
started this conversation in
General
Replies: 1 comment
-
|
This is a common ask, but I suggest relying on Set the following CSS somewhere outside StyleX: :root {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}Now, just use the const styles = stylex.create({
root: {
color: "light-dark(red, blue)",
},
});There are other solutions as well, such as using Themes, but this is the recommended solution. Outside of this, there is already a long-standing discussion about descendent/sibling selectors which should be added eventually, but I don't see us adding anything for |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
I started a discussion in the stylex-swc-plugin repo, but that behavior is consistent with the official stylex plugin, so I guess I should ask here as well.
Dwlad90/stylex-swc-plugin#488
The TLDR is that the following will not apply
color: bluestyle to the element (when<html>element has adata-theme="dark"attribute).It produces this CSS:
Here's a repo with a minimal reproduction: https://github.com/wereHamster/stylex-root-condition
npx rollup -c rollup.config.jsnpx serveBeta Was this translation helpful? Give feedback.
All reactions