Stylowanie kart

Karta Dreame Vacuum natywnie obsługuje domyślny motyw Home Assistant. Wszystkie wewnętrzne komponenty, menu i układy automatycznie dostosowują się do aktywnego motywu Home Assistant. Płynnie dziedziczy kolory zarówno w trybie Light, jak i Dark, co sprawia, że niestandardowe stylizacje są niepotrzebne w standardowych warunkach.

Tworzenie niestandardowego motywu Home Assistant w celu dostosowania estetyki wymaga nadpisania zewnętrznych właściwości CSS wymienionych poniżej.

Stylizacja mapy

Te ustawienia dotyczą tylko komponentów UI karty. Dostosowywanie wewnętrznych kolorów samej mapy odkurzacza, takich jak pokoje, ścieżki i ściany, odbywa się w sekcji Nadpisywanie kolorów.

Karta używa również wewnętrznych ustawień poprzedzonych prefiksem --dvc-. Bezpośrednie nadpisywanie ustawień wewnętrznych nie jest zalecane, ponieważ ich działanie może się zmienić w przyszłych aktualizacjach. Zamiast tego należy kierować się zewnętrznymi ustawieniami motywu Home Assistant wymienionymi poniżej.

card-mod

Wtyczka card-mod jest wyraźnie wyłączona i nieobsługiwana na tej karcie w celu zapewnienia stabilności. Niestandardowe motywy Home Assistant muszą być używane, aby zastąpić właściwości CSS udostępnione na tej stronie.

Jeśli konkretna zmiana wizualna nie może zostać osiągnięta za pomocą motywów, można przesłać prośbę o funkcję, wyjaśniającą pożądane zmiany i powody ich wprowadzenia, za pośrednictwem strony Raportowanie problemów.

Tła i Ramki

Te ustawienia kontrolują główny wygląd strukturalny karty.

Zmienna	Opis
--ha-card-background	Definiuje główny kolor tła karty.
--secondary-background-color	Używane dla powierzchni pomocniczych, tła nakładek i unoszących się menu.
--view-background	Podstawowy kolor tła pulpitów nawigacyjnych. Karta używa go w trybie panel lub picture, aby płynnie się wtapiał.
--ha-card-border-radius	Definiuje zaokrąglenie zewnętrznych narożników karty.
--ha-card-border-width	Szerokość linii obramowania karty.
--ha-card-border-color	Kolor ramki karty.
--divider-color	Kolor wewnętrznych dzielników i separatorów list.
--ha-card-box-shadow	Cień pudełka stosowany do głównego kontenera karty.
--ha-card-backdrop-filter	Pozwala na dodawanie filtrów tła, takich jak blur, do tła karty.

Tekst i typografia

Te ustawienia określają kolory tekstu używane w całym interfejsie użytkownika.

Zmienna	Opis
--primary-text-color	Główny kolor tekstu używany dla nagłówków głównych, tekstu stanu i wartości.
--secondary-text-color	Używany dla tekstu pomocniczego, szczegółowych statusów i nieaktywnych etykiet kart.
--disabled-text-color	Kolor używany dla tekstu, który jest obecnie niedostępny lub wyłączony.
--text-primary-color	Kolor tekstu umieszczonego bezpośrednio na przyciskach w kolorze podstawowym.

Ikony i akcenty

Te ustawienia zarządzają kolorowaniem elementów interaktywnych, stanów aktywnych i ikon.

Zmienna	Opis
--primary-color	Główny kolor akcentu dla aktywnych elementów, przycisków, animacji ładowania i wybranych kart.
--light-primary-color	Jaśniejsza wersja koloru podstawowego, używana dla stanów najechania kursorem lub tła aktywnych przycisków.
--accent-color	Alternatywny kolor akcentu używany dla określonych wyróżnień w interfejsie użytkownika.
--mdc-theme-on-primary	Kolor tekstu lub ikon umieszczonych na tle w kolorze podstawowym.
--paper-item-icon-color	Domyślny kolor dla ikon stanu i menu.
--paper-item-icon-active-color	Kolor stosowany na ikonach, gdy ich odpowiadający stan jest aktywny.

Kolory statusu i semantyczne

Karta dynamicznie zmienia kolor w zależności od stanu odkurzacza i aktywnych powiadomień.

Zmienna	Opis
--success-color	Stosowany do oznaczania udanych operacji lub pozytywnych stanów, np. pełnego naładowania.
--info-color	Stosowany do elementów informacyjnych i standardowych alertów.
--warning-color	Stosowany do ostrzegawczych alertów, niskiego poziomu baterii lub drobnych problemów.
--error-color	Stosowany do krytycznych usterek, błędów i nieprzejezdnych obiektów na mapie.
--state-unavailable-color	Kolor wskazujący, że odkurzacz jest obecnie niedostępny lub offline.

Elementy interaktywne

Ustawienia motywu konkretne dla komponentów UI, takich jak przyciski, paski przewijania i pola wprowadzania.

Zmienna	Opis
--mdc-theme-surface	Kolor powierzchni dla wysuwanych menu, rozwijanych list i kart popup.
--mdc-button-raised-box-shadow	Cień stosowany przy przyciskach unoszonych, aby nadać im głębi.
--input-hover-line-color	Kolor podkreślenia przy najechaniu na określone pola wprowadzania.
--input-dropdown-icon-color	Kolor ikon kursora/strzałek wewnątrz rozwijanych menu.
--scrollbar-thumb-color	Kolor używany dla wskaźnika joysticka pilota i pasków przewijania.
--rgb-primary-color	Wersja głównego koloru w formacie RGB, rozdzielona przecinkami, używana do stosowania przezroczystości alfa.
--rgb-primary-text-color	Wersja głównego koloru tekstu w formacie RGB, rozdzielona przecinkami, używana do stosowania przezroczystości alfa.