Содержание
Card-mod — одно из самых популярных дополнений для Home Assistant, предназначенное для гибкой кастомизации интерфейса Lovelace. Благодаря этому инструменту вы получаете мощный доступ к CSS для изменения внешнего вида абсолютно любой карточки, сущности или панели.
Основные изменения в версии 4.0.0
Последний крупный релиз Card-mod 4.0.0 приносит массу важных изменений:
- Изменена стратегия патчинга: вместо прямой работы с <ha-card> стили теперь преимущественно применяются к <hui-card>. Это упрощает стилизацию и избавляет от лишних обёрток в большинстве сценариев.
- Взаимодействие с классами: теперь, если вы раньше использовали ha-card.myClass { … }, стиль рекомендуется переписать на :host(.myClass) ha-card { … }.
- mod-card не поддерживает «голый» style: все стили должны быть внутри блока card_mod.
- Поддержка бейджей (<hui-badge>) и различных элементов системы, включая топ-панель, интерфейсные панели, диалоги и др.
- Повышена производительность: теперь не происходит избыточный поиск по отключённым от DOM элементам, предотвращается двойное патчирование.
- Поддержка переменных-шаблонов: внутри стилей можно использовать jinja2-переменные, такие как пользователь, текущий URL и пр.
Это значительно расширяет возможности для динамического и контекстуального оформления интерфейса.
Примеры использования
Базовая стилизация карточек
Вы можете просто добавить в карточку блок card_mod и задать практически любой CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
type: entities title: Свет в комнате card_mod: style: | ha-card { background-color: teal; color: white; border-radius: 15px; box-shadow: 2px 2px 10px #00000055; } entities: - entity: light.bed_light - entity: light.ceiling_lights |
Классическая карточка entities с зелёным фоном, белым текстом и скруглёнными углами
Персонализация отдельных сущностей
Card-mod позволяет кастомизировать стиль для каждой сущности в списковых карточках:
|
1 2 3 4 5 6 7 8 9 10 |
type: entities entities: - entity: light.bed_light card_mod: style: | :host { color: red; } - entity: light.ceiling_lights card_mod: style: | :host { color: green; } |
В списке устройств иконки и тексты подсвечены индивидуально, первая — красным, вторая — зелёным.
Смена иконки и её цвета
Возможности card-mod позволяют менять иконки и их цвета:
|
1 2 3 4 5 6 7 |
- entity: light.bed_light card_mod: style: | :host { --card-mod-icon: mdi:bed; --card-mod-icon-color: orange; } |
Иконка лампы заменена на иконку кровати и покрашена в оранжевый цвет.
Стилизация с обходом Shadow DOM
Shadow DOM — камень преткновения для всех, кто хочет продвинутый контроль. Card-mod позволяет использовать синтаксис $ для доступа к элементам внутри shadow-root.
|
1 2 3 4 5 6 |
card_mod: style: "ha-markdown$": | h3 { color: purple; } ".": | ha-card { background: teal; } |
Окрашенный заголовок внутри markdown карточки и цвет фона.
Динамические стилизации с шаблонами
Card-mod позволяет использовать шаблоны на основе состояния или контекста:
|
1 2 3 4 5 |
card_mod: style: | ha-card { background: {% if is_state('sun.sun', 'above_horizon') %}gold{% else %}navy{% endif %}; } |
Цвет фона меняется в зависимости от времени суток.
Card-mod и темы: суперзаряд для интерфейса
Интеграция с темами позволяет создавать невероятно гибкий дизайн: анимированные границы, динамические иконки, фоновые градиенты и пр.
|
1 2 3 4 5 6 |
# Пример темы с использованием card-mod homeassistant: themes: custom_theme: card-mod-background: 'linear-gradient(to right, #00f, #0ff)' card-mod-border: '3px dashed red' |
Заключение и рекомендации
Card-mod — мощный инструмент по кастомизации интерфейса Home Assistant, позволяющий создавать уникальные, красивые и функциональные панели. Он подходит как для простых цветов и шрифтов, так и для сложных анимаций, градиентов и динамических шаблонов.
Дополнительные ресурсы
- Обновления и релизы: Скачать последние версии и ознакомиться с changelog можно на официальной странице релизов.
- Полный функционал: Документация и примеры использования доступны на странице дополнения.
