Kartenstil

Die Dreame Vacuum Card entspricht nativ dem Standard-Theme von Home Assistant. Alle internen Komponenten, Menüs und Layouts passen sich automatisch an das aktive Home Assistant-Theme an. Sie übernimmt nahtlos sowohl die Light- als auch die Dark-Modus-Farben dynamisch, wodurch unter normalen Bedingungen kein individuelles Styling erforderlich ist.

Das Erstellen eines benutzerdefinierten Home Assistant-Themes zur Anpassung der Ästhetik erfordert das Überschreiben der unten aufgeführten externen CSS-Eigenschaften.

Kartenstil

Diese Einstellungen betreffen nur die UI-Komponenten der Karte. Die internen Farben der Staubsaugkarte selbst, wie Räume, Wege und Wände, anzupassen, erfolgt im Abschnitt Farben überschreiben.

Die Karte verwendet außerdem interne Einstellungen mit dem Präfix --dvc-. Das direkte Überschreiben interner Einstellungen wird nicht empfohlen, da sich deren Verhalten in zukünftigen Updates ändern kann. Verwenden Sie stattdessen die unten aufgeführten externen Home Assistant-Theme-Einstellungen.

card-mod

Das card-mod-Plugin ist ausdrücklich deaktiviert und wird nicht unterstützt auf dieser Karte, um die Stabilität zu gewährleisten. Benutzerdefinierte Home-Assistant-Themen müssen verwendet werden, um die auf dieser Seite bereitgestellten CSS-Eigenschaften zu überschreiben.

Wenn eine bestimmte visuelle Änderung nicht über Themen erreicht werden kann, kann eine Funktionsanfrage mit einer Erklärung der gewünschten Änderungen und der Begründung über die Problem melden-Seite eingereicht werden.

Hintergründe & Rahmen

Diese Einstellungen steuern das Hauptstruktur-Aussehen der Karte.

Variable	Beschreibung
--ha-card-background	Definiert die Haupt-Hintergrundfarbe der Karte.
--secondary-background-color	Wird für sekundäre Oberflächen, Overlay-Hintergründe und schwebende Menüs verwendet.
--view-background	Die Basis-Hintergrundfarbe des Dashboards. Die Karte verwendet dies im panel- oder picture-Modus, um nahtlos zu verschmelzen.
--ha-card-border-radius	Definiert die Rundung der äußeren Ecken der Karte.
--ha-card-border-width	Breite der Linien des Kartenrahmens.
--ha-card-border-color	Farbe des Kartenrahmens.
--divider-color	Farbe interner Listen-Trenner und -Separatoren.
--ha-card-box-shadow	Der Box-Shadow, der auf den Hauptkarten-Container angewendet wird.
--ha-card-backdrop-filter	Ermöglicht das Hinzufügen von Hintergrundfiltern, wie z. B. blur, zum Kartenhintergrund.

Text & Typografie

Diese Einstellungen bestimmen die im gesamten Benutzerinterface verwendeten Textfarben.

Variable	Beschreibung
--primary-text-color	Die Haupttextfarbe, die für primäre Überschriften, Zustandsinformationen und Werte verwendet wird.
--secondary-text-color	Wird für sekundären Text, detaillierte Statusinformationen und inaktive Tab-Beschriftungen verwendet.
--disabled-text-color	Farbe, die für Text verwendet wird, der derzeit nicht verfügbar oder deaktiviert ist.
--text-primary-color	Die Farbe des Textes, der direkt auf Schaltflächen mit Primärfarbe sitzt.

Symbole & Akzente

Diese Einstellungen verwalten die Farbgebung interaktiver Elemente, aktiver Zustände und Symbole.

Variable	Beschreibung
--primary-color	Die primäre Akzentfarbe für aktive Elemente, Schaltflächen, Ladeanimationen und ausgewählte Tabs.
--light-primary-color	Eine hellere Version der Primärfarbe, verwendet für Hover-Zustände oder aktive Schaltflächenhintergründe.
--accent-color	Alternative Akzentfarbe, die für bestimmte Hervorhebungen im UI verwendet wird.
--mdc-theme-on-primary	Farbe von Text oder Symbolen, die auf einem Hintergrund mit Primärfarbe platziert sind.
--paper-item-icon-color	Die Standardfarbe für Status- und Menüsymbole.
--paper-item-icon-active-color	Die Farbe, die auf Symbole angewendet wird, wenn ihr entsprechender Zustand aktiv ist.

Status- & Semantische Farben

Die Karte ändert dynamisch die Farbe basierend auf dem Zustand des Staubsaugers und aktiven Benachrichtigungen.

Variable	Beschreibung
--success-color	Wird für erfolgreiche Vorgänge oder positive Zustände verwendet, wie z. B. vollständig aufgeladen.
--info-color	Wird für informationelle Elemente und Standardwarnungen verwendet.
--warning-color	Wird für Warnmeldungen, niedrigen Batteriestand oder kleinere Probleme verwendet.
--error-color	Wird für kritische Fehler, Störungen und unpassierbare Kartenobjekte verwendet.
--state-unavailable-color	Die Farbe, die anzeigt, dass der Staubsauger derzeit nicht verfügbar oder offline ist.

Interaktive Elemente

Theme-Einstellungen, die speziell auf UI-Komponenten wie Buttons, Scrollbars und Eingabefelder abzielen.

Variable	Beschreibung
--mdc-theme-surface	Die Oberflächenfarbe für schwebende Menüs, Dropdowns und Popup-Karten.
--mdc-button-raised-box-shadow	Der Schatten, der auf hervorgehobene Buttons angewendet wird, um ihnen Tiefe zu verleihen.
--input-hover-line-color	Farbe der Unterstreichung beim Überfahren bestimmter Eingabefelder.
--input-dropdown-icon-color	Farbe der Caret-/Pfeilsymbole innerhalb von Dropdown-Menüs.
--scrollbar-thumb-color	Farbe, die für den Daumen des Joysticks der Fernbedienung und für Scrollbars verwendet wird.
--rgb-primary-color	RGB durch Kommas getrennte Version der Primärfarbe, verwendet, um Alphatransparenz anzuwenden.
--rgb-primary-text-color	RGB durch Kommas getrennte Version der Primärtextfarbe, verwendet, um Alphatransparenz anzuwenden.