# Themes in Vision **URL:** \ **Category:** Ignition\ **Tags:** vision\ **Created:** [March 21, 2021, 3:33am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719 "2021-03-21T03:33:36Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\ **Post date:** [March 21, 2021, 3:33am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/1 "2021-03-21T03:33:36Z")
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 ? ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 21, 2021, 6:28am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/2 "2021-03-21T06:28:59Z")
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. ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [March 21, 2021, 7:20am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/3 "2021-03-21T07:20:25Z")
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. ---
**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\ **Post date:** [March 21, 2021, 8:56am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/4 "2021-03-21T08:56:51Z")
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. ---
**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\ **Post date:** [March 21, 2021, 9:01am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/5 "2021-03-21T09:01:27Z")
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. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 21, 2021, 10:58am UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/6 "2021-03-21T10:58:10Z")
What is a ThemeToken, object-wise? How do your components reference these? Via runScript expressions? ---
**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\ **Post date:** [March 21, 2021, 8:43pm UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/7 "2021-03-21T20:43:57Z")
> [@nminchin](#): > > What is a ThemeToken, object-wise? 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. ```auto - 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: ```auto 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”) ``` > [@nminchin](#): > > How do your components reference these? Via runScript expressions? Yup, exactly. Or through runScript expressions that update the entire style of a template at once. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 21, 2021, 9:01pm UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/8 "2021-03-21T21:01:13Z")
Looks very cool 🙂 nice implementation! ---
**Author:** ![vasanth.p](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/vasanth.p/32/38099_2.png) [@vasanth.p](https://forum.inductiveautomation.com/u/vasanth.p)\ **Post date:** [March 22, 2021, 5:22pm UTC](https://forum.inductiveautomation.com/t/themes-in-vision/44719/9 "2021-03-22T17:22:01Z")
> [@bmusson](#): > > > [@nminchin](#): > > > > What is a ThemeToken, object-wise? > > 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. > > ```python > - 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: > > ```python > 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”) > > ``` > > > [@nminchin](#): > > > > How do your components reference these? Via runScript expressions? > > Yup, exactly. Or through runScript expressions that update the entire style of a template at once. This is helpful, Will try this one. Thanks