Stil kartica

Dreame Vacuum Card izvorno je usklađen s zadanom temom Home Assistant-a. Svi interni elementi, izbornici i rasporedi automatski se prilagođavaju aktivnoj temi Home Assistant-a. Besprijekorno nasljeđuje boje Light i Dark načina rada dinamički, čineći prilagođeno oblikovanje nepotrebnim u standardnim uvjetima.

Izrada prilagođene teme Home Assistant-a za prilagodbu estetike uključuje nadjačavanje vanjskih CSS svojstava navedenih u nastavku.

Stiliziranje karte

Ove postavke utječu samo na UI komponente kartice. Prilagodba unutarnjih boja same karte usisavača, kao što su sobe, putanje i zidovi, upravlja se u odjeljku Nadjačavanje boja.

Kartica također koristi interne postavke s prefiksom --dvc-. Neprepoznavanje direktnog nadjačavanja internih postavki se ne preporučuje, jer se njihovo ponašanje može promijeniti u budućim ažuriranjima. Umjesto toga, ciljate vanjske postavke teme Home Assistant-a navedene u nastavku.

card-mod

Plugin card-mod je izričito onemogućen i nije podržan na ovoj kartici kako bi se osigurala stabilnost. Za premošćivanje CSS svojstava navedenih na ovoj stranici moraju se koristiti prilagođene teme Home Assistanta.

Ako se određena vizualna promjena ne može postići putem tema, zahtjev za značajku koji objašnjava željene promjene i razlog za njih može se podnijeti putem Prijava problema stranice.

Pozadine i Okviri

Ove postavke kontroliraju glavni strukturni izgled kartice.

Varijabla	Opis
--ha-card-background	Definira glavnu boju pozadine kartice.
--secondary-background-color	Koristi se za sekundarne površine, pozadine preko slojeva i plutajuće izbornike.
--view-background	Osnovna boja pozadine nadzorne ploče. Kartica koristi ovu boju kada je u panel ili picture načinu rada kako bi se besprijekorno uklopila.
--ha-card-border-radius	Definira zaobljenost vanjskih kutova kartice.
--ha-card-border-width	Širina linije okvira kartice.
--ha-card-border-color	Boja okvira kartice.
--divider-color	Boja unutarnjih linijskih razdjelnika i separatora.
--ha-card-box-shadow	Sjena okvira koja se primjenjuje na glavni spremnik kartice.
--ha-card-backdrop-filter	Omogućuje dodavanje filtera pozadine, poput blur, na pozadinu kartice.

Tekst i tipografija

Ove postavke određuju boje teksta koje se koriste u cijelom korisničkom sučelju.

Varijabla	Opis
--primary-text-color	Glavna boja teksta koja se koristi za primarne naslove, tekst stanja i vrijednosti.
--secondary-text-color	Koristi se za sekundarni tekst, detaljne statuse i oznake neaktivnih kartica.
--disabled-text-color	Boja se koristi za tekst koji trenutno nije dostupan ili je onemogućen.
--text-primary-color	Boja teksta koji se nalazi direktno na gumbima primarne boje.

Ikone i naglasci

Ove postavke upravljaju bojama interaktivnih elemenata, aktivnih stanja i ikona.

Varijabla	Opis
--primary-color	Primarna naglašena boja za aktivne elemente, gumbe, animacije učitavanja i odabrane kartice.
--light-primary-color	Svjetlija verzija primarne boje, koristi se za hover stanja ili pozadine aktivnih gumba.
--accent-color	Alternativna boja naglaska koristi se za određena isticanja u sučelju.
--mdc-theme-on-primary	Boja teksta ili ikona postavljenih na pozadini primarne boje.
--paper-item-icon-color	Zadana boja za ikone stanja i izbornika.
--paper-item-icon-active-color	Boja primijenjena na ikone kada je njihovo odgovarajuće stanje aktivno.

Statusne i semantičke boje

Kartica dinamički mijenja boju ovisno o stanju usisavača i aktivnim obavijestima.

Varijabla	Opis
--success-color	Koristi se za uspješne operacije ili pozitivna stanja, poput potpuno napunjenog uređaja.
--info-color	Koristi se za informativne elemente i standardna upozorenja.
--warning-color	Koristi se za upozorenja, stanje niske baterije ili manje probleme.
--error-color	Koristi se za kritične pogreške, greške i nepristupačne objekte na karti.
--state-unavailable-color	Boja koja označava da je usisavač trenutno nedostupan ili izvan mreže.

Interaktivni elementi

Postavke teme posebno usmjerene na UI komponente poput gumba, kliznih traka i unosa.

Varijabla	Opis
--mdc-theme-surface	Boja površine za lebdeće izbornike, padajuće izbornike i skočne kartice.
--mdc-button-raised-box-shadow	Sjena primijenjena na istaknute gumbe kako bi im dala dubinu.
--input-hover-line-color	Boja podcrtavanja pri prelasku mišem preko određenih polja za unos.
--input-dropdown-icon-color	Boja pokazivača/strelica unutar padajućih izbornika.
--scrollbar-thumb-color	Boja koja se koristi za klizač daljinskog upravljača i klizne trake.
--rgb-primary-color	RGB verzija primarne boje odvojena zarezom, koristi se za primjenu alfa prozirnosti.
--rgb-primary-text-color	RGB verzija primarne boje teksta odvojena zarezom, koristi se za primjenu alfa prozirnosti.