Theme Color Variable Raises False Error

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