If a theme selection has to be provided for users between light and dark modes in vision, What will be the best way? Our vision project includes nearly all components in ignition vision module.
Unlike perspective where css styling is directly applied for a component, Does vision components have something related to themes ?
How I though so far is, to pass in colors via tag to each component on screen ?
Are there any easy methods / Different approaches for this ?
I use client tags for this and store the colour values in hex or as “color(123,234,231)”. You could have light and dark folders of colour tags and then a ‘selected’ folder which references one of the two theme folders.
I store all my colors in script modules, inside helper classes.
Basic gist:
Groups of colors make ColorRamps (eg. blue10 to blue100), groups of ColorRamps make a ColorPalette (eg. high-performance, saturated, etc.), ThemeTokens reference colors from a ColorPalette (eg. “process/state/transitioning” = blue40), and finally groups of ThemeTokens make a Theme (eg. light, dark, colorblind, etc.). Then component templates can use ThemeTokens from the active theme for styling.
Themes can be swapped by either changing the active palette or theme, and client color change requests become 10 second fixes.
We are already doing this but.,
Considering the screens have tables and trends, The axis, border and chart colours can become tricky right? Any suggestions.
The idea is very abstract for me to understand, Still i will try my level best to understand this.
If possible, can you help me with some screens shots and snippets.
That will be more helpful. Thanks.
What is a ThemeToken, object-wise? How do your components reference these? Via runScript expressions?
A ThemeToken holds subtokens (nested ThemeTokens) and values (colors), which are both referenced by string keys. It’s basically a fancy nested dictionary.
Take alarms for example; we have tokens for critical/high/medium/low/diagnostic, foreground/background color, and primary/secondary for flashing.
- alarm
- critical (red/50)
- foreground (gray/10)
- primary (gray/10)
- secondary (gray/20)
- background (red/50)
- primary (red/50)
- secondary (red/60)
- high (orange/50)
- foreground (gray/10)
- primary (gray/10)
- secondary (gray/20)
- background (orange/50)
- primary (orange/50)
- secondary (orange/60)
All of these statements return the same color:
state = “high”
theme.getToken(“alarm”).getToken(“high”).getToken(“background”).getValue(“primary”)
theme.getToken(“alarm/high/background”).getValue(“primary”)
theme.getValue(“alarm/high/background/primary)
theme.getToken(“alarm”).getToken(state).getValue(“background/primary”)
theme.getValue(“alarm/“+state+“/background/primary”)
Yup, exactly. Or through runScript expressions that update the entire style of a template at once.
Looks very cool 
nice implementation!
This is helpful, Will try this one. Thanks