Kaartstijl

De Dreame Vacuum Card voldoet van nature aan het standaardthema van Home Assistant. Alle interne componenten, menu's en lay-outs passen zich automatisch aan het actieve Home Assistant-thema aan. Het erft naadloos zowel Light- als Dark-moduskleuren dynamisch, waardoor aangepaste styling onder standaardomstandigheden niet nodig is.

Het creëren van een aangepast Home Assistant-thema om de esthetiek aan te passen, houdt in dat je de externe CSS-eigenschappen hieronder vermeld overschrijft.

Kaartstyling

Deze instellingen beïnvloeden alleen de UI-componenten van de kaart. Het aanpassen van de interne kleuren van de vacuümkaart zelf, zoals kamers, paden en muren, wordt behandeld in de Kleuren overschrijven-sectie.

De kaart gebruikt ook interne instellingen met het voorvoegsel --dvc-. Het direct overschrijven van interne instellingen wordt niet aanbevolen, omdat hun gedrag kan veranderen in toekomstige updates. Richt je in plaats daarvan op de externe Home Assistant-thema-instellingen die hieronder zijn vermeld.

card-mod

De card-mod-plugin is expliciet uitgeschakeld en niet ondersteund op deze kaart om stabiliteit te waarborgen. Aangepaste Home Assistant-thema's moeten worden gebruikt om de CSS-eigenschappen op deze pagina te overschrijven.

Als een specifieke visuele wijziging niet kan worden bereikt via thema's, kan een functieaanvraag met uitleg van de gewenste wijzigingen en de reden hiervan worden ingediend via de Probleemrapportage-pagina.

Achtergronden & Randen

Deze instellingen beheersen het hoofdstructuuruiterlijk van de kaart.

Variabele	Beschrijving
--ha-card-background	Bepaalt de hoofdkleur van de achtergrond van de kaart.
--secondary-background-color	Wordt gebruikt voor secundaire oppervlakken, overlay-achtergronden en zwevende menu's.
--view-background	De basiskleur van het dashboardachtergrond. De kaart gebruikt dit wanneer deze in panel- of picture-modus is om naadloos te mengen.
--ha-card-border-radius	Bepaalt de ronding van de buitenhoeken van de kaart.
--ha-card-border-width	Breedte van de randlijn van de kaart.
--ha-card-border-color	Kleur van de kaartrand.
--divider-color	Kleur van interne lijstscheiders en -verdelers.
--ha-card-box-shadow	De box-shadow toegepast op de hoofdcontainer van de kaart.
--ha-card-backdrop-filter	Maakt het toevoegen van achtergrondfilters mogelijk, zoals blur, aan de achtergrond van de kaart.

Tekst & Typografie

Deze instellingen bepalen de tekstkleuren die door de hele gebruikersinterface worden gebruikt.

Variabele	Beschrijving
--primary-text-color	De hoofdkleur van de tekst die wordt gebruikt voor primaire koppen, statusteksten en waarden.
--secondary-text-color	Wordt gebruikt voor secundaire tekst, gedetailleerde statussen en inactieve tabbladenlabels.
--disabled-text-color	Kleur die wordt gebruikt voor tekst die momenteel niet beschikbaar of uitgeschakeld is.
--text-primary-color	De kleur van tekst die direct op knoppen met primaire kleur wordt geplaatst.

Pictogrammen & Accenten

Deze instellingen beheren de kleuring van interactieve elementen, actieve statussen en pictogrammen.

Variabele	Beschrijving
--primary-color	De primaire accentkleur voor actieve elementen, knoppen, laadanimaties en geselecteerde tabbladen.
--light-primary-color	Een lichtere versie van de primaire kleur, gebruikt voor hoverstatussen of actieve knopachtergronden.
--accent-color	Alternatieve accentkleur gebruikt voor specifieke opvallende elementen in de UI.
--mdc-theme-on-primary	Kleur van tekst of pictogrammen geplaatst op een achtergrond met primaire kleur.
--paper-item-icon-color	De standaardkleur voor staat- en menu-icoontjes.
--paper-item-icon-active-color	De kleur die op pictogrammen wordt toegepast wanneer hun bijbehorende status actief is.

Status- & Semantische Kleuren

De kaart verandert dynamisch van kleur op basis van de staat van de stofzuiger en actieve meldingen.

Variabele	Beschrijving
--success-color	Wordt gebruikt voor succesvolle bewerkingen of positieve staten, zoals volledig opgeladen zijn.
--info-color	Wordt gebruikt voor informatieve elementen en standaardmeldingen.
--warning-color	Wordt gebruikt voor waarschuwingsmeldingen, lage batterijniveaus of kleinere problemen.
--error-color	Wordt gebruikt voor kritieke fouten, fouten en onbegaanbare kaartobjecten.
--state-unavailable-color	De kleur die aangeeft dat de stofzuiger momenteel niet beschikbaar of offline is.

Interactieve Elementen

Thema-instellingen die specifiek gericht zijn op UI-componenten zoals knoppen, scrollbars en invoervelden.

Variabele	Beschrijving
--mdc-theme-surface	De oppervlaktekleur voor zwevende menu's, dropdowns en popup-kaarten.
--mdc-button-raised-box-shadow	De schaduw die wordt toegepast op verhoogde knoppen om ze diepte te geven.
--input-hover-line-color	Kleur van de onderstreping bij het zweven over specifieke invoervelden.
--input-dropdown-icon-color	Kleur van de cursor/pijlpictogrammen in dropdownmenu's.
--scrollbar-thumb-color	Kleur die wordt gebruikt voor de knop van de joystick van de afstandsbediening en scrollbars.
--rgb-primary-color	RGB-versie van de primaire kleur, gescheiden door komma's, gebruikt om alpha-transparantie toe te passen.
--rgb-primary-text-color	RGB-versie van de primaire tekstkleur, gescheiden door komma's, gebruikt om alpha-transparantie toe te passen.