Estil de targeta

La targeta Dreame Vacuum compleix de manera nativa amb el tema predeterminat de Home Assistant. Tots els components interns, menús i disposicions s’adapten automàticament al tema actiu de Home Assistant. Hereta de manera fluida els colors del mode Clar i Fosc de manera dinàmica, fent que l’estilització personalitzada no sigui necessària en condicions estàndard.

Crear un tema personalitzat de Home Assistant per modificar l’estètica implica sobreescriure les propietats CSS externes listades a continuació.

Estilització del mapa

Aquestes configuracions només afecten els components d’interfície de la targeta. Personalitzar els colors interns del mapa de l’aspiradora, com ara habitacions, camins i parets, es gestiona a la secció Sobreescriure colors.

La targeta també utilitza configuracions internes amb el prefix --dvc-. No es recomana sobreescriure configuracions internes directament, ja que el seu comportament pot canviar en futurs actualitzacions. En comptes d’això, dirigeix-te a les configuracions externes del tema de Home Assistant listades a continuació.

card-mod

El connector card-mod està explícitament desactivat i no és compatible amb aquesta targeta per garantir l'estabilitat. Cal utilitzar temes personalitzats de Home Assistant per sobreescriure les propietats CSS proporcionades en aquesta pàgina.

Si un canvi visual específic no es pot aconseguir mitjançant temes, es pot enviar una sol·licitud de funció explicant els canvis desitjats i les raons darrere d'ells a través de la pàgina Informe de problemes.

Fons i Fronteres

Aquestes configuracions controlen l'aparença estructural principal de la targeta.

Variable	Descripció
--ha-card-background	Defineix el color de fons principal de la targeta.
--secondary-background-color	S'utilitza per superfícies secundàries, fons superposats i menús flotants.
--view-background	El color de fons base del tauler. La targeta l'utilitza quan està en mode panel o picture per barrejar-se perfectament.
--ha-card-border-radius	Defineix la rodonesa de les cantonades externes de la targeta.
--ha-card-border-width	Amplada de la línia de la frontera de la targeta.
--ha-card-border-color	Color de la frontera de la targeta.
--divider-color	Color dels divisors i separadors de llista interns.
--ha-card-box-shadow	L'ombra de la caixa aplicada al contenidor principal de la targeta.
--ha-card-backdrop-filter	Permet afegir filtres de fons, com ara blur, al fons de la targeta.

Text i Tipografia

Aquestes configuracions determinen els colors de text utilitzats a tota la interfície d'usuari.

Variable	Descripció
--primary-text-color	El color principal del text utilitzat per a encapçalaments principals, textos d'estat i valors.
--secondary-text-color	S'utilitza per a textos secundaris, estats detallats i etiquetes de pestanyes inactives.
--disabled-text-color	Color utilitzat per al text que actualment no està disponible o està desactivat.
--text-primary-color	El color del text que està directament sobre botons de color primari.

Ícons i Accents

Aquestes configuracions gestionen la coloració dels elements interactius, estats actius i ícons.

Variable	Descripció
--primary-color	El color d'accent principal per a elements actius, botons, animacions de càrrega i pestanyes seleccionades.
--light-primary-color	Una versió més clara del color principal, utilitzada per a estats de passatge del ratolí o fons de botons actius.
--accent-color	Color d'accent alternatiu utilitzat per a ressaltats específics en la interfície d'usuari.
--mdc-theme-on-primary	Color de text o ícons col·locats sobre un fons de color primari.
--paper-item-icon-color	El color per defecte per als ícons d'estat i de menú.
--paper-item-icon-active-color	El color aplicat als icones quan el seu estat corresponent està actiu.

Colors d'Estat i Semàntics

La targeta canvia de color dinàmicament segons l'estat de l'aspirador i les notificacions actives.

Variable	Descripció
--success-color	Utilitzat per a operacions exitoses o estats positius, com estar completament carregat.
--info-color	Utilitzat per a elements informatius i alertes estàndard.
--warning-color	Utilitzat per a alertes de precaució, estats de bateria baixa o problemes menors.
--error-color	Utilitzat per a errors crítics, falles i objectes del mapa intransitables.
--state-unavailable-color	El color que indica que l'aspirador està actualment no disponible o fora de línia.

Elements Interactius

Configuracions de tema específicament dirigides als components de la UI com botons, barres de desplaçament i camps de entrada.

Variable	Descripció
--mdc-theme-surface	El color de la superfície per a menús flotants, desplegables i targetes emergents.
--mdc-button-raised-box-shadow	L'ombra aplicada als botons elevats per donar-los profunditat.
--input-hover-line-color	Color de la línia inferior en passar el cursor sobre camps d'entrada específics.
--input-dropdown-icon-color	Color dels icones de cursor/fletxa dins dels menús desplegables.
--scrollbar-thumb-color	Color utilitzat per al polze del joystick del comandament a distància i barres de desplaçament.
--rgb-primary-color	Versió RGB separada per comes del color primari, utilitzada per aplicar transparència alfa.
--rgb-primary-text-color	Versió RGB separada per comes del color de text primari, utilitzada per aplicar transparència alfa.