Динамическая иконка графика в Home Assistant

Изменение цвета иконки на карточке графика (sensor card) в зависимости от состояния другого устройства. Например, иконка температуры бассейна становится оранжевой когда включена фильтрация.

• Home Assistant
• HACS (Home Assistant Community Store)
• card-mod (установить через HACS → Frontend)

1. Открыть HACS → Frontend
2. Поиск: card-mod
3. Установить card-mod
4. Перезагрузить Home Assistant
5. Очистить кэш браузера (Ctrl+Shift+R)

Открыть консоль браузера (F12 → Console) и ввести:

customElements.get('card-mod')

Если возвращает функцию — card-mod установлен корректно.

- type: sensor
  entity: sensor.ваш_датчик
  name: Название
  icon: mdi:иконка
  graph: line
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.ваш_переключатель', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.ваш_переключатель', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }

Иконка оранжевая когда фильтрация включена:

- type: sensor
  entity: sensor.pool_temperature
  name: Бассейн
  icon: mdi:pool-thermometer
  graph: line
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
      }

Иконка красная когда отопление работает:

- type: sensor
  entity: sensor.boiler_temperature
  name: Котел
  icon: mdi:fire
  graph: line
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
      }

Иконка зелёная когда насос работает:

- type: sensor
  entity: sensor.boiler_water_temperature
  name: Бойлер ГВС
  icon: mdi:thermometer
  graph: line
  detail: 1
  card_mod:
    style: |
      :host {
        --paper-item-icon-color: {% if is_state('switch.boiler_pump', 'on') %}lime{% else %}var(--primary-text-color){% endif %} !important;
      }
      ha-card .header .icon {
        color: {% if is_state('switch.boiler_pump', 'on') %}lime{% else %}var(--primary-text-color){% endif %} !important;
      }

Разные цвета для разных состояний:

card_mod:
  style: |
    :host {
      --paper-item-icon-color: 
        {% if is_state('switch.device', 'on') %}
          orange
        {% elif states('sensor.temperature')|float > 30 %}
          red
        {% else %}
          var(--primary-text-color)
        {% endif %} !important;
    }
    ha-card .header .icon {
      color: 
        {% if is_state('switch.device', 'on') %}
          orange
        {% elif states('sensor.temperature')|float > 30 %}
          red
        {% else %}
          var(--primary-text-color)
        {% endif %} !important;
    }

views:
  - title: Климат
    path: climate
    icon: mdi:thermometer
    type: masonry
    cards:
      - type: grid
        columns: 2
        square: false
        cards:
          - type: sensor
            entity: sensor.pool_temperature
            name: Бассейн
            icon: mdi:pool-thermometer
            graph: line
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
                }
                ha-card .header .icon {
                  color: {% if is_state('switch.pool_filtration', 'on') %}orange{% else %}var(--primary-text-color){% endif %} !important;
                }
          - type: sensor
            entity: sensor.boiler_temperature
            name: Котел
            icon: mdi:fire
            graph: line
            card_mod:
              style: |
                :host {
                  --paper-item-icon-color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
                }
                ha-card .header .icon {
                  color: {% if is_state('switch.heating', 'on') %}red{% else %}var(--primary-text-color){% endif %} !important;
                }

Иконка не меняет цвет:

• Очистить кэш браузера (Ctrl+Shift+R)
• Проверить что card-mod установлен
• Проверить правильность entity_id переключателя
• Убедиться что !important присутствует в стилях

Ошибка YAML:

• Проверить отступы (2 пробела)
• Символ | после style: обязателен
• Кавычки в Jinja2 шаблонах должны быть одинарными

• card-mod GitHub
• Home Assistant Templating