Stylování karet

Karta Dreame Vacuum nativně vyhovuje výchozímu tématu Home Assistant. Všechny interní komponenty, nabídky a rozvržení se automaticky přizpůsobují aktivnímu tématu Home Assistant. Bezproblémově zdědí barvy jak Světelného, tak Tmavého režimu dynamicky, takže vlastní úpravy stylu nejsou za standardních podmínek nutné.

Vytvoření vlastního tématu Home Assistant pro přizpůsobení vzhledu zahrnuje přepsání externích CSS vlastností uvedených níže.

Styly mapy

Tato nastavení ovlivňují pouze UI komponenty karty. Přizpůsobení interních barev samotné mapy vysavače, jako jsou místnosti, cesty a stěny, se provádí v sekci Přepsání barev.

Karta také používá interní nastavení s prefixem --dvc-. Přímé přepisování interních nastavení se nedoporučuje, protože jejich chování se může měnit v budoucích aktualizacích. Místo toho se zaměřte na externí nastavení tématu Home Assistant uvedená níže.

card-mod

Plugin card-mod je výslovně zakázán a nepodporován na této kartě, aby byla zajištěna stabilita. Pro přepsání CSS vlastností uvedených na této stránce je nutné použít vlastní motivy Home Assistantu.

Pokud nelze konkrétní vizuální změnu dosáhnout pomocí motivů, lze prostřednictvím stránky Hlášení problémů podat žádost o funkci s vysvětlením požadovaných změn a jejich důvodů.

Pozadí a okraje

Tato nastavení řídí hlavní strukturální vzhled karty.

Proměnná	Popis
--ha-card-background	Definuje hlavní barvu pozadí karty.
--secondary-background-color	Používá se pro sekundární plochy, překryvná pozadí a plovoucí nabídky.
--view-background	Základní barva pozadí panelu. Kartu používá tuto barvu, když je v režimu panel nebo picture pro bezproblémové sloučení.
--ha-card-border-radius	Definuje zakulacení vnějších rohů karty.
--ha-card-border-width	Šířka čáry okraje karty.
--ha-card-border-color	Barva okraje karty.
--divider-color	Barva vnitřních děličů a oddělovačů seznamu.
--ha-card-box-shadow	Stínový efekt aplikovaný na hlavní kontejner karty.
--ha-card-backdrop-filter	Umožňuje přidávat filtry pozadí, jako je blur, na pozadí karty.

Text a typografie

Tato nastavení určují barvy textu používané v celém uživatelském rozhraní.

Proměnná	Popis
--primary-text-color	Hlavní barva textu používaná pro primární nadpisy, stavový text a hodnoty.
--secondary-text-color	Používá se pro sekundární text, podrobné stavy a neaktivní záložky.
--disabled-text-color	Barva používaná pro text, který je momentálně nedostupný nebo zakázaný.
--text-primary-color	Barva textu umístěného přímo na tlačítkách hlavní barvy.

Ikony a akcenty

Tato nastavení spravují barevné provedení interaktivních prvků, aktivních stavů a ikon.

Proměnná	Popis
--primary-color	Hlavní akcentní barva pro aktivní prvky, tlačítka, animace načítání a vybrané záložky.
--light-primary-color	Světlejší verze hlavní barvy, používaná pro stav při přejetí myší nebo pozadí aktivního tlačítka.
--accent-color	Alternativní akcentní barva používaná pro specifická zvýraznění v uživatelském rozhraní.
--mdc-theme-on-primary	Barva textu nebo ikon umístěných na pozadí hlavní barvy.
--paper-item-icon-color	Výchozí barva pro stavové a menu ikony.
--paper-item-icon-active-color	Barva použitá na ikony, když je jejich odpovídající stav aktivní.

Stavové a sémantické barvy

Karta dynamicky mění barvu podle stavu vysavače a aktivních oznámení.

Proměnná	Popis
--success-color	Používá se pro úspěšné operace nebo pozitivní stavy, například když je plně nabitý.
--info-color	Používá se pro informační prvky a standardní upozornění.
--warning-color	Používá se pro výstražná upozornění, nízký stav baterie nebo menší problémy.
--error-color	Používá se pro kritické závady, chyby a neprostupné objekty na mapě.
--state-unavailable-color	Barva indikující, že vysavač je momentálně nedostupný nebo offline.

Interaktivní prvky

Nastavení tématu cílené specificky na UI komponenty jako tlačítka, posuvníky a vstupy.

Proměnná	Popis
--mdc-theme-surface	Barva povrchu pro plovoucí nabídky, rozbalovací seznamy a vyskakovací karty.
--mdc-button-raised-box-shadow	Stín aplikovaný na zvýrazněná tlačítka, aby jim dodal hloubku.
--input-hover-line-color	Barva podtržení při přejetí myší nad konkrétními vstupními poli.
--input-dropdown-icon-color	Barva ikon kurzoru/šipek uvnitř rozbalovacích nabídek.
--scrollbar-thumb-color	Barva používaná pro ovladač joysticku a posuvníků na dálkovém ovládání.
--rgb-primary-color	RGB verze primární barvy oddělená čárkami, používaná k aplikaci alfa průhlednosti.
--rgb-primary-text-color	RGB verze primární barvy textu oddělená čárkami, používaná k aplikaci alfa průhlednosti.