Oh-label-card and iconColor expression

I’m running OH 4.3.2 and have the same expression on oh-label-card as well as on oh-gauge-card

On oh-gauge-card I can see three differente colors for 3 different values I set for temperature.

On oh-label-card, there are only two colors representing 3 different values.

The expressions are:

oh-gauge-card

borderColor: "=(Number.parseFloat(items.S26_Quarto_Temperatura_no_Quarto.state) >= 25) ? 'red' : (Number.parseFloat(items.S26_Quarto_Temperatura_no_Quarto.state) <= 18) ? 'blue' : '#00cc66'"

oh-label-card

iconColor: "=(Number.parseFloat(items.S26_Quarto_Temperatura_no_Quarto.state) >= 25) ? 'red' : (Number.parseFloat(items.S26_Quarto_Temperatura_no_Quarto.state) <= 18) ? 'blue' : '#00cc66'"

The iconColor property in the label card gets sent to the oh-icon component which renders the card’s icon. How that component handles the color depends on the type of icon you are using. That looks like the f7 thermometer icon on the label card, so the oh-icon uses the f7 icon color system. F7 doesn’t accept arbitrary colors, it only accepts colors from a limited list of color name strings in the library:

If you just change the #00cc66 in your expression to green you’ll see three colors instead of two. The f7 green, however is #4cd964, so it will be a little different than the one you are using for the gauge, if that matters to you.

Thanks for pointing me to the F7 color documentation.

Using the color name (green) the icon changes color, but using the color code (#4cd964) it doesn’t.

I tried using other color codes from the F7 documentation page and it doesn’t work either.

Most colors, used by name, work, but not all.

No, the codes will never work in f7, only the names. This is related to the way f7 uses classes to do all the basic color assignment. The codes are just there in the docs to show exactly which shade corresponds to each color name.

I’ve never tested them systematically, but I’m a little surprised they don’t all work. It’s possible there are certain restrictions for particular colors, but it would be strange for those restrictions to apply to icons.

Below is a list of the colors tested.

It may be a problem with my hardware, but I can’t tell the difference between “pink” and “red” here.

All other colors are displayed correctly.

red         OK
green	    OK
blue	    OK

pink	    same as 'red'

yellow	    OK
orange	    OK
purple	    OK
deeppurple	OK
lightblue	OK
teal	    OK
lime	    OK
deeporange	OK
gray	    OK
white	    OK
black       OK
1 Like