help changing colors in mushroom cards based on attributes

[native wren]

Hey folks I'm trying to set colors of cips and cards based on a color attribute of an entity. I'm having some problems and would love another set of eyes and some tips.

chips:
  - type: entity
    entity: sensor.x1c_externalspool_external_spool
    name: >
      {{ states('sensor.x1c_externalspool_external_spool') }} ({{
      state_attr('sensor.x1c_externalspool_external_spool', 'remain') }}g)
    icon: mdi:movie-roll
    card_mod:
      style: |
        :host {
          background-color: {{ state_attr('sensor.x1c_externalspool_external_spool', 'color') }};
        }
        .chip__icon, .chip__content {
          color: {{ state_attr('sensor.x1c_externalspool_external_spool', 'color') == '#000000' ? '#FFFFFF' : '#000000' }};
        }

colors are stored as hex in the attribute, eg: color: #FFFFFFFF

[short spade]

{{ state_attr('sensor.x1c_externalspool_external_spool', 'color') == '#000000' ? '#FFFFFF' : '#000000' }}

that's not correct

{{ '#FFFFFF' if state_attr('sensor.x1c_externalspool_external_spool', 'color') == '#000000' else '#000000' }}

[native wren]

clearly 😂 ... I've never tried to use hex before but the docs seem to suggest it is valid

[short spade]

You're mixing up JS and Jinja

[native wren]

ah so the conditioning is wrong!

I swear if there was a jinja boot camp I'd go attend it 😂

thank you!! I'll test asap

[native wren]

Still no joy… Starting to wonder if it is actually feasible to set the color in a mushroom card based on the attribute of an entity at all

[karmic heath]

Correct me if I'm wrong guys but you can use entity instead of writing the whole entity name that you have already set in the entity field. So you can write states(entity) or state_attr(entity, "some_attr") in templates.

[native wren]

thanks - that'd make it readable for sure

[native wren]

even this doesn't work:

chips:
  - type: entity
    entity: sensor.x1c_00m09c451401421_externalspool_external_spool
    icon: mdi:movie-roll
    card_mod:
    style: |
      ha-card {
        --chip-background: blue;
      }

straight from the developer docs

[short spade]

what developer docs will have card-mod in it?

secondly your yaml has the wrong indentation

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.x1c_00m09c451401421_externalspool_external_spool
    icon: mdi:movie-roll
    card_mod:
      style: |
        ha-card {
          --chip-background: blue;
        }

[native wren]

sorry my understanding is these are the docs from the originally mushroom devs? I could be very wrong https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472/3

[short spade]

lol no

that's a random dude

[native wren]

lol... its so well organized though

im easily fooled

also surprised my YAML checker didn't catch the indent... I though style went inline with card-mod

[short spade]

it goes under card_mod or it goes outside card mod, it depends on where you're using it

if you put it in-line with card mod, card mod has nothing

notice how all his examples have style indented

I also don't see where you got --chip-background from

in his examples

oh, found it

[native wren]

im open to any other way of doing this too

[short spade]

try using the correct example, see if that works

his examples are from last year and alot has changed under the hood

[native wren]

this works: ```type: custom:mushroom-chips-card
chips:

• type: entity
  entity: sensor.x1c_00m09c451401421_externalspool_external_spool
  icon: mdi:movie-roll
  name: >
  {{ state_attr(entity, 'friendly_name') }}
  card_mod:
  style: |
  ha-card {
  --chip-background: blue;
  }

[short spade]

alright, then your issue is most likely with whatever selector you're using for card-mod

the code I gave you above is all you need for the if statement

[native wren]

noted - I'll keep tinkering. If I use this from the example forum post it does not work:

  style: |
    ha-state-icon {
      color: red;
    }```

but this does:

chips:
  - type: entity
    entity: sensor.x1c_00m09c451401421_externalspool_external_spool
    name: >
      {{ state_attr(entity, 'friendly_name') }}
    card_mod:
      style: |
        ha-card {
          color: red;
        }```
so that gives me something to go on - I'll keep testing and report back. Thanks @short spade

[short spade]

have you read the card-mod docs?

are you just changing things willy nilly?

there's an F12 window that allows you to inspect the elements that you're adjusting

available on chrome, firefox, edge

[native wren]

I was just looking at dev tools in Chrome

[native wren]

Got it! (havent solved the name template though 🤣 ) - colors work! I was using the wrong selectors:

chips:
  - type: entity
    entity: sensor.x1c_00m09c451401421_externalspool_external_spool
    name: |
      {{ states(entity) }} 
    icon: mdi:movie-roll
    card_mod:
      style: |
        ha-card {
          color: {{ state_attr('sensor.x1c_00m09c451401421_externalspool_external_spool', 'color') }};
        }
        ha-icon {
          color: {{ state_attr('sensor.x1c_00m09c451401421_externalspool_external_spool', 'color') }};
        }
  - type: entity
    entity: sensor.x1c_00m09c451401421_ams_1_tray_1
    name: |
      {{ states(entity) }} ({{ state_attr(entity, 'remain') }}g)
    icon: mdi:movie-roll
    card_mod:
      style: |
        ha-card {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_1', 'color') }};
        }
        ha-icon {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_1', 'color') }};
        }
  - type: entity
    entity: sensor.x1c_00m09c451401421_ams_1_tray_2
    name: |
      {{ states(entity) }} ({{ state_attr(entity, 'remain') }}g)
    icon: mdi:movie-roll
    card_mod:
      style: |
        ha-card {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_2', 'color') }};
        }
        ha-icon {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_2', 'color') }};
        }
  - type: entity
    entity: sensor.x1c_00m09c451401421_ams_1_tray_3
    name: |
      {{ states(entity) }} ({{ state_attr(entity, 'remain') }}g)
    icon: mdi:movie-roll
    card_mod:
      style: |
        ha-card {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_3', 'color') }};
        }
        ha-icon {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_3', 'color') }};
        }
  - type: entity
    entity: sensor.x1c_00m09c451401421_ams_1_tray_4
    name: |
      {{ states(entity) }} ({{ state_attr(entity, 'remain') }}g)
    icon: mdi:movie-roll
    card_mod:
      style: |
        ha-card {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_4', 'color') }};
        }
        ha-icon {
          color: {{ state_attr('sensor.x1c_00m09c451401421_ams_1_tray_4', 'color') }};
        }