Stile delle Schede

La Dreame Vacuum Card è nativamente compatibile con il tema predefinito di Home Assistant. Tutti i componenti interni, i menu e i layout si adattano automaticamente al tema attivo di Home Assistant. Eredita senza soluzione di continuità sia i colori della modalità Light sia della modalità Dark in modo dinamico, rendendo inutile la personalizzazione dello stile nelle condizioni standard.

Creare un tema personalizzato di Home Assistant per modificare l'estetica comporta la sovrascrittura delle proprietà CSS esterne elencate di seguito.

Stile della mappa

Queste impostazioni influiscono solo sui componenti dell'interfaccia utente della card. La personalizzazione dei colori interni della mappa del robot aspirapolvere, come stanze, percorsi e pareti, viene gestita nella sezione Sovrascrivere i colori.

La card utilizza anche impostazioni interne con prefisso --dvc-. Sovrascrivere direttamente le impostazioni interne non è consigliato, poiché il loro comportamento può cambiare nelle future aggiornamenti. È preferibile modificare le impostazioni del tema esterno di Home Assistant elencate di seguito.

card-mod

Il plugin card-mod è esplicitamente disabilitato e non supportato in questa scheda per garantire la stabilità. È necessario utilizzare temi personalizzati di Home Assistant per sovrascrivere le proprietà CSS fornite in questa pagina.

Se una modifica visiva specifica non può essere ottenuta tramite i temi, è possibile inviare una richiesta di funzionalità che spieghi le modifiche desiderate e le motivazioni tramite la pagina Segnalazione Problemi.

Sfondo e bordi

Queste impostazioni controllano l'aspetto strutturale principale della scheda.

Variabile	Descrizione
--ha-card-background	Definisce il colore di sfondo principale della scheda.
--secondary-background-color	Usato per superfici secondarie, sfondi di sovrapposizione e menu flottanti.
--view-background	Colore di sfondo di base della dashboard. La scheda lo utilizza quando è in modalità panel o picture per fondersi perfettamente.
--ha-card-border-radius	Definisce la rotondità degli angoli esterni della scheda.
--ha-card-border-width	Larghezza della linea del bordo della scheda.
--ha-card-border-color	Colore del bordo della scheda.
--divider-color	Colore dei divisori e separatori interni delle liste.
--ha-card-box-shadow	L'ombra della scatola applicata al contenitore principale della scheda.
--ha-card-backdrop-filter	Consente di aggiungere filtri di sfondo, come blur, allo sfondo della scheda.

Testo e Tipografia

Queste impostazioni determinano i colori del testo utilizzati nell'interfaccia utente.

Variabile	Descrizione
--primary-text-color	Il colore principale del testo utilizzato per le intestazioni principali, il testo di stato e i valori.
--secondary-text-color	Utilizzato per il testo secondario, gli stati dettagliati e le etichette delle schede inattive.
--disabled-text-color	Colore utilizzato per il testo attualmente non disponibile o disabilitato.
--text-primary-color	Il colore del testo posizionato direttamente sopra i pulsanti di colore principale.

Icone e Accenti

Queste impostazioni gestiscono la colorazione degli elementi interattivi, degli stati attivi e delle icone.

Variabile	Descrizione
--primary-color	Il colore di accento principale per gli elementi attivi, i pulsanti, le animazioni del caricatore e le schede selezionate.
--light-primary-color	Una versione più chiara del colore principale, utilizzata per gli stati di passaggio del mouse o gli sfondi dei pulsanti attivi.
--accent-color	Colore di accento alternativo utilizzato per evidenziare elementi specifici nell'interfaccia utente.
--mdc-theme-on-primary	Colore del testo o delle icone posizionate sopra uno sfondo di colore principale.
--paper-item-icon-color	Il colore predefinito per gli stati e le icone dei menu.
--paper-item-icon-active-color	Il colore applicato alle icone quando il loro stato corrispondente è attivo.

Colori di Stato e Semantici

La scheda cambia dinamicamente colore in base allo stato dell'aspirapolvere e alle notifiche attive.

Variabile	Descrizione
--success-color	Usato per operazioni riuscite o stati positivi, come essere completamente carico.
--info-color	Usato per elementi informativi e avvisi standard.
--warning-color	Usato per avvisi di attenzione, stati di batteria bassa o problemi minori.
--error-color	Usato per guasti critici, errori e oggetti della mappa impercorribili.
--state-unavailable-color	Colore che indica che l'aspirapolvere è attualmente non disponibile o offline.

Elementi Interattivi

Impostazioni del tema che mirano specificamente ai componenti dell'interfaccia utente come pulsanti, barre di scorrimento e campi di input.

Variabile	Descrizione
--mdc-theme-surface	Colore della superficie per menu flottanti, menu a discesa e schede popup.
--mdc-button-raised-box-shadow	L'ombra applicata ai pulsanti rialzati per dare loro profondità.
--input-hover-line-color	Colore della sottolineatura quando si passa il mouse su specifici campi di input.
--input-dropdown-icon-color	Colore delle icone del cursore/freccia all'interno dei menu a discesa.
--scrollbar-thumb-color	Colore usato per il pollice del joystick del telecomando e delle barre di scorrimento.
--rgb-primary-color	Versione RGB separata da virgole del colore primario, usata per applicare la trasparenza alpha.
--rgb-primary-text-color	Versione RGB separata da virgole del colore del testo primario, usata per applicare la trasparenza alpha.