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

Карта пилососа Dreame нативно сумісна зі стандартною темою Home Assistant. Всі внутрішні компоненти, меню та розташування автоматично підлаштовуються під активну тему Home Assistant. Вона безшовно наслідує кольори як Light, так і Dark режимів динамічно, роблячи налаштування власного стилю непотрібним за стандартних умов.

Створення власної теми Home Assistant для налаштування зовнішнього вигляду передбачає переписування зовнішніх CSS-властивостей, перелічених нижче.

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

Ці налаштування впливають лише на компоненти інтерфейсу карти. Налаштування внутрішніх кольорів самої карти пилососа, таких як кімнати, шляхи та стіни, здійснюється в розділі Перевизначення кольорів.

Карта також використовує внутрішні налаштування з префіксом --dvc-. Пряме перевизначення внутрішніх налаштувань не рекомендується, оскільки їх поведінка може змінюватися в майбутніх оновленнях. Орієнтуйтеся натомість на налаштування зовнішньої теми Home Assistant, наведені нижче.

card-mod

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

Якщо конкретні візуальні зміни не можуть бути досягнуті за допомогою тем, запит на функцію з поясненням бажаних змін та їх обґрунтуванням можна подати через сторінку Звіт про проблему.

Фони та межі

Ці налаштування контролюють основний структурний вигляд карти.

Змінна	Опис
--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	Тінь, застосована до основного контейнера карти.
--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 у версії через кому основного кольору тексту, використовується для застосування прозорості альфа.