I see.
So basically, use CSS variables Always, that is simple enough. It would also be good to always bind the variable to a custom session prop so updating one updates all 'like' components on the project?
That depends on what you would put in that custom prop.
It should not be necessary in most cases, since that's what the css variables are for. If you need to change the color, your change the value of the variable, and it will update everything that uses it.
2 Likes
The main issue from your first posts (
)
were that you are binding to the
session.props.theme to do you colour switching for different themes.
Instead, you should have two sets of CSS in your themes folder (Windows default: C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes): one each for your light and dark themes.
Inside, for example, a variable.css file in each theme folder, you should define the colours for your shifts. For example:
Light theme:
:root {
--shift-bg--1: #ffffff;
--shift-bg--2: #fffffe;
--shift-bg--3: #fffffd;
}
Dark theme:
:root {
--shift-bg--1: #000000;
--shift-bg--2: #00000e;
--shift-bg--3: #00000d;
}
The colours are obviously just dummy values and should be replaced by the colours you want to show when in each theme.
Then to use them in your UI, you would use a binding to your self.props.text, for example, like:
Expression Binding on props.style.backgroundColor
case({self.props.text}
,'First Shift', 'var(--shift-bg--1)'
,'Second Shift', 'var(--shift-bg--2)'
,'Third Shift', 'var(--shift-bg--3)'
,'#fff'
)
This is a very simple demonstration, however I prefer not to directly reference CSS variables at all in my UI since they're not readily searchable without going into the theme files. I prefer instead to reference CSS variables inside of Perspective Styles and then using those in my UI.
For example, I would create perspective styles for each shift, including the fallback:
Shifts/1: background-color: var(--shift-bg--1)
Shifts/2: background-color: var(--shift-bg--2)
Shifts/3: background-color: var(--shift-bg--3)
Shifts/Fallback: background-color: #fff
and then bind to the ui components' style.classes prop:
Expression Binding on props.styles.classes
case({self.props.text}
,'First Shift', 'Shifts/1'
,'Second Shift', 'Shifts/2'
,'Third Shift', 'Shifts/3'
,'Shifts/Fallback'
)
5 Likes
I will investigate this, thank you for a detailed example of the preferred method!!
1 Like