Kártya stílus

A Dreame Vacuum Card alapértelmezetten kompatibilis a Home Assistant alapértelmezett témájával. Minden belső összetevő, menü és elrendezés automatikusan alkalmazkodik az aktív Home Assistant témához. Zökkenőmentesen örökli mind a Világos, mind a Sötét mód színeit dinamikusan, így egyedi stílusra nincs szükség az alapértelmezett körülmények között.

Egy egyedi Home Assistant téma létrehozása az esztétika testreszabásához a külső CSS tulajdonságok alábbi felülírását igényli.

Térkép stílus

Ezek a beállítások csak a kártya UI összetevőit érintik. A robotporszívó térképének belső színeinek testreszabása, például a szobák, utak és falak, a Színek felülírása szakaszban történik.

A kártya belső beállításokat is használ, --dvc- előtaggal. A belső beállítások közvetlen felülírása nem ajánlott, mivel működésük a jövőbeli frissítések során változhat. Ehelyett a lenti külső Home Assistant téma beállításokat célozza meg.

card-mod

A card-mod bővítmény kifejezetten letiltott és nem támogatott ezen a kártyán a stabilitás biztosítása érdekében. Egyéni Home Assistant témákat kell használni a jelen oldalon megadott CSS tulajdonságok felülbírálásához.

Ha egy konkrét vizuális változtatás nem érhető el témákon keresztül, egy funkciókérést lehet benyújtani, amely részletezi a kívánt változtatásokat és azok indoklását a Hibabejelentés oldalon.

Háttér és keretek

Ezek a beállítások a kártya fő szerkezeti megjelenését szabályozzák.

Változó	Leírás
--ha-card-background	Meghatározza a kártya fő háttérszínét.
--secondary-background-color	Másodlagos felületekhez, átfedő háttérhez és lebegő menükhöz használható.
--view-background	A műszerfal alap háttérszíne. A kártya ezt használja panel vagy picture módban a zökkenőmentes összeolvadáshoz.
--ha-card-border-radius	Meghatározza a kártya külső sarkainak kerekítését.
--ha-card-border-width	A kártya keretevonalának szélessége.
--ha-card-border-color	A kártya keretének színe.
--divider-color	A belső listapunktok és elválasztók színe.
--ha-card-box-shadow	A fő kártya konténerére alkalmazott dobozárnyék.
--ha-card-backdrop-filter	Lehetővé teszi hátterek szűrőinek, például blur hozzáadását a kártya hátteréhez.

Szöveg & Tipográfia

Ezek a beállítások szabályozzák a felhasználói felületen használt szövegszíneket.

Változó	Leírás
--primary-text-color	A fő szövegszín, amelyet elsődleges címekhez, állapotszövegekhez és értékekhez használnak.
--secondary-text-color	Másodlagos szövegekhez, részletes állapotokhoz és inaktív fülcímkékhez használt szín.
--disabled-text-color	A szín, amely az aktuálisan nem elérhető vagy letiltott szöveghez van rendelve.
--text-primary-color	Az a szín, amelyet közvetlenül az elsődleges színű gombokon lévő szövegre alkalmaznak.

Ikonok & Kiemelések

Ezek a beállítások az interaktív elemek, aktív állapotok és ikonok színezését kezelik.

Változó	Leírás
--primary-color	Az aktív elemek, gombok, betöltő animációk és kiválasztott fülek elsődleges kiemelő színe.
--light-primary-color	Az elsődleges szín világosabb változata, amelyet lebegő állapotokhoz vagy aktív gombháttérhez használnak.
--accent-color	Alternatív kiemelő szín, amelyet a felhasználói felületen bizonyos kiemelésekhez használnak.
--mdc-theme-on-primary	Az elsődleges színű háttérre helyezett szöveg vagy ikon színe.
--paper-item-icon-color	Az állapot- és menüikonok alapértelmezett színe.
--paper-item-icon-active-color	Az ikonokra alkalmazott szín, amikor a megfelelő állapotuk aktív.

Állapot- és szemantikus színek

A kártya dinamikusan változtatja a színét a porszívó állapota és az aktív értesítések alapján.

Változó	Leírás
--success-color	Sikeres műveletekhez vagy pozitív állapotokhoz használatos, például teljesen feltöltött akkumulátor esetén.
--info-color	Információs elemekhez és normál figyelmeztetésekhez használatos.
--warning-color	Figyelmeztető értesítésekhez, alacsony akkumulátor állapothoz vagy kisebb problémákhoz használatos.
--error-color	Kritikus hibákhoz, hibákhoz és járhatatlan térképelemekhez használatos.
--state-unavailable-color	A szín, ami azt jelzi, hogy a porszívó jelenleg nem elérhető vagy offline.

Interaktív elemek

A téma beállításai kifejezetten az olyan felhasználói felületi komponenseket célozzák, mint a gombok, görgetősávok és beviteli mezők.

Változó	Leírás
--mdc-theme-surface	A felület színe lebegő menükhöz, legördülő listákhoz és felugró kártyákhoz.
--mdc-button-raised-box-shadow	Az árnyék, amelyet a kiemelt gombokra alkalmaznak, hogy mélységet adjon nekik.
--input-hover-line-color	Az aláhúzás színe, amikor egy adott beviteli mező fölé viszi az egeret.
--input-dropdown-icon-color	A kurzor/nyíl ikonok színe a legördülő menükben.
--scrollbar-thumb-color	A szín, amelyet a távirányító joystickjának hüvelykujj részéhez és a görgetősávokhoz használnak.
--rgb-primary-color	A fő szín RGB, vesszővel elválasztott verziója, alfa átlátszóság alkalmazásához.
--rgb-primary-text-color	A fő szövegszín RGB, vesszővel elválasztott verziója, alfa átlátszóság alkalmazásához.