# Perspective Component Detect Theme Change

**URL:** <https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [June 10, 2025, 5:16pm UTC](https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242 "2025-06-10T17:16:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cody.tamaki](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cody.tamaki](https://forum.inductiveautomation.com/u/cody.tamaki)\
**Post date:** [June 10, 2025, 5:16pm UTC](https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242/1 "2025-06-10T17:16:30Z")

</div>

I need to programatically set the theme on a component I'm currently working on, and was wondering the best way to detect it? I was trying the code below

```python
    const [theme, setTheme] = useState(store.props.read("session.props.theme"));
    useEffect(() => {
        const unsubscribe = store.props.subscribe((store) => {
            setTheme(store.read("theme"));
        });
        // Cleanup subscription on component unmount
        return () => {
            unsubscribe();
        };
    }, [store]);

```

---

<div class="post-metadata">

**Author:** ![cody.tamaki](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cody.tamaki](https://forum.inductiveautomation.com/u/cody.tamaki)\
**Post date:** [June 12, 2025, 5:17pm UTC](https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242/2 "2025-06-12T17:17:36Z")

</div>

Bumping this - is there a good way to subscribe to this variable?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [June 12, 2025, 6:29pm UTC](https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242/3 "2025-06-12T18:29:24Z")

</div>

Perspective/component development isn't my forte, but subscribing to the state of the theme seems like potentially an antipattern - shouldn't the theme be delivering whatever style information your components are using?

That aside, what you're doing seems fine?

---

<div class="post-metadata">

**Author:** ![cody.tamaki](https://avatars.discourse-cdn.com/v4/letter/c/b487fb/32.png) [@cody.tamaki](https://forum.inductiveautomation.com/u/cody.tamaki)\
**Post date:** [June 12, 2025, 6:34pm UTC](https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242/4 "2025-06-12T18:34:07Z")

</div>

Yeah I guess my problem is that my component isn't noticing the theme/css updates and I have to force it to update (underlying tool isn't a native react component so I have to call a repaint() to get it to update sometimes).

My code above doesn't seem to be working sadly. I'm getting undefined for the theme, so not sure if I have the path wrong or what I need to do there.

---

<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:** [June 12, 2025, 10:35pm UTC](https://forum.inductiveautomation.com/t/perspective-component-detect-theme-change/107242/5 "2025-06-12T22:35:32Z")

</div>

You should be accessing the session properties from the tree attached to the `PageStore`:

```js
props.store.clientStore?.page?.sessionProps?.subscribe((tree) =>
  console.log(tree.read('theme'))
)

```