# Change theme using toggle button **URL:** \ **Category:** Ignition\ **Tags:** perspective, scripting\ **Created:** [February 16, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827 "2024-02-16T12:15:24Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Soham\_Ambekar](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Soham\_Ambekar](https://forum.inductiveautomation.com/u/Soham_Ambekar)\ **Post date:** [February 16, 2024, 12:15pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/1 "2024-02-16T12:15:24Z")
Hiiii, I am trying to change the theme using a toggle button. I can change it to dark mode but am unable to toggle it back to light mode using the same toggle button. I also want to change the text of the button to "DARK" or "LIGHT" based on the mode it is in. Any suggestions? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [February 16, 2024, 1:18pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/2 "2024-02-16T13:18:56Z")
A single button is the wrong control to use in Perspective as it will cause some confusion. When the button shows "Dark" does that mean it _is_ dark or it will be dark when selected. Also using a button requires a script. ![Light Dark buttons](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/6/16528a84e3e2af201e6118499fa29304fe546fa8.gif) Two buttons makes the purpose and status much more obvious. Here I've bound the `enabled` property to the theme with, `{session.props.theme} = "dark"` for the Light button and `{session.props.theme} = "light"` for the Dark button. The event onActionPerformed scripts are, ` self.session.props.theme = "light"` etc. With the icons on the buttons you can now omit the labels. Tip: I wouldn't use all-caps for your buttons on a HMI. I think it looks a bit crass and you won't find it as standard GUI on many professionally designed applications or web pages. * * * Other ways of doing this: Using a Radio Group or Dropdown component allows you to assign "light" or "dark" to the options so you can do a direct binding without a script. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [February 16, 2024, 1:51pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/3 "2024-02-16T13:51:19Z")
I'd probably use a toggle switch for this. You can add a label if you want both options labeled, or remove labels entirely and use 2 icons to make it tiny. For more than 2 themes, I'd either use a dropdown, or make a small popup with a button for each available theme. edit: or, if you're okay with getting a bit dirty, maybe something like this (which is still a toggle switch anyway): ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/884377531bcbd10e174c64d63872723d2892f6bf.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/d/ad5a5ab2f09b8b50642a34009532845737e51334.png) ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [February 16, 2024, 2:54pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/4 "2024-02-16T14:54:49Z")
> [@Transistor](#): > > A single button is the wrong control to use in Perspective as it will cause some confusion. When the button shows "Dark" does that mean it _is_ dark or it will be dark when selected. The new doc uses just one button ! ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/77e9e3c992cec46a9872546afc080a2ed39f54d0.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e17d9ab22536b3a48e82ca8c1ac85af2d244f4e.png) I agree that I often find one button toggles confusing, but in the case of the theme... I the user can't tell if his UI is dark or light, there's something VERY wrong somewhere. ---
**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 16, 2024, 3:55pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/5 "2024-02-16T15:55:30Z")
```auto # place this in your button. self.session.props.theme = "dark" if self.session.props.theme == "light" else "light" ``` ---
**Author:** ![Soham\_Ambekar](https://avatars.discourse-cdn.com/v4/letter/s/b2d939/32.png) [@Soham\_Ambekar](https://forum.inductiveautomation.com/u/Soham_Ambekar)\ **Post date:** [February 17, 2024, 10:24am UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/6 "2024-02-17T10:24:27Z")
Thanks @cmallonee your suggestion is working fine on toggle switch. Now how can I change the text on the toggle switch for Dark and Light mode as DARK or LIGHT respectively when selected? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [February 17, 2024, 10:30am UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/7 "2024-02-17T10:30:15Z")
Add an expression binding on the button's `props.text`. `if({session.props.theme} = "light", "Light", "Dark")` ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [February 18, 2024, 12:27pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/8 "2024-02-18T12:27:48Z")
That script was for a button, to make it a switch... don't use it on a toggle switch, it's already a switch ! ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [February 18, 2024, 5:33pm UTC](https://forum.inductiveautomation.com/t/change-theme-using-toggle-button/85827/9 "2024-02-18T17:33:44Z")
Pascal is correct. The text on a Toggle Switch component remains constant. If the label says "Dark" then dark mode is selected when the switch is on and light mode is selected when the switch is off. The text of the toggle switch should not change.