Get user OS theme

Alexi_Andrzejewski · August 27, 2024, 4:02pm

Hi there,
I was wondering, is there a way to get the OS theme of the client with perspective ? (light, dark)
Thanks ^^

bmusson · August 27, 2024, 4:27pm

You can use the prefers-color-scheme media query in your CSS:

Alexi_Andrzejewski · August 28, 2024, 11:58am

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.

bmusson · August 28, 2024, 12:21pm

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:

github.com

mussonindustrial/pyro/blob/39a842a1153d362c5eea922a4264d1fb79e4443f/packages/pyro-mui-joy/src/joy-auto.css

@import 'common';

@import 'colors/light.css' (prefers-color-scheme: light);
@import 'colors/dark.css' (prefers-color-scheme: dark);

@import 'ia/light' (prefers-color-scheme: light);
@import 'ia/dark' (prefers-color-scheme: dark);

@import 'classes';
@import 'components';
@import 'designer';