Kartes noformējums

Dreame putekļsūcēja karte dabīgi atbilst Home Assistant noklusējuma tēmām. Visi iekšējie komponenti, izvēlnes un izkārtojumi automātiski pielāgojas aktīvajai Home Assistant tēmai. Tā nevainojami mantot gan Gaišo, gan Tumšo režīma krāsas dinamiskā veidā, padarot pielāgotu stilu nevajadzīgu standarta apstākļos.

Lai izveidotu pielāgotu Home Assistant tēmu, lai pielāgotu estētiku, nepieciešams pārrakstīt ārējās CSS īpašības, kas norādītas zemāk.

Kartes stils

Šie iestatījumi ietekmē tikai kartes lietotāja saskarnes komponentus. Iekšējo krāsu pielāgošana pašai putekļsūcēja kartei, piemēram, istabām, ceļiem un sienām, tiek veikta Pārrakstīt krāsas sadaļā.

Karte arī izmanto iekšējos iestatījumus ar prefiksu --dvc-. Tiešu iekšējo iestatījumu pārrakstīšanu neiesaka, jo to darbība nākotnē var mainīties. Tā vietā mērķējiet uz ārējiem Home Assistant tēmas iestatījumiem, kas norādīti zemāk.

card-mod

card-mod spraudnis ir skaidri atspējots un netiek atbalstīts šajā kartītē, lai nodrošinātu stabilitāti. Lai pārrakstītu šajā lapā sniegtās CSS īpašības, tiek jāizmanto pielāgotas Home Assistant tēmas.

Ja konkrētus vizuālos mainījumus nevar panākt, izmantojot tēmas, var iesniegt funkcijas pieprasījumu, paskaidrojot vēlamos mainījumus un iemeslus to nepieciešamībai, izmantojot Problēmu ziņošana lapu.

Foni un rāmji

Šie iestatījumi kontrolē kartītes galveno strukturālo izskatu.

Mainīgais	Apraksts
--ha-card-background	Definē kartītes galveno fona krāsu.
--secondary-background-color	Lieto sekundāriem virsmām, pārklājumiem un peldošajām izvēlnēm.
--view-background	Informācijas paneļa pamatfona krāsa. Kartīte to izmanto, kad ir panel vai picture režīmā, lai saplūstu vienmērīgi.
--ha-card-border-radius	Definē kartītes ārējo stūru noapaļojumu.
--ha-card-border-width	Kartītes rāmja līnijas platums.
--ha-card-border-color	Kartītes rāmja krāsa.
--divider-color	Iekšējo sarakstu dalītāju un atdalītāju krāsa.
--ha-card-box-shadow	Ēnas (box-shadow), kas piemērota galvenajam kartītes konteinerim.
--ha-card-backdrop-filter	Ļauj pievienot fona filtrus, piemēram, blur, kartes fonam.

Teksts un tipogrāfija

Šie iestatījumi nosaka teksta krāsas, kas tiek izmantotas lietotāja saskarnē.

Mainīgais	Apraksts
--primary-text-color	Galvenā teksta krāsa, kas tiek izmantota primārajiem virsrakstiem, stāvokļa tekstam un vērtībām.
--secondary-text-color	Izmanto sekundārajam tekstam, detalizētiem statusiem un neaktīvu cilņu nosaukumiem.
--disabled-text-color	Krāsa tekstam, kas pašlaik nav pieejams vai ir atspējots.
--text-primary-color	Teksta krāsa, kas atrodas tieši uz primāri krāsotām pogām.

Ikonas un akcenti

Šie iestatījumi pārvalda interaktīvo elementu, aktīvo stāvokļu un ikonu krāsojumu.

Mainīgais	Apraksts
--primary-color	Galvenā akcenta krāsa aktīvajiem elementiem, pogām, iekrāsošanas animācijām un izvēlētajām cilnēm.
--light-primary-color	Vieglāka primārās krāsas versija, kas tiek izmantota hover stāvokļos vai aktīvu pogu fonos.
--accent-color	Alternatīvā akcenta krāsa, kas tiek izmantota konkrētiem uzsvariem saskarnē.
--mdc-theme-on-primary	Teksta vai ikonu krāsa, kas novietota uz primāri krāsota fona.
--paper-item-icon-color	Noklusētā krāsa stāvokļa un izvēlnes ikonām.
--paper-item-icon-active-color	Krāsa, kas tiek pielietota ikonām, kad to atbilstošais stāvoklis ir aktīvs.

Statusa un semantiskās krāsas

Karte dinamiskā veidā maina krāsu atkarībā no vakuuma stāvokļa un aktīvajām paziņojumām.

Mainīgais	Apraksts
--success-color	Lieto veiksmīgām darbībām vai pozitīviem stāvokļiem, piemēram, pilnībā uzlādētam.
--info-color	Lieto informatīviem elementiem un standarta brīdinājumiem.
--warning-color	Lieto brīdinājuma signāliem, zemas akumulatora uzlādes stāvokļiem vai nelielām problēmām.
--error-color	Lieto kritiskām kļūdām, kļūdām un neizbraucamiem kartes objektiem.
--state-unavailable-color	Krāsa, kas norāda, ka vakuums pašlaik nav pieejams vai ir bezsaistē.

Interaktīvie elementi

Tēmas iestatījumi, kas īpaši mērķē uz UI komponentēm, piemēram, pogām, ritjoslām un ievades laukiem.

Mainīgais	Apraksts
--mdc-theme-surface	Virsmas krāsa peldošajiem izvēlnēm, nolaižamajām izvēlnēm un uznirstošajām kartēm.
--mdc-button-raised-box-shadow	Ēna, kas pielietota paceltajām pogām, lai tām piešķirtu dziļumu.
--input-hover-line-color	Apakšsvītras krāsa, kad pāriet virs konkrētiem ievades laukiem.
--input-dropdown-icon-color	Krāsa kursora/bultiņas ikonām nolaižamajās izvēlnēs.
--scrollbar-thumb-color	Krāsa, kas tiek izmantota tālvadības kursorsviras un ritjoslu pogas daļai.
--rgb-primary-color	Primārās krāsas RGB vērtība, atdalīta ar komatu, tiek izmantota alfa caurspīdīguma pielietošanai.
--rgb-primary-text-color	Primārā teksta krāsas RGB vērtība, atdalīta ar komatu, tiek izmantota alfa caurspīdīguma pielietošanai.