# Setting theme in the context of Page/Session Startup

**URL:** <https://forum.inductiveautomation.com/t/setting-theme-in-the-context-of-page-session-startup/86366>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [February 26, 2024, 3:49pm UTC](https://forum.inductiveautomation.com/t/setting-theme-in-the-context-of-page-session-startup/86366 "2024-02-26T15:49:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![scott.stamps](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@scott.stamps](https://forum.inductiveautomation.com/u/scott.stamps)\
**Post date:** [February 26, 2024, 3:49pm UTC](https://forum.inductiveautomation.com/t/setting-theme-in-the-context-of-page-session-startup/86366/1 "2024-02-26T15:49:59Z")

</div>

We are interested in having the ability to set the session theme from within the page or session startup events - from a value passed in as a query string parameter.

A couple of approaches tried so far:

1. Using the `onPageStartup()` event  
This appears to partially work, requiring a page reload/refresh in order for the most recent theme to be set. It feels as if the theme application has already happened by the time onPageStartup() is fired.

- Steps:  
a) Navigate to [https://my-gateway:8043/data/perspective/client/my-project?theme=dark](https://my-gateway:8043/data/perspective/client/my-project?theme=dark). The page loads but the default theme (light) is still in place  
b) Reload/refresh browser  
c) Dark theme is applied

1. Using the Session `onStartup()` event  
This absolutely works, but there doesn't seem to be a method of accessing the query string parameters at the session level. If there is, please advise.

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [February 26, 2024, 5:58pm UTC](https://forum.inductiveautomation.com/t/setting-theme-in-the-context-of-page-session-startup/86366/2 "2024-02-26T17:58:34Z")

</div>

So what would happen if you were to open two URLs, one with [https://my-gateway:8043/data/perspective/client/my-project?theme=dark](https://my-gateway:8043/data/perspective/client/my-project?theme=dark) and the other with [https://my-gateway:8043/data/perspective/client/my-other-project?theme=light](https://my-gateway:8043/data/perspective/client/my-other-project?theme=light) from two different pages? Or even the same project, just in two tabs?

The theme property is set for the session, so passing it in the URL almost doesn't make any sense (I'm sure you have a good use case). In other words, if you have 10 browser tabs open and one of the tabs fetches the above URL, then the rest of the pages that have the same project open will switch themes in the background (it might only show up after a page refresh).

What I've seen done in the past is a project-wide theme selector in a navigation menu, that way you can set the theme for a specific project or a specific user (from the runtime).

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [February 26, 2024, 6:41pm UTC](https://forum.inductiveautomation.com/t/setting-theme-in-the-context-of-page-session-startup/86366/3 "2024-02-26T18:41:49Z")

</div>

There's not a good way to manage this prop at the start of the session.

A not-terrible but not-great way to manage this:  
`https://my-gateway:8043/data/perspective/client/my-project/themepage/dark`  
Note that this is a page resource (or you could make a page which accepts a param). but it is not the main landing page of the project. You would also need a custom session property which acts as a flag so that the theme isn't reset the page is accessed after a potential user interaction which has already modified the theme to something else (something like `session.custom.themeAlreadySet`, where the value in the Designer is `false`). In your PageStartup script, compare the page path to see if it contains "themepage". If so, then set the theme to the last part of the path AND set the custom prop flag so that future visits in this session don't reset the theme.
