Kaardi kujundus

Dreame tolmuimeja kaart järgib loomulikult Home Assistanti vaikimisi teemat. Kõik sisemised komponendid, menüüd ja paigutused kohanduvad automaatselt aktiivse Home Assistanti teemaga. See pärib sujuvalt nii valge kui ka tume režiimi värvid dünaamiliselt, muutes kohandatud stiilid standardtingimustes tarbetuks.

Kohandatud Home Assistanti teema loomine esteetika kohandamiseks hõlmab allpool loetletud väliste CSS-i omaduste ülekirjutamist.

Kaardi stiil

Need sätted mõjutavad ainult kaardi kasutajaliidese komponente. Tolmuimeja kaardi enda sisemiste värvide kohandamine, näiteks tubade, radade ja seinte värvid, toimub Värvide ülekirjutamine jaotises.

Kaart kasutab ka sisemisi sätteid, mille eesliide on --dvc-. Sisemiste sätete otse ülekirjutamine ei ole soovitatav, kuna nende käitumine võib tulevikus muutuda. Selle asemel sihitud allpool loetletud Home Assistanti välisteema sätteid.

card-mod

card-mod pistikprogramm on selgelt keelatud ja seda ei toetata sellel kaardil stabiilsuse tagamiseks. Kohandatud Home Assistanti teemasid tuleb kasutada sellel lehel pakutud CSS-i omaduste ülekirjutamiseks.

Kui konkreetset visuaalset muutust ei saa teemade kaudu saavutada, saab sooviavaldust, mis selgitab soovitud muudatusi ja nende põhjendusi, esitada Probleemide teatamine lehe kaudu.

Taustad ja servad

Need seaded kontrollivad kaardi põhistruktuuri välimust.

Muutuja	Kirjeldus
--ha-card-background	Määratleb kaardi põhilise taustavärvi.
--secondary-background-color	Kasutatakse sekundaarsete pindade, ülekatete taustade ja hõljuvate menüüde jaoks.
--view-background	Armatuurlaua põhi taustavärv. Kaart kasutab seda panel või picture režiimis, et sujuvalt sulanduda.
--ha-card-border-radius	Määrab kaardi välisnurkade ümmargusastme.
--ha-card-border-width	Kaardi serva joone laius.
--ha-card-border-color	Kaardi serva värv.
--divider-color	Sisemiste loendite jagajate ja eraldajate värv.
--ha-card-box-shadow	Peamise kaardikonteineri külge rakendatud kastivarju.
--ha-card-backdrop-filter	Võimaldab lisada kaardi taustale tagaplaani filtreid, näiteks blur.

Tekst ja tüpograafia

Need seadistused määravad kasutajaliidese tekstivärvid.

Muutuja	Kirjeldus
--primary-text-color	Peamine tekstivärv, mida kasutatakse pealkirjade, olekuteksti ja väärtuste jaoks.
--secondary-text-color	Kasutatakse teisejärgulise teksti, detailsete olekute ja inaktiivsete sakkide siltide jaoks.
--disabled-text-color	Värv, mida kasutatakse tekstile, mis hetkel ei ole kättesaadav või on keelatud.
--text-primary-color	Teksti värv, mis asub otse peavärvi nuppudel.

Ikoonid ja aktsendid

Need seadistused haldavad interaktiivsete elementide, aktiivsete olekute ja ikoonide värvimist.

Muutuja	Kirjeldus
--primary-color	Peamine aktsentvärv aktiivsete elementide, nuppude, laadimisanimatsioonide ja valitud sakkide jaoks.
--light-primary-color	Peavärvi heledam versioon, mida kasutatakse hõljutamise olekutes või aktiivsete nuppude taustal.
--accent-color	Alternatiivne aktsentvärv, mida kasutatakse UI konkreetsete esiletõstmiste jaoks.
--mdc-theme-on-primary	Teksti või ikoonide värv, mis asub peavärvitud tausta peal.
--paper-item-icon-color	Vaikimisi värv olekute ja menüüikoonide jaoks.
--paper-item-icon-active-color	Värv, mida rakendatakse ikoonidele, kui nende vastav olek on aktiivne.

Oleku- ja semantilised värvid

Kaart muudab dünaamiliselt värvi sõltuvalt tolmuimeja olekust ja aktiivsetest teadetest.

Muutuja	Kirjeldus
--success-color	Kasutatakse edukate toimingute või positiivsete olekute jaoks, näiteks täielikult laetud olek.
--info-color	Kasutatakse informatiivsete elementide ja tavapäraste teadete jaoks.
--warning-color	Kasutatakse hoiatussõnumite, madala akutaseme või väikeste probleemide jaoks.
--error-color	Kasutatakse kriitiliste rikete, vigade ja läbitamatute kaardiobjektide jaoks.
--state-unavailable-color	Värv, mis näitab, et tolmuimeja on hetkel kättesaamatu või võrguühenduseta.

Interaktiivsed elemendid

Teema seaded, mis on spetsiaalselt suunatud kasutajaliidese komponentidele, nagu nupud, kerimisribad ja sisendväljad.

Muutuja	Kirjeldus
--mdc-theme-surface	Pinna värv hõljuvatele menüüdele, rippmenüüdele ja hüpikkaartidele.
--mdc-button-raised-box-shadow	Varju, mis rakendatakse tõstetud nuppudele, et anda neile sügavust.
--input-hover-line-color	Allajoonimise värv, kui hiirega hõljuda konkreetsete sisendväljade kohal.
--input-dropdown-icon-color	Rippmenüüde sees olevate kursori/noole ikoonide värv.
--scrollbar-thumb-color	Värv, mida kasutatakse kaugjuhtimispuldi joysticki ja kerimisribade pöidlale.
--rgb-primary-color	Esmasvärvi RGB komaeraldatud versioon, mida kasutatakse alfa läbipaistvuse rakendamiseks.
--rgb-primary-text-color	Peateksti värvi RGB komaeraldatud versioon, mida kasutatakse alfa läbipaistvuse rakendamiseks.