Hi there,
I was wondering, is there a way to get the OS theme of the client with perspective ? (light, dark)
Thanks ^^
You can use the prefers-color-scheme
media query in your CSS:
Thanks for your answer,
The goal is actually having a binding to the system.props.theme linked to the default OS theme.
Controlled by this type of dropdown :
While I could use prefers-color-scheme
with javascript, I'm not sure it is the intended way by Inductive.
You don’t need to use JavaScript; create a new theme “OS Default” that wraps your light theme in:
@media (prefers-color-scheme: light) { … }
and wraps your dark theme in:
@media (prefers-color-scheme: dark) { … }
If you’re using custom properties to define your themes colors, you only need to wrap your custom property definitions (that way the auto
theme isn’t 2x the file size).
Here’s how we do it in our pyro-mui-joy
theme:
2 Likes