Open ntjess opened 1 month ago
Hi Nathan,
Is this specific to body? Because we do not have a good way to style that yet based on the dark/light theme. If so, we should see if we can find a way (e.g. adding a data-theme=dark data attribute, or add theme--light/dark to the body CSS classes).
If it's only for child components, you can use this solution
which is, adding a class 'my-own-background', and the css:
.theme--light .my-own-background {
background-color: #fcc;
}
.theme--dark .my-own-background {
background-color: #400;
}
Let us know if your problem is solved with this.
Regards,
Maarten
Consider a case where css rules apply styling to a page's
body
HTML element:In this case, when the app is in dark mode, the background is white (potentially relating to #532):
Ideally, one could also add to the body
background-color: var(--theme-background)
or something similar to prevent this issue. However, since the active theme doesn't save it's foreground/background colors to css variables, this proves difficult in practice.What is the recommended best approach?