Theme Toggle Button

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


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':
		self.props.path = 'fa/sun'
		self.props.path = 'fa/moon'

I feel like I am missing something very simple here…

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.

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

1 Like
    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)

Duh! I knew it was something simple.