Need help re on/off state coloring

[willliamchan]

So I have two aircons using bubble card and I'd like the color stays just like the screenshot when it's "Off" and when it is "On" (It could be heating or cooling) and I'd like it to pick the default "on" color from the theme just like the "Fan" entity. Is it something that I can do using style please?

Thank you!

[Clooos]

Hi! Is your fan a light entity? Because this color is only for light entities, your fan card should be blue on my theme.

[willliamchan]

thanks for the code and congratulations Clooos! I dunno anything about ccs code to be honest and it took me some time to mess around with your theme to make it more into the color template that i need. is it ok if you can response once more with actual state (on/off) and any random color so I know exactly what needs to be replaced?

[Clooos]

The one I've send before can have 3 different states/colors, but if you just want to change the background and the icon when it's on you can do that:

.bubble-button-card-container {
  background: ${hass.states['fan.your_entity'].state === 'on' ? 'rgb(40, 190, 120)' : ''} !important;
}
.bubble-icon-container {
  background: ${hass.states['fan.your_entity'].state === 'on' ? 'rgb(40, 190, 120)' : ''} !important;
}

[willliamchan]

.bubble-button-card-container {
background: ${hass.states['fan.your_entity'].state === 'state 1' ? 'color if state 1' :
hass.states['fan.your_entity'].state === 'state 2' ? 'color if state 2' : 'color if none or none'} !important;
hass.states['fan.your_entity'].state === 'state 3' ? 'color if state 3' : 'color if none or none'} !important;
}
.bubble-icon-container {
background: ${hass.states['fan.your_entity'].state === 'state 1' ? 'color if state 1' :
hass.states['fan.your_entity'].state === 'state 2' ? 'color if state 2' : 'color if none or none'} !important;
hass.states['fan.your_entity'].state === 'state 3' ? 'color if state 3' : 'color if none or none'} !important;
}

I see. So is that mean if I need to cover more states I can do the above?

[Clooos]

Yes, you can also change the color based on an attribute this way, by replacing hass.states['fan.your_entity'].state === 'state 1' with hass.states['fan.your_entity'].attributes.your_attribute === 'attribute state'.

But I will cover all of this in the new documentation, I still have a lot of work to do on that point. I really want to make everything clear and easy to understand.

Edit: You made a mistake, it's like this:

.bubble-button-card-container {
  background: ${hass.states['fan.your_entity'].state === 'state 1' ? 'color if state 1' :
  hass.states['fan.your_entity'].state === 'state 2' ? 'color if state 2' : 
  hass.states['fan.your_entity'].state === 'state 3' ? 'color if state 3' : 'color if none or '' '} !important;
}

[willliamchan]

Gotcha!

[willliamchan]

.bubble-button-card-container {
background: ${hass.states['fan.your_entity'].state === 'on' ? 'rgb(40, 190, 120)' : ''} !important;
}
.bubble-icon-container {
background: ${hass.states['fan.your_entity'].state === 'on' ? 'rgb(40, 190, 120)' : ''} !important;
}

Hi there! A follow up question here, how can I change the color of an icon?

[willliamchan]

Hey thanks, this is sort of working. I was trying to put #FFFFFF (white) but no change, while when I put other color like red green using hex code it recognizes it. Any idea?

[Clooos]

Can you share your not working code?

[willliamchan]

Sure, attached two examples. The first one is to set icon color to #FFFFFF as a test to make the icon with color white. And the second example is to test to make the icon with the same color as the card container color.

.bubble-button-card-container {
background: ${hass.states['lock.study_lock'].state === 'unlocked' ? '#6d9886' : ''} !important;
}
.bubble-icon {
color: ${hass.states['lock.study_lock'].state === 'unlocked' ? '#FFFFFF' : ''} !important;
}
${state === 'unlocked' ? icon.setAttribute("icon", "mdi:lock-open") : icon.setAttribute("icon", "mdi:lock")};

.bubble-button-card-container {
background: ${hass.states['lock.study_lock'].state === 'unlocked' ? '#6d9886' : ''} !important;
}
.bubble-icon {
color: ${hass.states['lock.study_lock'].state === 'unlocked' ? '#6d9886' : ''} !important;
}
${state === 'unlocked' ? icon.setAttribute("icon", "mdi:lock-open") : icon.setAttribute("icon", "mdi:lock")};

[Clooos]

This is because there is a default opacity on the icon, you can remove it this way:

.bubble-icon {
  opacity: 1;
  color: ${hass.states['lock.study_lock'].state === 'unlocked' ? '#6d9886' : ''} !important;
}

[willliamchan]

Yea!

[willliamchan]

opacity: 1;