# Get user OS theme

**URL:** <https://forum.inductiveautomation.com/t/get-user-os-theme/95219>\
**Category:** Ignition\
**Tags:** perspective, scripting\
**Created:** [August 27, 2024, 4:02pm UTC](https://forum.inductiveautomation.com/t/get-user-os-theme/95219 "2024-08-27T16:02:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexi\_Andrzejewski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alexi_andrzejewski/32/65032_2.png) [@Alexi\_Andrzejewski](https://forum.inductiveautomation.com/u/Alexi_Andrzejewski)\
**Post date:** [August 27, 2024, 4:02pm UTC](https://forum.inductiveautomation.com/t/get-user-os-theme/95219/1 "2024-08-27T16:02:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 27, 2024, 4:27pm UTC](https://forum.inductiveautomation.com/t/get-user-os-theme/95219/2 "2024-08-27T16:27:56Z")

</div>

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

> **[prefers-color-scheme - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)**
>
> The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
> A user indicates their preference through an operating system setting (e.g. light or dark mode) or a user agent setting.

---

<div class="post-metadata">

**Author:** ![Alexi\_Andrzejewski](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alexi_andrzejewski/32/65032_2.png) [@Alexi\_Andrzejewski](https://forum.inductiveautomation.com/u/Alexi_Andrzejewski)\
**Post date:** [August 28, 2024, 11:58am UTC](https://forum.inductiveautomation.com/t/get-user-os-theme/95219/3 "2024-08-28T11:58:28Z")

</div>

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 :  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd15a984ceb9c4496aa82a7f3d35179a3772b25b.png)  
While I could use `prefers-color-scheme` with javascript, I'm not sure it is the intended way by Inductive.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [August 28, 2024, 12:21pm UTC](https://forum.inductiveautomation.com/t/get-user-os-theme/95219/4 "2024-08-28T12:21:47Z")

</div>

You don’t need to use JavaScript; create a new theme “OS Default” that wraps your light theme in:

```css
@media (prefers-color-scheme: light) { … }

```

and wraps your dark theme in:

```css
@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:

> <https://github.com/mussonindustrial/pyro/blob/39a842a1153d362c5eea922a4264d1fb79e4443f/packages/pyro-mui-joy/src/joy-auto.css>