Markdown card changing color of icon and title, using cardmod

Configuration Frontend
1

Hi all,
I’m trying to change the color of the title and the icon based on the state of an entitiy.

Really can’t get it to work. Tried different ways but it seems like markdown card just doesn’t do anything with all the code below the title. I’m afraid that it’s something small that I overlook but if someone can point me in the right direction then I would be happy!
Thanks in advance! Remco

This is what i’ve got so far:

type: markdown
content: |
  <h2 id="verlichting-icon">
    <ha-icon icon="mdi:lightbulb-group"></ha-icon> Verlichting
  </h2>
card_mod:
  style: |
    ha-card {
      --icon-color: grey;
      --text-color: grey;
    }
    #verlichting-icon {
      color: var(--text-color);
    }
    #verlichting-icon ha-icon {
      color: var(--icon-color);
    }
    [[[ if (states['light.lamp_helper'].state == 'on') {
          return `
            ha-card {
              --icon-color: green;
              --text-color: green;
            }
          `;
        } else {
          return `
            ha-card {
              --icon-color: red;
              --text-color: red;
            }
          `;
        }
    ]]]
2
  1. You are using JS-like code - but card-mod & markdown accepts jinja.
  2. Go to main card-mod thread → 1st post → link at the bottom → markdown for examples.
3

Hi and thanks for your answer. Will look there!