Stilizarea cardului

Cardul Dreame Vacuum respectă în mod nativ tema implicită a Home Assistant. Toate componentele interne, meniurile și layout-urile se adaptează automat la tema activă Home Assistant. Moștenește fără probleme culorile pentru modurile Light și Dark dinamic, ceea ce face inutilă stilizarea personalizată în condiții standard.

Crearea unei teme Home Assistant personalizate pentru a ajusta estetica implică suprascrierea proprietăților CSS externe listate mai jos.

Stilizarea hărții

Aceste setări afectează doar componentele UI ale cardului. Personalizarea culorilor interne ale hărții aspiratorului în sine, cum ar fi camerele, traseele și pereții, se realizează în secțiunea Suprascrierea culorilor.

Cardul utilizează, de asemenea, setări interne prefixate cu --dvc-. Suprascrierea directă a setărilor interne nu este recomandată, deoarece comportamentul acestora se poate schimba în actualizările viitoare. Se recomandă să vizați setările externe ale temei Home Assistant listate mai jos.

card-mod

Plugin-ul card-mod este în mod explicit dezactivat și nu este acceptat pe această carte pentru a asigura stabilitatea. Temele personalizate Home Assistant trebuie utilizate pentru a suprascrie proprietățile CSS furnizate pe această pagină.

Dacă o modificare vizuală specifică nu poate fi realizată prin teme, se poate trimite o cerere de funcție explicând modificările dorite și motivul acestora prin pagina Raportare probleme.

Fundaluri și margini

Aceste setări controlează aspectul structural principal al cartelei.

Variabilă	Descriere
--ha-card-background	Definește culoarea principală de fundal a cartelei.
--secondary-background-color	Utilizat pentru suprafețe secundare, fundaluri de suprapunere și meniuri plutitoare.
--view-background	Culoarea de fundal de bază a tabloului de bord. Cartea o folosește în modul panel sau picture pentru a se integra perfect.
--ha-card-border-radius	Definește rotunjimea colțurilor exterioare ale cartelei.
--ha-card-border-width	Lățimea liniei de margine a cartelei.
--ha-card-border-color	Culoarea marginii cartelei.
--divider-color	Culoarea divizoarelor și separatoarelor interne ale listei.
--ha-card-box-shadow	Umbra cutiei aplicată containerului principal al cartelei.
--ha-card-backdrop-filter	Permite adăugarea de filtre de fundal, cum ar fi blur, în fundalul cardului.

Text & Tipografie

Aceste setări dictează culorile textului folosite în întreaga interfață de utilizator.

Variabilă	Descriere
--primary-text-color	Culoarea principală a textului folosită pentru titlurile principale, textul de stare și valori.
--secondary-text-color	Folosit pentru text secundar, stări detaliate și etichete de tab inactive.
--disabled-text-color	Culoarea utilizată pentru textul care în prezent nu este disponibil sau este dezactivat.
--text-primary-color	Culoarea textului plasat direct deasupra butoanelor cu culoare primară.

Icoane & Accente

Aceste setări gestionează colorarea elementelor interactive, stările active și pictogramele.

Variabilă	Descriere
--primary-color	Culoarea accent primară pentru elemente active, butoane, animații de încărcare și tab-uri selectate.
--light-primary-color	O versiune mai deschisă a culorii primare, folosită pentru stările de hover sau fundalul butonului activ.
--accent-color	Culoare de accent alternativă folosită pentru evidențieri specifice în interfața UI.
--mdc-theme-on-primary	Culoarea textului sau a pictogramelor plasate pe un fundal cu culoare primară.
--paper-item-icon-color	Culoarea implicită pentru pictogramele de stare și meniuri.
--paper-item-icon-active-color	Culoarea aplicată pictogramelor atunci când starea corespunzătoare este activă.

Culoare de stare și semnificativă

Cardul își schimbă dinamica culoarea în funcție de starea aspiratorului și notificările active.

Variabilă	Descriere
--success-color	Folosit pentru operațiuni reușite sau stări pozitive, cum ar fi încărcarea completă.
--info-color	Folosit pentru elemente informative și alerte standard.
--warning-color	Folosit pentru alerte de avertizare, stări de baterie scăzută sau probleme minore.
--error-color	Folosit pentru defecțiuni critice, erori și obiecte de pe hartă care nu pot fi traversate.
--state-unavailable-color	Culoarea care indică că aspiratorul este momentan indisponibil sau offline.

Elemente interactive

Setările temei care vizează în mod specific componentele UI cum ar fi butoanele, bara de defilare și câmpurile de input.

Variabilă	Descriere
--mdc-theme-surface	Culoarea suprafeței pentru meniuri plutitoare, dropdown-uri și carduri popup.
--mdc-button-raised-box-shadow	Umbra aplicată butoanelor ridicate pentru a le conferi adâncime.
--input-hover-line-color	Culoarea liniei de subliniere la trecerea cursorului peste anumite câmpuri de input.
--input-dropdown-icon-color	Culoarea pictogramelor săgeată/caret din interiorul meniurilor dropdown.
--scrollbar-thumb-color	Culoarea folosită pentru cursorul joystick-ului telecomenzii și barierele de derulare.
--rgb-primary-color	Versiunea culorii primare separată prin virgule RGB, utilizată pentru aplicarea transparenței alpha.
--rgb-primary-text-color	Versiunea culorii textului primar separată prin virgule RGB, utilizată pentru aplicarea transparenței alpha.