Farbe eines Icons in der custom:multiple-entity-row ändern

Einleitung
Die Anpassung von Icons in Smart-Home-Anwendungen ist ein wichtiger Aspekt der Benutzeroberfläche, um Informationen schnell und intuitiv zu vermitteln. In Home Assistant, einer beliebten Plattform für Smart-Home-Anwendungen, kann die custom:multiple-entity-row Card verwendet werden, um mehrere Entitäten in einer Zeile darzustellen. Die Möglichkeit, die Farben von Icons individuell anzupassen, verbessert die visuelle Klarheit und Benutzererfahrung.

Problem
Ein Benutzer möchte die Farbe eines spezifischen Icons in der custom:multiple-entity-row Card ändern, hat jedoch Schwierigkeiten, dies zu erreichen. Bei der Verwendung von card_mod wird die Farbe aller Icons in der Zeile geändert, anstatt nur das gewünschte Icon.

Lösung
Um die Farbe eines einzelnen Icons in der custom:multiple-entity-row Card zu ändern, kann die CSS-Variable --icon-primary-color in Kombination mit spezifischen Selektoren verwendet werden. Der folgende Code zeigt, wie dies umgesetzt werden kann:

type: entities
entities:
  - type: custom:multiple-entity-row
    entity: sensor.aussentemperatur_temperatur
    name: Test
    entities:
      - entity: sensor.aussentemperatur_temperatur
        name: false
        icon: true
    card_mod:
      style: |
        :host {
          --icon-primary-color: red;
        }
        state-badge:last-of-type {
          --icon-primary-color: green !important;
        }

In diesem Beispiel wird das erste Icon rot gefärbt, während das letzte Icon grün bleibt. Dies wird durch die Verwendung des Selektors state-badge:last-of-type erreicht, der nur auf das letzte Icon in der Reihe angewendet wird.

Schritte zur Umsetzung
1. Füge die custom:multiple-entity-row Card in deine Konfiguration ein.
2. Definiere die Entitäten, deren Icons du anpassen möchtest.
3. Verwende card_mod, um die CSS-Styles für die Icons anzupassen, indem du spezifische Selektoren verwendest.

Hintergrundwissen
Die custom:multiple-entity-row Card ist eine benutzerdefinierte Karte in Home Assistant, die es ermöglicht, mehrere Entitäten in einer einzigen Zeile darzustellen. Die Anpassung von Icons erfolgt über CSS-Variablen, die in der card_mod-Integration definiert werden können. Es ist wichtig, die richtigen Selektoren zu verwenden, um gezielte Anpassungen vorzunehmen, ohne die gesamte Karte zu beeinflussen.

Zusätzliche Infos

Hinweise & Best Practices
- Stelle sicher, dass die card_mod-Integration korrekt installiert und konfiguriert ist, um CSS-Anpassungen vornehmen zu können.
- Teste die CSS-Änderungen in der Entwicklungsumgebung, um sicherzustellen, dass sie wie gewünscht funktionieren, bevor du sie in die Produktionsumgebung überträgst.
- Nutze spezifische Selektoren, um unbeabsichtigte Änderungen an anderen Icons zu vermeiden.