Štýl kariet

Karta Dreame Vacuum natívne podporuje predvolenú tému Home Assistant. Všetky interné komponenty, menu a rozloženia sa automaticky prispôsobujú aktívnej téme Home Assistant. Plynule preberá farby režimov Light a Dark dynamicky, čo robí vlastné štýlovanie zbytočné za štandardných podmienok.

Vytvorenie vlastnej témy Home Assistant na prispôsobenie estetického vzhľadu zahŕňa prepísanie externých vlastností CSS uvedených nižšie.

Štýlovanie mapy

Tieto nastavenia ovplyvňujú iba komponenty používateľského rozhrania karty. Prispôsobenie vnútorných farieb samotnej mapy vysávača, ako sú miestnosti, cesty a steny, sa rieši v sekcii Prepísanie farieb.

Karta tiež používa interné nastavenia s predponou --dvc-. Priame prepísanie interných nastavení sa neodporúča, pretože ich správanie sa môže v budúcich aktualizáciách zmeniť. Miesto toho cielte na externé nastavenia témy Home Assistant uvedené nižšie.

card-mod

Plugin card-mod je výslovne zakázaný a nepodporovaný na tejto karte, aby sa zabezpečila stabilita. Na prekrytie CSS vlastností uvedených na tejto stránke musia byť použité vlastné témy Home Assistant.

Ak konkrétnu vizuálnu zmenu nie je možné dosiahnuť prostredníctvom tém, môže byť zaslaná žiadosť o funkciu, ktorá vysvetlí požadované zmeny a dôvody za nimi, cez stránku Hlásenie problémov.

Pozadia a okraje

Tieto nastavenia ovládajú hlavný štrukturálny vzhľad karty.

Premenná	Popis
--ha-card-background	Definuje hlavnúfarbu pozadia karty.
--secondary-background-color	Používa sa pre sekundárne plochy, pozadia prekrytia a vznášajúce sa menu.
--view-background	Základná farba pozadia dashboardu. Karta používa túto farbu, keď je v režime panel alebo picture, aby sa hladko zladila.
--ha-card-border-radius	Definuje zaoblenie vonkajších rohov karty.
--ha-card-border-width	Šírka čiary ohraničenia karty.
--ha-card-border-color	Farba ohraničenia karty.
--divider-color	Farba vnútorných deliacech čiar a oddeľovačov zoznamov.
--ha-card-box-shadow	Tieň (box-shadow) aplikovaný na hlavný kontajner karty.
--ha-card-backdrop-filter	Umožňuje pridávať filtre pozadia, ako je blur, na pozadie karty.

Text a typografia

Tieto nastavenia určujú farby textu používané v celom používateľskom rozhraní.

Premenná	Popis
--primary-text-color	Hlavná farba textu používaná pre primárne nadpisy, stavový text a hodnoty.
--secondary-text-color	Používaná pre sekundárny text, podrobné stavy a neaktívne záložky.
--disabled-text-color	Farba používaná pre text, ktorý momentálne nie je k dispozícii alebo je zakázaný.
--text-primary-color	Farba textu na primárne sfarbených tlačidlách.

Ikony a akcenty

Tieto nastavenia spravujú farby interaktívnych prvkov, aktívnych stavov a ikon.

Premenná	Popis
--primary-color	Primárna akcentná farba pre aktívne prvky, tlačidlá, animácie načítania a vybrané záložky.
--light-primary-color	Svetlejšia verzia primárnej farby, používaná pre stav pri prejdení myšou alebo pozadia aktívneho tlačidla.
--accent-color	Alternatívna akcentná farba používaná pre špecifické zvýraznenia v UI.
--mdc-theme-on-primary	Farba textu alebo ikon umiestnených na primárnom farebnom pozadí.
--paper-item-icon-color	Predvolená farba pre stavové a menu ikony.
--paper-item-icon-active-color	Farba použitá na ikonách, keď je ich zodpovedajúci stav aktívny.

Stavové a sémantické farby

Karta dynamicky mení farbu na základe stavu vysávača a aktívnych oznámení.

Premenná	Popis
--success-color	Používa sa pre úspešné operácie alebo pozitívne stavy, napríklad plné nabitie.
--info-color	Používa sa pre informačné prvky a štandardné upozornenia.
--warning-color	Používa sa pre varovné upozornenia, nízke stavy batérie alebo menšie problémy.
--error-color	Používa sa pre kritické chyby, poruchy a neprejdené objekty na mape.
--state-unavailable-color	Farba indikujúca, že vysávač je momentálne nedostupný alebo offline.

Interaktívne prvky

Nastavenia témy cielene na komponenty používateľského rozhrania ako tlačidlá, posuvníky a vstupy.

Premenná	Popis
--mdc-theme-surface	Farba povrchu pre plávajúce menu, rozbaľovacie ponuky a vyskakovacie karty.
--mdc-button-raised-box-shadow	Tieň aplikovaný na zdvihnuté tlačidlá, aby im dodal hĺbku.
--input-hover-line-color	Farba podčiarknutia pri prejdení nad určitými vstupnými poľami.
--input-dropdown-icon-color	Farba kurzora/šipiek v rámci rozbaľovacích menu.
--scrollbar-thumb-color	Farba používaná pre ovládací prvok (thumb) joysticku diaľkového ovládača a posuvníkov.
--rgb-primary-color	RGB verzia primárnej farby oddelená čiarkami, používa sa na použitie alfa priehľadnosti.
--rgb-primary-text-color	RGB verzia primárnej farby textu oddelená čiarkami, používa sa na použitie alfa priehľadnosti.