# Theme Toggle Button

**URL:** <https://forum.inductiveautomation.com/t/theme-toggle-button/38180>\
**Category:** Ignition\
**Created:** [August 28, 2020, 8:23pm UTC](https://forum.inductiveautomation.com/t/theme-toggle-button/38180 "2020-08-28T20:23:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [August 28, 2020, 8:23pm UTC](https://forum.inductiveautomation.com/t/theme-toggle-button/38180/1 "2020-08-28T20:23:50Z")

</div>

I am trying to implement a simple light/dark theme toggle in 8.0.16.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/2/92cfefc6cc4619fe14f4837b0067779305bb9fbb.png)

sun/moon icon depending on the theme being light or dark. I thought this would be simple as I was binding to session.props.theme, but the problem when I call system.perspective.setTheme(‘dark’) the session prop does not update, therefore my “toggle” still thinks its the light theme and cannot toggle back to dark.

```auto
	if self.session.props.theme == 'light':
		system.perspective.setTheme('dark')
		self.props.path = 'fa/sun'
	else:
		system.perspective.setTheme('light')
		self.props.path = 'fa/moon'

```

I feel like I am missing something very simple here…

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [August 30, 2020, 4:26pm UTC](https://forum.inductiveautomation.com/t/theme-toggle-button/38180/2 "2020-08-30T16:26:14Z")

</div>

Actually never used the setTheme function so there may be benefits I’m unaware of

However you can just write directly to that session prop instead of using that function.

EDIT:  
Reading the documentation shows that the function only changes it for the current page, not the session. To change it for the session write directly to the session.theme prop  
[https://docs.inductiveautomation.com/display/DOC80/system.perspective.setTheme](https://docs.inductiveautomation.com/display/DOC80/system.perspective.setTheme)

---

<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:** [August 31, 2020, 5:12am UTC](https://forum.inductiveautomation.com/t/theme-toggle-button/38180/3 "2020-08-31T05:12:02Z")

</div>

```auto
    theme_switch = {
        'light': 'dark',
        'dark': 'light'   
    }
    icon_switch = {
        'light': 'fa/moon'
        'dark': 'fa/sun'
    }
    # default to light if current theme not in theme_switch object
    new_theme = theme_switch.get(self.session.props.theme, 'light')
    self.session.props.theme = new_theme
    # you should also supply a default icon in case your icon_switch object is missing the new theme.
    self.props.path = icon_switch.get(new_theme)

```

---

<div class="post-metadata">

**Author:** ![ryanjmclaughlin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryanjmclaughlin/32/4318_2.png) [@ryanjmclaughlin](https://forum.inductiveautomation.com/u/ryanjmclaughlin)\
**Post date:** [August 31, 2020, 5:12pm UTC](https://forum.inductiveautomation.com/t/theme-toggle-button/38180/4 "2020-08-31T17:12:20Z")

</div>

> [@kgamble](#):
>
> However you can just write directly to that session prop instead of using that function.

Duh! I knew it was something simple.

Thanks!