Change Icon color OH3 MainUI

Setup, Configuration and Use Items & Sitemaps
1

Hi,

im using a list card with toggle cards.
I want to change the color of toggleswitch and icon if the bulb is ON. In my case the bulb is a shelly duo rgb which has no “ON”. Instead it has a int value 0-100 for brightness.
So i want to change the color if state > 0

The toggle switch works fine but the icon does not change its color:

component: oh-toggle-item
config:
  item: EGWohnzimmerLampchenshellycolorbulb98cdac2d0450100100108_Helligkeit
  title: Lämpchen
  icon: f7:lightbulb
  iconColor: '=(items[props.item].state == "0") ? "gray" : "yellow"'
  color: '=(items[props.item].state == "0") ? "gray" : "red"'
2

There might be other issues but one thing could be that you are comparing to a string „0“. What if you compare to the number 0 instead?

3

…as @DrRSatzteil said, there might be other issues, but have tried it in this way:

component: oh-toggle-item
config:
  item: Dummy_3
  title: Lämpchen
  icon: f7:lightbulb
  iconColor: '=items.Dummy_3.state == OFF ? "gray" : "yellow"'
  color: '=items.Dummy_3.state == OFF ? "gray" : "blue"'
slots: null

Maybe a toggle-item (Switch) expects ON/OFF

4

There is nothing wrong with the format of your color expressions. However, the oh toggle switch is gray when off and red when on by default, so I suspect that neither of your expressions are working the way you expect. Are you sure that items[props.item].state is returning the state you expect? Is props.item actually set in the widget properties?

5

Thank you all for the help.

I have to name the item and now it works:

component: oh-toggle-item
config:
  item: EGWohnzimmerWandlampeRechtsshellycolorbulb98cdac1fa51f100100107_Helligkeit
  title: Wandlampe rechts
  icon: f7:lightbulb
  color: '=(items.EGWohnzimmerWandlampeRechtsshellycolorbulb98cdac1fa51f100100107_Helligkeit.state == 0) ? "gray" : "yellow"'
  iconColor: '=(items.EGWohnzimmerWandlampeRechtsshellycolorbulb98cdac1fa51f100100107_Helligkeit.state == 0) ? "gray" : "yellow"'
slots: null
6

Next Problem:

component: oh-label-cell
config:
  item: KGGarageTorZushelly1483fdaa23555100100101_Eingang
  label: '=(items.KGGarageTorZushelly1483fdaa23555100100101_Eingang.state == ON) ?
    "Tor geschlossen" : "Tor offen"'
  color: '=(items.KGGarageTorZushelly1483fdaa23555100100101_Eingang.state == ON)
    ? "green" : "red"'
  icon: oh:GarageDoor
  header: Garagentor
slots: null

The label works fine, the color not.
I want the cell to get green if garagedoor is closed and red if garagedoor is opened.

The backgroud is always black:

image

7

Label cells only use the color property to set the background color if the on property is set to true.