# Theme Color Variable Raises False Error **URL:** \ **Category:** Ignition\ **Tags:** perspective, ignition81\ **Created:** [March 21, 2022, 8:16pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429 "2022-03-21T20:16:00Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Brandon\_Peterson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brandon_peterson/32/32960_2.png) [@Brandon\_Peterson](https://forum.inductiveautomation.com/u/Brandon_Peterson)\ **Post date:** [March 21, 2022, 8:16pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429/1 "2022-03-21T20:16:00Z")
When setting the color properties of a vessel component in perspective using `var()` and a CSS theme color, the editor shows an error. However, the color still shows up correctly on the component. Why am I getting this error message if it works? ```nohighlight liquidColor: does not match the format for color liquidWarningColor: does not match the format for color ``` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/d/3d8d73ce5a0a721ed8a2e7894b48c207850fad47.png) The next step might be to omit the `var()` from those properties, but then the theme colors won’t work at all. I’m not sure if I’m doing something wrong or if I’ve found a bug. I’m new here, so any help would be appreciated 😊 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/7/07f884e94cd13b6293258b18e217b9232d903db5.png) ---
**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\ **Post date:** [March 21, 2022, 8:31pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429/2 "2022-03-21T20:31:11Z")
I could be completely wrong. But from a glimpse you are not properly binding the property. You are writing var() in where a color name or hex code should go. If you plan to use functions you should click the chain link icon to the left of the property and use var() in an expression or something. If you hover over your property you will see the link icon to bind pop up directly to the left of it. i.e. handling functions in an expression and printing the actual color code where you wrote var() should fix it if im correct ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 21, 2022, 8:46pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429/3 "2022-03-21T20:46:36Z")
> [@andrews](#): > > I could be completely wrong. You might well be. See if [Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-UsingThemeColors) helps. You can use the name directly in a property - e.g. `background-color: --success` but when used in a style class you need to use the form `var(--success)`. ---
**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\ **Post date:** [March 21, 2022, 8:48pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429/4 "2022-03-21T20:48:24Z")
I definitely need to dabble more in perspective ---
**Author:** ![Brandon\_Peterson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brandon_peterson/32/32960_2.png) [@Brandon\_Peterson](https://forum.inductiveautomation.com/u/Brandon_Peterson)\ **Post date:** [March 21, 2022, 9:33pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429/5 "2022-03-21T21:33:17Z")
I think something weird is going on here… I’m using Ignition v8.1.15 (b2022030114), and my Perspective Designer isn’t working the same as in that documentation. I’m able to put either `var(--error)` or `--error` into a style class property or for any `Color` property (that I’ve found so far). I only get that format error when I use `var()` on a component property directly (not in a class style). The one exception to this pattern is that for the Vessel component component specifically, putting a theme color without `var()` doesn’t throw a format error, but also doesn’t work. Putting a theme color with `var()`, on the other hand, does work, but throws the format error. I’ve tried other components with color properties outside of the style property, like the Cylindrical Tank and LED Display, but they behave like all the other components. _Sidenote:_ Whenever using a theme color, the little color box on the side is always grey. ![Perspective Theme Color Indicators Error](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/63e38120d4e4edf6d5ad31466c62ea2f70c2a560.png) ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [March 21, 2022, 9:46pm UTC](https://forum.inductiveautomation.com/t/theme-color-variable-raises-false-error/57429/6 "2022-03-21T21:46:25Z")
I suspect that the CSS arrangements for these components are different to the standard components and that you can't use the theme settings. The [Perspective - Vessel](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Vessel) page says about liquid-color, > liquidColor Color used to render the filled part of the vessel. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. Note that there is no mention of theme colors. A simple enough workaround would be to create some view custom properties or some session variables to hold the colors and have them switch based on theme. e.g., ```auto "tankColors": { "liquidColor": "#0000cc", "liquidWarningColor": "#cc0000" } ``` and set an expression binding on each of those, `if(left({session.props.theme}, 4) = "dark", "#0000cc", "#000055")`