Home Assistant Dashboard-Tipps: Cards, Themes und Custom Components

Das Standard-Dashboard von Home Assistant ist funktional, aber optisch eher nüchtern. Mit ein paar Custom Cards, einem durchdachten Layout und dem richtigen Theme verwandelst du es in ein professionelles Control Center, das sich sehen lassen kann.

Grundlagen: Dashboard-Typen in Home Assistant

Home Assistant bietet drei Wege, Dashboards zu erstellen:

Welcher Hub hinter deinem Dashboard steckt, macht einen Unterschied, im Datenblatt-Vergleich aller Smart-Home-Hubs mit Matter, Thread, Zigbee und Z-Wave vergleichst du die Zentralen mit belegten Fakten.

• Standard-Dashboard (automatisch): Home Assistant generiert automatisch Karten für alle Entitäten. Gut zum Einstieg, aber nicht anpassbar.
• Manuelles Dashboard (Lovelace): Du baust das Dashboard selbst mit Karten im visuellen Editor oder per YAML. Das ist der empfohlene Weg.
• Sections-Dashboard (seit 2024.8): Der neue Layout-Typ mit Drag-and-Drop. Moderner, aber noch nicht alle Custom Cards werden unterstützt.

HACS installieren: Das Tor zu Custom Cards

Die meisten guten Dashboard-Komponenten kommen aus HACS (Home Assistant Community Store). HACS ist ein inoffizieller App Store für Home Assistant, der dir Zugriff auf Hunderte von Custom Cards, Themes und Integrationen gibt.

Installation

1. Gehe zu Einstellungen > Add-ons > Add-on Store und installiere das Terminal & SSH Add-on.
2. Führe in der Terminal-Konsole folgenden Befehl aus:
   wget -O - https://get.hacs.xyz | bash -
3. Starte Home Assistant neu.
4. Gehe zu Einstellungen > Geräte & Dienste > Integration hinzufügen und suche nach „HACS".
5. Folge den Anweisungen zur GitHub-Authentifizierung.

Die besten Custom Cards für dein Dashboard

1. Mushroom Cards, Must-Have

Mushroom Cards sind die beliebtesten Custom Cards in der Community. Sie bieten moderne, minimalistische Karten für fast jeden Zweck. Installation über HACS > Frontend > „Mushroom" suchen > Installieren.

Mushroom Title Card

type: custom:mushroom-title-card title: Wohnzimmer subtitle: "{{ states('sensor.wohnzimmer_temperatur') }}°C"

Mushroom Entity Card

type: custom:mushroom-entity-card
entity: light.wohnzimmer
icon_color: amber
fill_container: true
tap_action:
 action: toggle
hold_action:
 action: more-info

Mushroom Climate Card

type: custom:mushroom-climate-card entity: climate.schlafzimmer show_temperature_control: true collapsible_controls: true

Mushroom Chips Card (Header)

type: custom:mushroom-chips-card chips: - type: entity entity: sensor.temperatur_aussen icon: mdi:thermometer - type: entity entity: sensor.stromverbrauch_taeglich icon: mdi:flash - type: entity entity: sensor.personen_zuhause icon: mdi:account-group

2. Button Card, Maximale Anpassung

Die Button Card (custom:button-card) ist die flexibelste Custom Card. Du kannst Farben, Icons, Layouts und Aktionen pixelgenau anpassen. Dafür ist die Konfiguration komplexer als bei Mushroom.

type: custom:button-card entity: light.wohnzimmer name: Wohnzimmer icon: mdi:sofa show_state: true styles: card: - border-radius: 12px - padding: 16px icon: - width: 32px name: - font-size: 14px - font-weight: 500 state: - value: "on" styles: card: - background: "rgba(255, 180, 50, 0.15)" icon: - color: "#ffb432" - value: "off" styles: card: - background: "rgba(0,0,0,0.05)"

3. ApexCharts Card, Diagramme

Für historische Daten, Verlaufskurven und Statistiken ist die ApexCharts Card unverzichtbar. Sie bietet Linien-, Balken- und Flächendiagramme mit voller Anpassbarkeit.

type: custom:apexcharts-card header: title: "Temperaturverlauf" show: true graph_span: 24h series: - entity: sensor.wohnzimmer_temperatur type: line stroke_width: 2 color: "#e74c3c" - entity: sensor.temperatur_aussen type: line stroke_width: 2 color: "#3498db"

4. Mini Graph Card, Kompakte Grafiken

Für kleine, kompakte Verlaufsgrafiken direkt in einer Entity Card ist die Mini Graph Card ideal. Weniger Konfiguration als ApexCharts, dafür schneller eingerichtet.

type: custom:mini-graph-card entities: - sensor.cpu_temperatur name: "CPU Temperatur" hours_to_show: 24 line_width: 2 font_size: 75 show: labels: true points: false

Themes: Das visuelle Fundament

Ein gutes Theme macht den Unterschied zwischen „selbst zusammengebastelt" und „professionell". Die besten Themes aus HACS:

Catppuccin Theme

Sanfte Pastellfarben in vier Varianten (Latte, Frappe, Macchiato, Mocha). Modern und augenfreundlich, besonders im Dark Mode.

Mushroom Shadow Theme

Speziell für Mushroom Cards optimiert. Dezente Schatten und abgerundete Ecken für ein konsistentes Erscheinungsbild.

iOS Theme

Nachbildung des Apple-Home-Looks. Grosse, abgerundete Karten mit Blur-Effekt im Hintergrund.

Layout-Tipps für ein aufgeräumtes Dashboard

1. Tab-basierte Struktur

Erstelle separate Tabs für verschiedene Bereiche:

• Home: Übersicht mit den wichtigsten Werten und Schnellzugriff
• Lichter: Alle Leuchten sortiert nach Räumen
• Klima: Thermostate, Temperatur-Verlauf, Lüftung
• Sicherheit: Kameras, Türsensoren, Alarmsystem
• Medien: Musikplayer, TV, Sonos

2. Grid Layout verwenden

Mit dem Layout Card (HACS) kannst du Karten in einem Grid anordnen:

type: custom:layout-card layout_type: custom:grid-layout layout: grid-template-columns: 1fr 1fr 1fr grid-gap: 8px cards: - type: custom:mushroom-entity-card entity: light.wohnzimmer - type: custom:mushroom-entity-card entity: light.kueche - type: custom:mushroom-entity-card entity: light.schlafzimmer

3. Conditional Cards für kontextabhängige Anzeige

Zeige Karten nur an, wenn sie relevant sind:

type: conditional conditions: - condition: state entity: binary_sensor.waschmaschine_laeuft state: "on" card: type: custom:mushroom-entity-card entity: sensor.waschmaschine_restlaufzeit name: "Waschmaschine läuft" icon: mdi:washing-machine icon_color: blue

4. Sidebar-Layout für Tablets

Für an der Wand montierte Tablets empfiehlt sich ein Sidebar-Layout: Links eine schmale Spalte mit Navigation und Status, rechts der Hauptbereich mit Raumsteuerung.

Performance-Tipps

• Custom Cards minimieren: Jede Custom Card lädt zusätzliches JavaScript. 5–8 verschiedene Custom Card Typen sind ein guter Richtwert.
• Bilder komprimieren: Wenn du Hintergrundbilder oder Raumfotos nutzt, komprimiere sie auf max. 200 KB.
• History-Graphen begrenzen: Zeige maximal 24–48 Stunden in Verlaufsgrafiken an. Längere Zeiträume belasten den Browser.
• Entity Filter nutzen: Statt einer Entity Card pro Gerät nutze Auto-Entities oder Entity Filter Cards, die automatisch filtern.