Dynamic colors

Hi, I need your help. I can’t get the temperature and humidity text to change color.

See: 🔹 Card-mod - Add css styles to any lovelace card - #1396 by Ildar_Gabdullin

Hello Giuseppe2025,

Welcome to the Home Assistant Forum.

Could you share what you have done so far, it would help us help you better. How to help us help you - or How to ask a good question

1 Like

type: picture-elements
image: /local/pianta-1.png
elements:

  • type: state-label
    entity: sensor.lanyard_mini_hygrometer_0e72_temperature
    style:
    top: 70%
    left: 40%
    font-size: 14px
    font-weight: bold
    text-shadow: 1px 1px 2px black
    color: |
    [[[
    const t = parseFloat(entity.state);
    if (isNaN(t)) return ‘white’;
    if (t <= 18) return ‘#00bcd4’;
    if (t <= 23) return ‘#00e676’;
    if (t <= 27) return ‘#ff9800’;
    return ‘#f44336’;
    ]]]
  • type: state-label
    entity: sensor.lanyard_mini_hygrometer_0e72_humidity
    style:
    top: 75%
    left: 40%
    font-size: 13px
    text-shadow: 1px 1px 2px black
    color: |
    [[[
    const h = parseFloat(entity.state);
    if (isNaN(h)) return ‘white’;
    if (h <= 40) return ‘#2196f3’;
    if (h <= 60) return ‘#00e676’;
    return ‘#8e24aa’;
    ]]]

https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371#oneone-format-it-properly-16

You are trying to use a code from smth like a custom:button-card , but this code cannot be used here. Follow the link which was provided earlier, find there a “picture elements” section. Alternatively, google “picture elements small tutorial” → 1st post → smth like “how to style dynamically or conditionally”.