using color from theme in card-mod | Home Assistant | Page 1

placid cloud Oct 28, 2024, 2:19 PM

#

Having a mushroom-light-card like this:

      - type: custom:mushroom-light-card
        entity: light.guest_room_floor_lamp_power
        name: Stehlampe
        layouertical
        card_mod:
          style: |
            ha-card {
              background-image: linear-gradient(270deg, rgba(255,255,255,1) 20%, rgba(160, 147, 125,0.7) 100%) ;
            }

Instead of entering the rgb color here, I want to take it from theme somehow with var(--room-color-dining-room)
What is the correct syntax?
Will write somthing like: rgba(var(--room-color-dinin-room), 0.7)

Have to add, that room-color-dining-room: is defined like this '181, 207, 183".
I assume, I have to deal somehow with a string here to use var with rgba.

And I need rgba(var..., since the color is defined without opacity.

magic vault Oct 28, 2024, 3:24 PM

#

I think this (partially) does what you're looking for: yaml type: custom:mushroom-light-card entity: light.living_room_lights name: Stehlampe layout: vertical card_mod: style: | ha-card { {% set c1 = "var(--primary-background-color)" %} {% set c2 = "var(--secondary-background-color)" %} {% set c1_rgba = c1.replace("rgb", "rgba").replace(")", ", 1)") %} {% set c2_rgba = c2.replace("rgb", "rgba").replace(")", ", 0.7)") %} background-image: linear-gradient(270deg, {{c1_rgba}} 20%, {{c2_rgba}} 100%) ; } where, in my theme: ```yaml
primary-background-color: rgb(0,0,0)
secondary-background-color: rgb(32, 33, 36)

#

~~But, I'm not entirely sure how to convert it from rgb to rgba. Probably some sort of string manipulation but, hopefully, this gets you started.~~
UPDATE: Used .replace to manipulate the string to handle rgba. It is kind of hacky but seems to work.

placid cloud Oct 28, 2024, 3:49 PM

#

I do not get it. Can you try something, when the color is define without rgb, like

primary-background-color: 0,0,0

magic vault Oct 28, 2024, 3:50 PM

#

Updated image (though I'm not 100% sure the alpha is being applied.)

magic vault Oct 28, 2024, 3:52 PM

#

placid cloud I do not get it. Can you try something, when the color is define without rgb, li...

Something like this should work: ```yaml
background-image: linear-gradient(270deg, rgba({{c1}},1) 20%, rgba({{c2}},0.7) 100%) ;

#

The rgba variables wouldn't be needed at that point.

placid cloud Oct 28, 2024, 4:00 PM

#

ok, zhx, got it.

One more problem. The theme is my own and set in the dashboard. In the card editor, the color variable is not substituted, it seems the editor uses another theme than the dashboard. In dashboard it works.

Can I tell the editor using my ohn theme?

magic vault Oct 28, 2024, 4:04 PM

#

Honeslty, I was literally just noticing the same thing... My theme has color-red, for example, defined and I could not get it to return.

#

Maybe it is a layout issue with the theme because I just switched to one that was made by someone else and it works in the Editor. yaml card_mod: style: | ha-card { {% set c1 = "var(--rgb-primary-color)" %} {% set c2 = "var(--rgb-accent-color)" %} background-image: linear-gradient(270deg, rgba({{c1}}, 1) 20%, rgba({{c2}}, 0.7) 100%); }where ```yaml
rgb-primary-color: 169, 177, 188
rgb-accent-color: 138, 180, 248

placid cloud Oct 28, 2024, 4:11 PM

#

Where did you switch to the other theme? I did it only in the dashboard.

#using color from theme in card-mod