Theme Toggle Button

Ignition
1

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

image

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.

	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…

2

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

1 Like
3 
    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)
3 Likes
4

Duh! I knew it was something simple.

Thanks!