Style des cartes

La carte Dreame Vacuum est nativement compatible avec le thème par défaut de Home Assistant. Tous les composants internes, menus et mises en page s'adaptent automatiquement au thème actif de Home Assistant. Elle hérite de manière transparente des couleurs des modes Clair et Sombre, rendant la personnalisation du style inutile dans des conditions normales.

Créer un thème personnalisé pour Home Assistant afin de personnaliser l'esthétique implique de remplacer les propriétés CSS externes listées ci-dessous.

Style de la carte

Ces paramètres affectent uniquement les composants de l'interface utilisateur de la carte. La personnalisation des couleurs internes de la carte de l'aspirateur elle-même, telles que les pièces, les chemins et les murs, se fait dans la section Remplacer les couleurs.

La carte utilise également des paramètres internes précédés de --dvc-. Il n’est pas recommandé de remplacer directement les paramètres internes, car leur comportement peut changer lors de futures mises à jour. Il est préférable de cibler les paramètres externes du thème Home Assistant listés ci-dessous.

card-mod

Le plugin card-mod est explicitement désactivé et non pris en charge sur cette carte afin d'assurer la stabilité. Des thèmes Home Assistant personnalisés doivent être utilisés pour remplacer les propriétés CSS fournies sur cette page.

Si un changement visuel spécifique ne peut pas être réalisé via les thèmes, une demande de fonctionnalité expliquant les modifications souhaitées et les raisons peut être soumise via la page Signalement de problème.

Arrière-plans & Bordures

Ces paramètres contrôlent l'apparence structurelle principale de la carte.

Variable	Description
--ha-card-background	Définit la couleur de fond principale de la carte.
--secondary-background-color	Utilisée pour les surfaces secondaires, les arrière-plans des superpositions et les menus flottants.
--view-background	La couleur de fond de base du tableau de bord. La carte l'utilise en mode panel ou picture pour se fondre parfaitement.
--ha-card-border-radius	Définit l'arrondi des coins extérieurs de la carte.
--ha-card-border-width	Largeur de la bordure de la carte.
--ha-card-border-color	Couleur de la bordure de la carte.
--divider-color	Couleur des séparateurs et diviseurs internes des listes.
--ha-card-box-shadow	L'ombre portée appliquée au conteneur principal de la carte.
--ha-card-backdrop-filter	Permet d'ajouter des filtres d'arrière-plan, tels que blur, à l'arrière-plan de la carte.

Texte & Typographie

Ces paramètres définissent les couleurs de texte utilisées dans toute l'interface utilisateur.

Variable	Description
--primary-text-color	La couleur principale du texte utilisée pour les titres principaux, le texte d'état et les valeurs.
--secondary-text-color	Utilisée pour le texte secondaire, les états détaillés et les étiquettes d'onglets inactifs.
--disabled-text-color	Couleur utilisée pour le texte actuellement indisponible ou désactivé.
--text-primary-color	La couleur du texte placé directement sur les boutons de couleur primaire.

Icônes & Accents

Ces paramètres gèrent la coloration des éléments interactifs, des états actifs et des icônes.

Variable	Description
--primary-color	La couleur d'accent principale pour les éléments actifs, les boutons, les animations de chargement et les onglets sélectionnés.
--light-primary-color	Une version plus claire de la couleur principale, utilisée pour les états de survol ou les arrière-plans de boutons actifs.
--accent-color	Couleur d'accent alternative utilisée pour des mises en évidence spécifiques dans l'interface.
--mdc-theme-on-primary	Couleur du texte ou des icônes placés sur un arrière-plan de couleur primaire.
--paper-item-icon-color	La couleur par défaut pour les icônes d'état et de menu.
--paper-item-icon-active-color	La couleur appliquée aux icônes lorsque leur état correspondant est actif.

Couleurs de statut et sémantiques

La carte change dynamiquement de couleur en fonction de l'état de l'aspirateur et des notifications actives.

Variable	Description
--success-color	Utilisé pour les opérations réussies ou les états positifs, comme être totalement chargé.
--info-color	Utilisé pour les éléments d'information et les alertes standard.
--warning-color	Utilisé pour les alertes de mise en garde, les états de batterie faible ou les problèmes mineurs.
--error-color	Utilisé pour les fautes critiques, les erreurs et les objets de carte impraticables.
--state-unavailable-color	La couleur indiquant que l'aspirateur est actuellement indisponible ou hors ligne.

Éléments interactifs

Paramètres de thème ciblant spécifiquement les composants de l'interface utilisateur comme les boutons, les barres de défilement et les champs de saisie.

Variable	Description
--mdc-theme-surface	La couleur de surface pour les menus flottants, les listes déroulantes et les cartes popup.
--mdc-button-raised-box-shadow	L'ombre appliquée aux boutons surélevés pour leur donner de la profondeur.
--input-hover-line-color	Couleur du soulignement lors du survol de champs de saisie spécifiques.
--input-dropdown-icon-color	Couleur des icônes de curseur/flèche à l'intérieur des menus déroulants.
--scrollbar-thumb-color	Couleur utilisée pour le curseur du joystick de la télécommande et les barres de défilement.
--rgb-primary-color	Version en RVB séparée par des virgules de la couleur primaire, utilisée pour appliquer la transparence alpha.
--rgb-primary-text-color	Version en RVB séparée par des virgules de la couleur du texte primaire, utilisée pour appliquer la transparence alpha.