how to have multiple state colors?

[platini76]

  .bubble-sub-button-1 > ha-icon {
    color: ${hass.states['sensor.nuki_porta_bocchio_battery'].state > '50' ? 'green' : 'red'} !important;
  } 

I want to have a state color for 50 to 100, one for 20 to 50 and one for 0 to 20
how to have them on this mod?
thanks for help

[petanque]

This works for me:

color: 
  ${hass.states['sensor.radiator_stue_battery'].state < 10 ? 'red' : 
  (hass.states['sensor.radiator_stue_battery'].state <= 20 ? 'yellow'
  : 'green')} !important;

[platini76]

are you shure that this can work?

.bubble-icon {
  color: ${hass.states['lock.porta_fronte_bocchio_lock'].state === 'locked' ? 'lightred' : 'lightgreen'} !important;
}   
.bubble-sub-button-1 { .bubble-sub-button-1 > ha-icon {
  color: 
    ${hass.states['sensor.porta_fronte_bocchio_batteria'].state < 10 ? 'red' :
   (hass.states['sensor.porta_fronte_bocchio_batteria'].state <= 20 ? 'yellow' :
  'green')} !important;
} 


${icon.setAttribute("icon", hass.states['lock.porta_fronte_bocchio_lock'].state === 'locked' ? 'mdi:lock' : 'mdi:lock-open')}

[MrBearPresident]

You had a part to much in your code.
It was hard to see/read because you did not use the code block

Use this

.bubble-icon {
  color: ${hass.states['lock.porta_fronte_bocchio_lock'].state === 'locked' ? 'lightred' : 'lightgreen'} !important;
}   
.bubble-sub-button-1 > ha-icon {
  color: 
    ${hass.states['sensor.porta_fronte_bocchio_batteria'].state < 10 ? 'red' :
     hass.states['sensor.porta_fronte_bocchio_batteria'].state <= 20 ? 'yellow' :
     'green'} !important;
} 


${icon.setAttribute("icon", hass.states['lock.porta_fronte_bocchio_lock'].state === 'locked' ? 'mdi:lock' : 'mdi:lock-open')}

---

^{If this solves your issue, please mark this as solved and close the discussion.}

[platini76]

thank you it works! how to add a background on the icon circle?

[MrBearPresident]

What did you already try?

[platini76]

now it like this:

and it is ok for me...
i would like only to put a background

[platini76]

I tried this but won't work corrctly:

.bubble-icon {
  color: ${hass.states['lock.nuki_porta_bocchio_lock'].state === 'locked' ? 'red' : 'green'} !important;
}  
.bubble-icon-container {
  background-color: ${hass.states['lock.nuki_porta_bocchio_lock'].state === 'locked' ? 'red' : 'green'} !important;
} 
.bubble-sub-button-1 > ha-icon {
  color: 
    ${hass.states['sensor.porta_fronte_bocchio_batteria'].state < 10 ? 'red' :
     hass.states['sensor.porta_fronte_bocchio_batteria'].state <= 20 ? 'yellow' :
     'green'} !important;
} 
${icon.setAttribute("icon", hass.states['lock.nuki_porta_bocchio_lock'].state === 'locked' ? 'mdi:lock' : 'mdi:lock-open')}

[MrBearPresident]

Play around with rgba(0,0,0,0) where the last 0 is the opacity.
Afterwards, when you are happy with the color, place them in your code.
Here I placed some examples.

For Red

  background-color: rgba(255, 0, 0, 0.4);

For blue

  background-color: rgba(0, 255, 0, 0.4);

[platini76]

it works like a charm... thank you!

[MrBearPresident]

No problem.
Sorry there are not alot of responders om github.