Background color for a selected Climate Card

[Balooforever]

Hi all,

I try, try, try and try again and ... doesn't work.

How i can change the "selected" color in the sub menu of a Climate Card ?

And, a secondary question (but i can live with it), how i can custom the color of the climate card when "heat" is ON ? I want reduce the opacity ..

Thank !

[falkio8]

I want to know this too. I can change the background color of a bubble button card to a progress bar with this code:

            styles: |-
              :host{
                  --color-bar: red ;
                  --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
              }
              .bubble-button-background {
                  background: linear-gradient(
                to right, 
                var(--color-bar) 0%, 
                var(--color-bar) ${Math.round(hass.states['sensor.bubble_card_energy_range_percentage'].state)}%,
                var(--color-background) ${Math.round(hass.states['sensor.bubble_card_energy_range_percentage'].state)}%,
                var(--color-background) 100%
              ) !important;
              }

But I can´t get it apply to pop-up or climate cards.

[johndoe0815]

Thanks for the code, works out of the box!
For the climate card I guess you have to choose something else than bubble-button-background, try the different objects from here:
https://github.com/Clooos/Bubble-Card/blob/main/src/cards/climate/styles.ts

[falkio8]

Found it and its working, here is a small dirty guide:

This is the whole code to transform the climate card into a "heating percentage bar":
replace entity with your corresponding value 0...100%

            styles: |-
              :host{
                  --color-bar: ${hass.states['entity'].state < 10 ? 'red' : hass.states['entity'].state < 50 ? 'orange' : 'green'} !important;;
                  --color-background: var(--bubble-pop-up-main-background-color, var(--bubble-pop-up-background-color, var(--bubble-secondary-background-color, var(--background-color, var(--secondary-background-color)))));
              }
              .bubble-climate-container {
                  background: linear-gradient(
                to right, var(--color-bar) 0%, var(--color-bar) ${Math.round(hass.states['entity'].state)}%,
                var(--color-background) ${Math.round(hass.states['entity'].state)}%,
                var(--color-background) 100%
              ) !important;
              }
              .bubble-color-background {
                  background: transparent !important; 

[johndoe0815]

Good catch!
As still a newb with this coding the only thing missing for me is an example of how to calculate a percentage value on the fly out of a sensor state.

E.g. you have CPU temperature 64 degrees and you say it is between 40 and 70 degrees, so the bar would be
(64-40)/(70-40) = 0,8 = 80%.

[falkio8]

Yeah me too but learning more and more every day. Google and MS copliot are your friends. Its amazing how much copilot can do for you, just try it. I made something similar. Create a new helper entity and use this:

This calculates a scale between 0 to 100% from a power sensor with a variable max value. Just set x1 and x2 to your 40 and 70 degrees.

{% set distance = states('sensor.shellypro3em_3ce90e6fecf4_total_active_power') | float(0) %}
          {% set x1 = 0 | float(0) %}
          {% set x2 = states('input_select.bubble_card_energy_range_helper') | float(0) %}
          {% set m = 100 / (x2 - x1) %}
          {% set c = 100 - (m * x2) %}
          {% set result = distance * m + c %}
          {% set limited_result = [result, 100] | min %}
          {{ limited_result | round(1) }}

[MrBearPresident]

@Balooforever If solved, please mark this as such.

[Balooforever]

@Balooforever If solved, please mark this as such.

Sorry, not solved, i want to modify this, in blue :

[MrBearPresident]

I think it is the violet one you need.

With this in the custom style section:

:host{
  --bubble-climate-background-color: blue;
  --bubble-state-climate-heat-color: green;
  --bubble-list-item-accent-color: violet;
}

---

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