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?
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.
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.
1 Like
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):
2 Likes
The new doc uses just one button !
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.
2 Likes
# place this in your button.
self.session.props.theme = "dark" if self.session.props.theme == "light" else "light"
1 Like
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?
Add an expression binding on the button's props.text.
if({session.props.theme} = "light", "Light", "Dark")
That script was for a button, to make it a switch... don't use it on a toggle switch, it's already a switch !
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.