You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
Version:
LESSON LIST
-
4:06Styles
-
4:47Style Classes
-
3:14Animated Style Classes
-
4:58Dynamic Style Classes
Take Topic Challenge
Supplemental Videos
-
1:54Element States
-
2:09Media Query
-
3:10Perspective Themes
LESSON
Perspective Themes
Description
This lesson introduces themes in Perspective, including demonstrations on how to switch between different themes.
Video recorded using: Ignition 8.0
Transcript
(open in window)[00:00] In this lesson, we'll talk about Perspective themes. Other videos here on inductive university have talked about inline styles and style classes for perspective components. Those allow you to make visual changes to individual components. A theme is a visual style that's applied to all components, with the idea being that inline styles and style of classes can override what the theme is doing. When you create a new project, you start with the light theme. But you can very easily switch to a different theme. Over here I have a couple of buttons. When I click on the dark button, I would like to switch over to the dark theme, doing that as incredibly easy, we actually have a component action for it. So if I right click on the dark button, I can go down to configure events and under Component Events, I'll select the onActionPerformed event and I'll add a theme action. And we can see that we have a dropdown that lists all of the available themes. Now we ship ignition with some things by default, but you may have more or less here depending on version of ignition, as well as whether or not you have custom themes. For more information, check out our perspective theming content in the user manual. For right now, I'll just leave this selected as dark we'll press okay and I'll test this out in the designer, enter preview mode, I'll press the button and we switched over to the dark theme. I already configured my light button here to switch back to the light theme. So I'll just press that right now. And you can see we're back to the light theme. Now, in addition to the component action, we actually have a session prop that allows you to change the active theme. So if I head down to the little gear icon here and we take a look at our session prompts, they'll notice that there is in fact a theme property. So I could come over here and instead of giving my users a way to change the theme in the project, I could just set this to dark save my project and new sessions will launch using the dark theme. I can also come back to the view I was working on and you'll notice that it's back to the dark theme. Now, in addition to the actions and just statically setting the theme on the session prop. We can get a little more flexible with switching themes. So if I go back to design mode here, I have this dropdown and inside of the dropdown, I configured a couple of options one for light, one for dark. So I could just bind the value property here to that session prop. So I'll click the little binding icon. We'll do a property binding. I'll go ahead and I'll browse for that session prop and under the session object under props, we do have the theme property I'll click okay and in my case, I do want this drop down to write back to the session prop. So I'll make sure to set bi-directional I'll click OK And once again, we can test this out. So back into preview mode, click on the dropdown, click on light, and we're back to the light theme. And there you have it, a couple of different ways to switch between themes in your perspective sessions.