Оформление карт

Карта Dreame Vacuum изначально поддерживает стандартную тему Home Assistant. Все внутренние компоненты, меню и макеты автоматически адаптируются к активной теме Home Assistant. Она бесшовно наследует цвета Light и Dark режимов динамически, что делает индивидуальное оформление ненужным в стандартных условиях.

Создание пользовательской темы Home Assistant для настройки эстетики включает переопределение внешних CSS-свойств, перечисленных ниже.

Стилизация карты

Эти настройки влияют только на элементы интерфейса карты. Настройка внутренних цветов самой карты пылесоса, таких как комнаты, пути и стены, осуществляется в разделе Переопределение цветов.

Карта также использует внутренние настройки с префиксом --dvc-. Прямое переопределение внутренних настроек не рекомендуется, так как их поведение может измениться в будущих обновлениях. Вместо этого следует нацеливаться на внешние настройки темы Home Assistant, перечисленные ниже.

card-mod

Плагин card-mod явно отключен и не поддерживается на этой карте для обеспечения стабильности. Пользовательские темы Home Assistant должны использоваться для переопределения CSS-свойств, указанных на этой странице.

Если конкретное визуальное изменение не может быть достигнуто с помощью тем, запрос на добавление функции с объяснением желаемых изменений и их обоснованием может быть отправлен через страницу Сообщение о проблеме.

Фоны и границы

Эти настройки управляют основной структурной внешностью карты.

Переменная	Описание
--ha-card-background	Определяет основной цвет фона карты.
--secondary-background-color	Используется для вторичных поверхностей, фонов наложений и плавающих меню.
--view-background	Базовый цвет фона панели управления. Карта использует его в режимах panel или picture для плавного слияния.
--ha-card-border-radius	Определяет закругление внешних углов карты.
--ha-card-border-width	Ширина линии границы карты.
--ha-card-border-color	Цвет границы карты.
--divider-color	Цвет внутренних разделителей и секций списка.
--ha-card-box-shadow	Тень (box-shadow), применяемая к основному контейнеру карты.
--ha-card-backdrop-filter	Позволяет добавлять фильтры заднего плана, такие как blur, к фону карточки.

Текст и типографика

Эти настройки определяют цвета текста, используемые во всем пользовательском интерфейсе.

Переменная	Описание
--primary-text-color	Основной цвет текста, используемый для основных заголовков, состояния текста и значений.
--secondary-text-color	Используется для второстепенного текста, подробных статусов и неактивных вкладок.
--disabled-text-color	Цвет текста, который в данный момент недоступен или отключен.
--text-primary-color	Цвет текста, размещенного непосредственно поверх кнопок основного цвета.

Иконки и акценты

Эти настройки управляют окраской интерактивных элементов, активных состояний и иконок.

Переменная	Описание
--primary-color	Основной акцентный цвет для активных элементов, кнопок, анимаций загрузки и выбранных вкладок.
--light-primary-color	Более светлая версия основного цвета, используемая для состояний наведения или фона активной кнопки.
--accent-color	Альтернативный акцентный цвет, используемый для определенных выделений в интерфейсе.
--mdc-theme-on-primary	Цвет текста или иконок, размещенных поверх фона основного цвета.
--paper-item-icon-color	Цвет по умолчанию для иконок состояния и меню.
--paper-item-icon-active-color	Цвет, применяемый к иконкам, когда соответствующее состояние активно.

Цвета статуса и семантические цвета

Карточка динамически меняет цвет в зависимости от состояния робота-пылесоса и активных уведомлений.

Переменная	Описание
--success-color	Используется для успешных операций или положительных состояний, таких как полная зарядка.
--info-color	Используется для информационных элементов и стандартных предупреждений.
--warning-color	Используется для предупреждающих сигналов, низкого заряда батареи или незначительных проблем.
--error-color	Используется для критических ошибок, сбоев и непроходимых объектов на карте.
--state-unavailable-color	Цвет, указывающий на то, что пылесос в данный момент недоступен или офлайн.

Интерактивные элементы

Настройки темы, специально нацеленные на элементы интерфейса, такие как кнопки, полосы прокрутки и поля ввода.

Переменная	Описание
--mdc-theme-surface	Цвет поверхности для плавающих меню, выпадающих списков и всплывающих карточек.
--mdc-button-raised-box-shadow	Тень, применяемая к приподнятым кнопкам, чтобы придать им глубину.
--input-hover-line-color	Цвет подчеркивания при наведении на определенные поля ввода.
--input-dropdown-icon-color	Цвет каретки/стрелок внутри выпадающих меню.
--scrollbar-thumb-color	Цвет, используемый для ручки джойстика пульта дистанционного управления и полос прокрутки.
--rgb-primary-color	RGB-версия основного цвета через запятую, используется для применения альфа-прозрачности.
--rgb-primary-text-color	RGB-версия основного цвета текста через запятую, используется для применения альфа-прозрачности.