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?
liquidColor: does not match the format for color
liquidWarningColor: does not match the format for color
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 
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
You might well be. See if Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation 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).
1 Like
I definitely need to dabble more in perspective
1 Like
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.
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 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.,
"tankColors":
{
"liquidColor": "#0000cc",
"liquidWarningColor": "#cc0000"
}
and set an expression binding on each of those,
if(left({session.props.theme}, 4) = "dark", "#0000cc", "#000055")
1 Like
