Styling elements in Picture elements card: a small tutorial

[atlflyer]

Has the way to style the text color changed? I have a picture-elements card with service-button elements that I set the color using --md-theme-primary as shown above. Somewhere along the line, it stopped respecting my color settings, but I don’t know when.

I searched this thread, but didn’t see any discussion of it. Maybe I missed it.

To make sure it wasn’t something else I was doing in my card, I recreated the example to confirm that this method of setting color doesn’t work anymore. I also changed my theme to the default.

type: picture-elements
card_mod:
  style: |
    ha-card {
      height: 70px !important;
    }
elements:
  - type: action-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 6%
      left: 15%
  - type: action-button
    title: Command
    service: homeassistant.update_entity
    service_data:
      entity_id: sun.sun
    style:
      top: 6%
      left: 70%
      "--mdc-theme-primary": red
      background: rgb(220,220,220)
      border: 1px solid black
      border-radius: 5px
image: /local/images/white.jpg

[SylvainGa (Sylvain Gagnon)]

Hi, I’m unable to set the color of an icon. As you can see in the screenshot below, I know card-mod is working as the icon scale was modified but all my attempts to change the icon color failed. In the screen shot, I’m showing all three attempts (individually) and none changed the color of the icon. I also tried with both state_color being true or false. I used to have custom-ui active. I tried with and without custom-ui active and again, no change to the icon color. I tried different entity and all failed to change color. What am I doing wrong? Thanks.

Edit: I’m using card-mod 4.0.0

Edit 2: Using the examples in the card-mod HACS doc, I tried adding

    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:bed;
          --paper-item-icon-color: yellow
          --paper-item-icon-active-color: red
        }

to the entity and as can be shown in the next screenshot, it DID change to a bed, but the color stayed to its default inactive (blue) This is getting frustrating

Edit 3: Got it working with

--card-mod-icon-color: red

Now I need to see if I can template that field…

Edit 4: Well, of course, that didn’t work

  - entity: binary_sensor.hue_motion_sensor_cave_motion
    card_mod:
      style: |
        ha-card {
          {% if is_state('binary_sensor.hue_motion_sensor_cave_motion','on') %}
          --my-state-color: red;
          {% else %}
          --my-state-color: green;
          {% endif %}
        }
        :host {
          --card-mod-icon-color: var(--my-state-color)
        }

    style:
      left: 53%
      top: 60%
    type: state-icon

The icon stayed at its default blue color when inactive and yellow when active. Replacing --card-mod-icon-color: var(--my-state-color) with just --card-mod-icon-color: red turns it red so the line is working when not templated.

Anyone willing to help? Thanks.

[Mariusthvdb (Marius)]

@SylvainGa

he line is working when not templated

Show us that template?
Btw, you can probably use icon-primary-color, which is more direct so faster .

[SylvainGa (Sylvain Gagnon)]

Unless I’m misunderstanding, it’s shown above in the ‘ha-card’ block. Here it is again

          {% if is_state('binary_sensor.hue_motion_sensor_cave_motion','on') %}
          --my-state-color: red;
          {% else %}
          --my-state-color: green;
          {% endif %}

I also reduced it to

--my-state-color: {% if is_state('binary_sensor.hue_motion_sensor_cave_motion','on') %}red{% else %}green{% endif %}

Same result.

The template resolves in the Developer Tools Template debugger as such --my-state-color: green

[SylvainGa (Sylvain Gagnon)]

Woohoo! This worked!

    card_mod:
      style: |
        :host {
          --icon-primary-color: {% if is_state('binary_sensor.hue_motion_sensor_cave_motion','on') %}red{% else %}green{% endif %}
        }

For some reason I can’t use variables, but that’s ok. I don’t thnk I’ll need any for what I’m doing. Of course, by just saying that means I’ll need variables somewhere lol.

[SylvainGa (Sylvain Gagnon)]

Got it to work like I wanted. Movement sensor turns green if if sees movement but it’s too bright, turns yellow if it sees movement and dark (and an automation will turn the associated light at the bottom of the staircase), remains blue when no movement and will be grey if it’s unavailable for some reason. Now I need to do my smart baseboard heaters. At least, now I have something to go to.

  - entity: binary_sensor.hue_motion_sensor_cave_motion
    card_mod:
      style: |
        :host {
          --icon-primary-color:
            {% if is_state('binary_sensor.hue_motion_sensor_cave_motion','on') %}
              {% if state_attr('sensor.hue_motion_sensor_cave_illuminance', 'light_level') | float < 7000 %}
                rgb(251,210,41)
              {% else %}
                rgb(12,146,12)
              {% endif %}
            {% elif is_state('binary_sensor.hue_motion_sensor_cave_motion','unavailable') %}
              rgb(193,193,193)
            {% else %}
              rgb(68, 115, 158)
            {% endif %}
        }
    style:
      left: 53%
      top: 60%
    type: state-icon

[Mariusthvdb (Marius)]

Yep that is the way to do it. Glad you could make it work

[dcapslock (Darryn Capes-Davis)]

@SylvainGa

The icon stayed at its default blue color when inactive and yellow when active. Replacing --card-mod-icon-color: var(--my-state-color) with just --card-mod-icon-color: red turns it red so the line is working when not templated.

Anyone willing to help? Thanks.

:host (tha card) is above ha-card. So try reversing where you set --my-state-color and --card-mod-icon-color.