Secondary text color change not working

Hi All!

I’m using the code from @ArenaCloser to display the stock price (with Yahoo finance integration) but the result is different from the expected.

It’s missed the SF Family font ( but I dont know how to add to home assistant) but, most important, the seconday info text dont change color.

Here’s the code:

type: custom:stack-in-card
mode: vertical
cards:
  - type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 70% 30%
      grid-gap: 0px;
    cards:
      - type: custom:mushroom-template-card
        entity: sensor.yahoofinance_isp_mi
        primary: ISP.MI
        secondary: '{{state_attr(entity, ''friendly_name'')}}'
        icon: mdi:finance
        icon_color: grey
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape:after {
                font-size: 20px;
                content: '';
              }
              ha-icon {
                width: 0px !important;
              }
            .: |
              ha-card {
                box-shadow: none;
                margin: -4px -7px;
              }
      - type: custom:mushroom-template-card
        entity: sensor.yahoofinance_isp_mi
        primary: '{{states(entity)}}'
        secondary: |
          {% if state_attr(entity, 'trending') == "up" %}+{% endif
          %}{{state_attr(entity,'regularMarketChangePercent')}}%
        card_mod:
          style:
            mushroom-state-info$: |
              * {
                text-align: end;
                font-family: 'SF Pro Rounded';
              }
            .: |
              ha-card {
                --secondary-text-color: {% if state_attr(config.entity, 'trending') == "up" %}rgba(var(--rgb-green)){% else %}rgba(var(--rgb-red)){% endif %};
                margin: -3px 2px -6px 0px;
                box-shadow: none;
              }
  - type: custom:mushroom-template-card
    card_mod:
      style: |
        ha-card {
          margin: -25px 0px 0px 66px;
          border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
        }

The expected result look like:

I think it’s --card-secondary-color nowadays, or at least that what I have.

1 Like