UIX statt card-mod: So gelingt der Umstieg in HA

card-mod bekommt seit März 2026 keine Updates mehr und wird auch nicht weiterentwickelt. Irgendwann wird es mit einer neueren Home Assistant Version kollidieren, und dann wird es ungemütlich. Der Nachfolger heißt UIX, kommt vom selben Entwickler und bringt deine alten Styles ohne Änderungen mit. Ich habe bei mir 378 Stellen mit card_mod gehabt und musste keine einzige davon anfassen.

Was card-mod war und was UIX jetzt ist

card-mod war eine HACS-Erweiterung, mit der du über CSS so gut wie jeden Teil der Home Assistant Oberfläche optisch anpassen konntest. UIX macht genau das gleiche, wird aber aktiv gepflegt und weiterentwickelt. Es besteht aus drei Teilen: UIX Styling für CSS-Anpassungen an fast jedem Frontend-Element, UIX Forge für templatebasierte Karten-Konfigurationen und UIX Broker, der Browser-Events und Tastaturkürzel in Aktionen umwandelt.

Der entscheidende Punkt beim Umstieg ist, dass die Syntax sich kaum unterscheidet. Aus card_mod: wird uix:, der Rest bleibt identisch. Deine bestehenden Anpassungen laufen also einfach weiter.

Backup anlegen, bevor du anfängst

Bevor du irgendetwas anfasst, legst du ein Backup an. In Home Assistant gehst du auf Einstellungen, scrollst zu System und klickst dort auf Backup. Dann einfach auf "Backup jetzt erstellen". Das kostet zwei Minuten und ist die Absicherung, falls irgendetwas schiefläuft.

card-mod vollständig entfernen

Der erste Schritt ist, card-mod komplett aus Home Assistant rauszuwerfen. Das passiert in drei Teilschritten.

Zuerst öffnest du deine configuration.yaml im File Editor oder Studio Code Server und suchst nach einem Eintrag, der auf die card-mod Ressource verweist. Der sieht ungefähr so aus:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

Wenn du den findest, entfernst du ihn und speicherst die Datei. Danach startest du Home Assistant neu.

Als nächstes gehst du in HACS, suchst nach "Card Mod" und entfernst die Erweiterung dort. Auch danach: Home Assistant neu starten.

Dann noch eine Sache, die man leicht vergisst. Öffne ein beliebiges Dashboard, geh auf "Dashboard bearbeiten", klick auf die drei Punkte und dann auf "Ressourcen verwalten". Falls card-mod dort noch als Ressource eingetragen ist, entfernst du diesen Eintrag ebenfalls. Danach sicherheitshalber noch einmal neu starten.

UIX über HACS installieren und als Integration einrichten

Jetzt kommt UIX rein. In HACS suchst du nach "UIX Extension". Nimm genau diese Erweiterung, die UIX Extension for Home Assistant. Wenn eine andere Integration nach Zugangsdaten oder Entities fragt, ist das die falsche, sofort wieder entfernen.

Nach dem Download gehst du auf Einstellungen, dann auf Geräte und Dienste und klickst auf "Integration hinzufügen". Dort suchst du wieder nach "UIX Extension for Home Assistant" und fügst sie hinzu.

Danach wirst du aufgefordert, das Frontend neu zu laden. Drück F5, oder auf dem Mac Command + Shift + R für einen Hard Reload, damit der Browser-Cache wirklich geleert wird. Das kannst du ruhig ein paar Mal hintereinander machen, der Cache ist manchmal ziemlich hartnäckig.

Ob die Installation geklappt hat, siehst du in den Browser-Entwicklertools. Rechtsklick irgendwo auf dem Dashboard, auf "Untersuchen" klicken, dann zur Konsole wechseln und nach oben scrollen. Wenn UIX sauber geladen ist, steht da ein entsprechender Eintrag.

Themes von card-mod auf UIX umstellen

Falls du Themes mit card-mod-Einträgen nutzt, ist die Anpassung denkbar einfach. Wo vorher card-mod-theme: stand, schreibst du jetzt uix-theme:. Das zieht sich durch alle Deklarationen. Aus card-mod wird uix, überall.

Ein Beispiel, wie das vorher ausgesehen hat:

my-theme:
  card-mod-theme: |
    ha-card {
      border-radius: 12px;
    }

Und so sieht es mit UIX aus:

my-theme:
  uix-theme: |
    ha-card {
      border-radius: 12px;
    }

Der Rest der Theme-Datei bleibt unverändert. Wer seine Themes nicht sofort anpasst und noch die alte card-mod-Syntax drin hat, dem fällt das optisch erstmal nicht auf, weil UIX die alten Stile weiterhin versteht. Aber irgendwann lohnt sich die Bereinigung.

Den richtigen Selektor mit dem UIX-Tool finden

Das ist für mich der überzeugendste Grund, jetzt schon zu wechseln. UIX bringt ein Tool mit, das dir beim Finden der richtigen CSS-Selektoren direkt hilft, statt dass du dich durch den Shadow DOM wühlen musst.

So funktioniert es: Du öffnest die Browser-Entwicklertools mit Rechtsklick und "Untersuchen", klickst oben im Inspector auf das Element-Auswahl-Tool und klickst dann das Element an, das du stylen möchtest. Danach wechselst du zur Konsole und gibst dort ein:

uix_path(0)

Das Ergebnis ist die fertige Boilerplate für genau dieses Element, inklusive des richtigen Selektors. Die kopierst du, fügst sie in den YAML-Code deiner Karte ein und passt nur noch die CSS-Eigenschaft an. Zum Beispiel:

uix:
  "$ ha-icon":
    background-color: red

Das spart wahnsinnig viel Zeit gegenüber dem manuellen Durchsuchen des DOM-Baums.

Was UIX Forge und die neuen Features mitbringen

Neben dem reinen Styling gibt es mit UIX Forge jetzt die Möglichkeit, Karten komplett dynamisch zu gestalten. Du kannst Name und Icon einer Karte abhängig vom Zustand einer Entität setzen. Ein Beispiel, das den Sonnenstand auswertet:

type: tile
entity: sun.sun
uix_forge:
  name: "{{ 'Tag' if is_state('sun.sun', 'above_horizon') else 'Nacht' }}"
  icon: "{{ 'mdi:weather-sunny' if is_state('sun.sun', 'above_horizon') else 'mdi:weather-night' }}"

Dafür brauchst du keine zusätzliche Integration, das ist direkt in UIX eingebaut.

Weiterhin kannst du jetzt Karten oder ganze Hintergrundelemente abhängig vom Zustand einer Entität einfärben. Und es gibt die Möglichkeit, ein Kamerabild als Dashboard-Hintergrund zu setzen, gesteuert über ein Theme mit einer Bedingung, auf welchem Dashboard und welcher Ansicht man sich gerade befindet. Das funktioniert laut meinen Tests allerdings nur mit Standbildern, nicht mit dem Live-Stream.

Alle weiteren Beispiele und Möglichkeiten findest du in der UIX Dokumentation und direkt im Repository. Da lohnt sich ein Blick, gerade wenn du spezifischere Anpassungen planst.

Nutzt du card-mod noch aktiv, oder hast du den Umstieg auf UIX schon hinter dir? Und falls du vorher schon kreativere Anpassungen mit card-mod gemacht hast, was davon läuft bei dir jetzt mit UIX weiter?