Setting colors in theme?

[mrgrlscz]

Is bubble-button-background-color the only color we can set at theme level?? Every other color seems to be hard-coded.
This causes different problems:

• EVERY bubble-card I create needs color tweaks
• this is a hudge problem for people using different themes, and no, I'm not the only one ^^
• each bubble-card type (button, slider, media player etc...) needs different CSS tweaks
• CSS tweaks don't follow the changes you do (like between beta4 and beta6), so cards colors are sometimes different from a version to another.

Maybe (I'm absolutely NOT a developer) something like :
icon_color.is_active = var(--bubble-button-icon-color-active) if set else rgb(255,220,200)

For:

• border radius
• icon color (when active and inactive)
• icon background color (when active and inactive)
• button background color (fouded a background-color-2 reference in bubble-card.js)
• slider background color (in case light switch and light color are from different entities, like with WLED multi segmented strips)
• sub button icon color (when active and inactive)
• sub button icon background color (when active and inactive)
• opacity?

This is what I do for now, here's part of my code and only works for bubble-button in switch mode, not sliders.

styles: |
  /* ####################### COMMON 1/3 ####################### */
  /* main_card */
  ha-card {
    --bubble-button-background-color: transparent !important;
  }
  ha-card > div > div {
    border-radius: var(--ha-card-border-radius) !important; 
  }
  ha-card > div > div > div {
    background-color: transparent !important;
  }

  /* text */
  div.bubble-name-container.name-container {
    color: var(--secondary-text-color);
  }
  .is-unavailable div.bubble-name-container.name-container {
    color: var(--warning-color);
  }
  .is-on div.bubble-name-container.name-container {
    color: var(--contrast);
  }

  /* sub_button */
  .bubble-sub-button-container > div {
    color: var(--primary-text-color) !important;  
    background-color: var(--surface0) !important;
    opacity: var(--alpha);
  }

  /* slider_radius */
  .range-fill {
    border-radius: 4px;
  }

  /* ####################### SPE SWITCH LIGHTS ####################### */

  /* icon_color */
  .bubble-icon-container.icon-container > ha-icon {
    transition: color 2s;
    color: ${state == 'on' ? 'var(--contrast)' : '' } !important;
  }

  /* icon_background */
  .bubble-icon-container.icon-container::after {
    transition: background 2s;
    background-color: var(--aqua);
  }

  /* button_background */
  .bubble-button-background {
    transition: background 2s;
    background-color: ${state == 'on' ? 'var(--aqua)' : '' } !important;
  }

Resulting in: (stock to the left, with the code above to the right)

And this pic is from another theme...

I know you're already busy, and I'm a patient guy ;)
By the way you did great job, and even if I'll not use it for me (custom-layout) I think your recent 'section view' compatibility will push bubble-card over boundaries!!

[koleos6]

Yes , could be a nice évolution for easier adoption to allow the parameters of the theme in a bubble-card

[gbcatrinoiu]

+1

[Clooos]

This is in my mind for a long time, but I've added so many new features in the v2 that I had to stop somewhere.

But I will definitely add that possibility in the future.

[mrgrlscz]

Patience is the mother of all virtues!!
Again, congrats for your work.