Climate Card - Background Color

[darki79]

Hi,

I am using the climate card with some minor styling. But even if I turn off state_color I am not able to change the background color to another color like in my other bubble cards.

This is actually one of my examples:

type: custom:bubble-card
card_type: climate
entity: climate.hkt_kuche
sub_button:
  - entity: climate.hkt_kuche
    show_attribute: true
    attribute: current_temperature
    icon: mdi:thermometer
show_last_changed: false
show_state: false
show_attribute: false
attribute: current_temperature
state_color: true
card_layout: large
styles: |
  .bubble-icon {
    color: ${state === 'off' ? 'grey' : '#FE6F23'} !important;
  } .bubble-button-background {
    opacity: 0.1 !important;
    background-color: ${state === 'off' ? 'grey' : '#FE6F23'} !important;
  }
  .bubble-sub-button-1 {
    background-color: #6B231E !important;
  }
  * { 
      font-size: 13px !important;
    }
icon: fas:fire-flame-curved
name: Küche

Is there anything wrong with my YAML or is there an issue?

Thanks in advance :)

[MrBearPresident]

Climate card is a weird one and maybe should be better documented.

When the state_color is on:

• heating mode=off - > color off
• heating mode=on - > color om

When the switch state_color is off:

• heating action=off - > color off
• heating action=on - > color on

For your code you're using .bubble-button-background this is not supported for the climate card. It should be .bubble-color-background.

  .bubble-icon {
    color: ${state === 'off' ? 'grey' : '#FE6F23'} !important;
  }
  
  .bubble-color-background{
    opacity: 0.5 !important;
    background-color: ${state === 'off' ? 'grey' : 'red'} !important;
  }
  
  .bubble-sub-button-1 {
    background-color: #6B231E !important;
  }
  
  *{ 
    font-size: 13px !important;
  }

For future reference this can help: #996 (reply in thread)

---

_{If this solves your issue, please mark this as solved.}

[darki79]

Thank you, that helped me a lot!