Ha Dashboard

Home Assistant Dashboard Skill

Configure Lovelace dashboards, cards, views, and themes for Home Assistant.

Before You Start

This skill prevents 5 common errors and saves ~40% tokens.

Known Issues This Skill Prevents

1. YAML indentation errors (must use 2 spaces, never tabs) 2. Invalid entity ID format (must be domain.entity_name) 3. Missing required card properties (e.g., entity for button cards) 4. Incorrect view type configuration 5. Theme variables with wrong syntax

Quick Start

Step 1: Enable YAML Mode (Optional)

# configuration.yaml
lovelace:
  mode: yaml

Why this matters: YAML mode gives full control over dashboard configuration and enables version control.

Step 2: Create Basic Dashboard Structure

# ui-lovelace.yaml or dashboards.yaml
title: My Home
views:
  - title: Home
    path: home
    cards:
      - type: markdown
        content: Welcome to your dashboard!

Why this matters: This minimal structure validates your YAML setup before adding complexity.

Step 3: Add Cards to Views

views:
  - title: Living Room
    path: living-room
    cards:
      - type: entities
        title: Lights
        entities:
          - light.living_room
          - light.kitchen
      - type: weather-forecast
        entity: weather.home
        forecast_type: daily

Why this matters: Cards are the building blocks of dashboards - start with simple cards before complex ones.

Critical Rules

Always Do

• Use 2-space indentation consistently
• Use entity ID format: domain.entity_name (e.g., light.living_room)
• Validate YAML before reloading (use an online YAML validator)
• Define tap_action for interactive cards
• Test on mobile devices

Never Do

• Use tabs for indentation
• Hardcode entity names that might change
• Create views with 20+ cards (split into multiple views)
• Forget forecast_type on weather-forecast cards (required since 2023)
• Mix UI-managed and YAML-managed dashboards without understanding the mode

Common Mistakes

Wrong:

type: button
entity:light.living_room
  tap_action:
    action: toggle

Correct:

type: button
entity: light.living_room
tap_action:
  action: toggle

Why: Missing space after colon and incorrect indentation are the most common YAML errors.

Known Issues Prevention

Configuration Reference

Dashboard Configuration (configuration.yaml)

lovelace:
  mode: yaml                    # or 'storage' for UI mode
  resources:
    - url: /local/card.js       # Custom card resources
      type: module
  dashboards:
    lovelace-custom:
      mode: yaml
      title: Custom
      icon: mdi:view-dashboard
      show_in_sidebar: true
      filename: custom-dashboard.yaml

Key settings:

• mode: yaml for manual control, storage for UI editing
• resources: Load custom cards/CSS (only in YAML mode)
• dashboards: Define additional dashboards

View Configuration

views:
  - title: View Name           # Tab title
    path: view-path            # URL path (/lovelace/view-path)
    icon: mdi:home             # Tab icon (optional)
    type: masonry              # masonry, panel, sections, sidebar
    theme: dark-mode           # Apply specific theme
    subview: false             # Hide from navigation
    cards: []                  # Card list

Common Patterns

Horizontal Stack of Buttons

type: horizontal-stack
cards:
  - type: button
    entity: light.living_room
    name: Living
    tap_action:
      action: toggle
  - type: button
    entity: light.bedroom
    name: Bedroom
    tap_action:
      action: toggle

Conditional Card Display

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.home_occupied
    state: "on"
card:
  type: entities
  title: Home Controls
  entities:
    - light.living_room
    - climate.thermostat

Bundled Resources

References

Located in references/:

• `card-reference.md` - All built-in card types with YAML examples
• `view-types.md` - View layout comparison and selection guide
• `theme-variables.md` - CSS variables for theming
• `common-patterns.md` - Conditional visibility, stacks, entity rows

Note: For deep dives on specific topics, see the reference files above.

Assets

Located in assets/:

• `dashboard-template.yaml` - Starter dashboard configuration
• `card-snippets.yaml` - Copy-paste card examples

Copy these templates as starting points for your implementation.

Context7 Documentation

For current documentation, use these Context7 library IDs:

Official Documentation

• Dashboards Overview
• Card Types
• Views
• Themes
• Custom Cards (Developer)

Troubleshooting

Dashboard Shows Blank

Symptoms: Dashboard loads but shows nothing or error.

Solution:

# Check Home Assistant logs
ha core logs | grep -i lovelace

# Validate YAML online or locally
python -c "import yaml; yaml.safe_load(open('ui-lovelace.yaml'))"

Custom Card Not Loading

Symptoms: "Custom element doesn't exist" error.

Solution:

# Ensure resource is loaded
lovelace:
  resources:
    - url: /local/my-card.js
      type: module  # or 'js' for non-module

# Check file exists at /config/www/my-card.js

Setup Checklist

Before using this skill, verify:

• [ ] Home Assistant is running (2023.1+)
• [ ] You have access to configuration files (File Editor or VS Code add-on)
• [ ] You know your entity IDs (check Developer Tools > States)
• [ ] You've decided on YAML vs UI mode for dashboard management

Home Assistant Dashboard Skill

Configure Lovelace dashboards, cards, views, and themes for Home Assistant.

What This Skill Does

Provides expert guidance for configuring Home Assistant Lovelace dashboards, including card selection, view layouts, theming, and custom card development.

Core Capabilities

• Dashboard and view configuration (Masonry, Panel, Sections, Sidebar layouts)
• Built-in card configuration (40+ card types)
• Theme customization and CSS variables
• Custom card development guidance (LitElement/web components)
• HACS frontend integration recommendations

Auto-Trigger Keywords

Primary Keywords

Exact terms that strongly trigger this skill:

• lovelace
• dashboard
• card
• view
• theme
• panel

Secondary Keywords

Related terms that may trigger in combination:

• tile
• button-card
• mushroom
• mini-graph-card
• entities card
• glance
• gauge
• weather-forecast
• picture-elements
• horizontal-stack
• vertical-stack
• conditional
• yaml mode

Error-Based Keywords

Common error messages that should trigger this skill:

• "Unknown card type"
• "card configuration invalid"
• "Custom element doesn't exist"
• "Invalid YAML"
• "Entity not found"

Known Issues Prevention

When to Use

Use This Skill For

• Creating or modifying Lovelace dashboards
• Configuring cards (entities, buttons, tiles, gauges, etc.)
• Setting up view layouts (masonry, panel, sections, sidebar)
• Applying or creating themes
• Developing custom Lovelace cards
• Troubleshooting dashboard display issues

Don't Use This Skill For

• Home Assistant automations and scripts
• Integration setup and configuration
• Backend YAML configuration (not dashboard-related)
• Add-on installation and management
• Entity configuration (device/entity settings)

Quick Usage

# Basic dashboard with entities card
views:
  - title: Home
    cards:
      - type: entities
        title: Lights
        entities:
          - light.living_room
          - light.bedroom

Token Efficiency

File Structure

ha-dashboard/
├── SKILL.md        # Detailed instructions and patterns
├── README.md       # This file - discovery and quick reference
├── references/     # Supporting documentation
│   ├── card-reference.md     # Built-in card YAML examples
│   ├── view-types.md         # View layout comparison
│   ├── theme-variables.md    # CSS variables for theming
│   └── common-patterns.md    # Conditionals, stacks, entity rows
└── assets/
    ├── dashboard-template.yaml   # Starter dashboard config
    └── card-snippets.yaml        # Copy-paste card configs

Dependencies

Official Documentation

• Dashboards Overview
• Card Types
• Views
• Themes
• Custom Cards (Developer)

Related Skills

• ha-automation - Home Assistant automations and scripts (if available)
• ha-integration - Home Assistant integration setup (if available)

---

License: MIT

Card Reference

Complete reference for Home Assistant Lovelace built-in card types with YAML examples.

Entity Display Cards

Entities Card

Display a list of entities with optional header toggle.

type: entities
title: Living Room
show_header_toggle: true
state_color: true
entities:
  - entity: light.living_room
    name: Main Light
    icon: mdi:ceiling-light
  - entity: switch.fan
    secondary_info: last-changed
  - type: divider
  - type: section
    label: Climate
  - entity: climate.thermostat

Glance Card

Compact overview of multiple entities.

type: glance
title: At a Glance
columns: 4
show_name: true
show_state: true
show_icon: true
entities:
  - entity: sensor.temperature
    name: Temp
  - entity: sensor.humidity
    name: Humidity
  - entity: binary_sensor.motion
    show_last_changed: true
  - entity: light.bedroom
    tap_action:
      action: toggle

Button Card

Single entity button with customizable actions.

type: button
entity: light.living_room
name: Living Room
icon: mdi:lightbulb
show_name: true
show_icon: true
show_state: true
tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: call-service
  service: light.turn_on
  data:
    brightness_pct: 100
    entity_id: light.living_room

Tile Card

Modern entity control with features.

type: tile
entity: light.living_room
name: Living Room Light
icon: mdi:lightbulb
color: amber
show_entity_picture: false
vertical: false
features:
  - type: light-brightness
  - type: light-color-temp

Tile Features by Domain:

• light: light-brightness, light-color-temp
• climate: climate-hvac-modes, target-temperature
• cover: cover-open-close, cover-position, cover-tilt
• fan: fan-speed
• vacuum: vacuum-commands
• select/input_select: select-options
• lawn_mower: lawn-mower-commands

Sensor Card

Sensor with optional graph.

type: sensor
entity: sensor.temperature
name: Temperature
icon: mdi:thermometer
graph: line
hours_to_show: 24
detail: 2

Gauge & Statistics Cards

Gauge Card

Circular gauge for numeric values.

type: gauge
entity: sensor.cpu_usage
name: CPU Usage
unit: "%"
min: 0
max: 100
severity:
  green: 0
  yellow: 60
  red: 80
needle: true

Gauge with Segments:

type: gauge
entity: sensor.battery
segments:
  - from: 0
    color: red
  - from: 20
    color: orange
  - from: 40
    color: yellow
  - from: 60
    color: green

Statistic Card

Display statistical values over time.

type: statistic
entity: sensor.energy_usage
stat_type: mean
period:
  calendar:
    period: month
name: Average Energy This Month

stat_type options: mean, min, max, sum, state, change

Statistics Graph Card

Historical statistics visualization.

type: statistics-graph
title: Energy Statistics
entities:
  - sensor.daily_energy
stat_types:
  - mean
  - min
  - max
period:
  calendar:
    period: day
days_to_show: 7

Media Cards

Weather Forecast Card

Weather with forecast display.

type: weather-forecast
entity: weather.home
show_current: true
show_forecast: true
forecast_type: daily
secondary_info_attribute: humidity

forecast_type options: daily, hourly, twice_daily

Media Control Card

Media player controls.

type: media-control
entity: media_player.living_room

Picture Card

Static image display.

type: picture
image: /local/images/floorplan.png
tap_action:
  action: navigate
  navigation_path: /lovelace/floorplan

Picture Entity Card

Entity represented by an image.

type: picture-entity
entity: camera.front_door
camera_view: live
show_name: true
show_state: true
tap_action:
  action: more-info

Picture Glance Card

Image with entity state overlay.

type: picture-glance
title: Living Room
image: /local/images/living-room.jpg
entities:
  - entity: light.living_room
  - entity: binary_sensor.motion
  - entity: sensor.temperature

Picture Elements Card

Interactive image with positioned elements.

type: picture-elements
image: /local/images/floorplan.png
elements:
  - type: state-badge
    entity: binary_sensor.motion_living
    style:
      top: 30%
      left: 40%
  - type: state-icon
    entity: light.living_room
    tap_action:
      action: toggle
    style:
      top: 50%
      left: 60%
  - type: state-label
    entity: sensor.temperature
    style:
      top: 70%
      left: 20%
      color: white

Information Cards

Markdown Card

Render markdown content with templates.

type: markdown
title: Welcome
content: |
  ## Hello {{ user }}!

  The temperature is **{{ states('sensor.temperature') }}°C**

  {% if is_state('binary_sensor.motion', 'on') %}
  Motion detected!
  {% endif %}

Logbook Card

Entity history log.

type: logbook
entities:
  - binary_sensor.front_door
  - lock.front_door
hours_to_show: 24

History Graph Card

Historical state graph.

type: history-graph
title: Temperature History
entities:
  - entity: sensor.indoor_temp
    name: Indoor
  - entity: sensor.outdoor_temp
    name: Outdoor
hours_to_show: 48

Calendar Card

Calendar events display.

type: calendar
entities:
  - calendar.family
  - calendar.work
initial_view: listWeek

Map Card

Entity location map.

type: map
entities:
  - entity: device_tracker.phone
  - entity: zone.home
  - entity: zone.work
aspect_ratio: 16:9
default_zoom: 14
dark_mode: true

Iframe Card

Embed external content.

type: iframe
url: https://grafana.local/d/dashboard
aspect_ratio: 16:9

Climate Cards

Thermostat Card

Climate control interface.

type: thermostat
entity: climate.living_room
features:
  - type: climate-hvac-modes
    hvac_modes:
      - heat
      - cool
      - auto
      - "off"

Humidifier Card

Humidity control.

type: humidifier
entity: humidifier.bedroom
features:
  - type: humidifier-modes

Layout Cards

Horizontal Stack

Cards side by side.

type: horizontal-stack
cards:
  - type: button
    entity: light.living_room
  - type: button
    entity: light.bedroom
  - type: button
    entity: light.kitchen

Vertical Stack

Cards stacked vertically.

type: vertical-stack
cards:
  - type: entities
    entities:
      - light.living_room
  - type: history-graph
    entities:
      - sensor.temperature

Grid Card

Grid layout for cards.

type: grid
columns: 3
square: true
cards:
  - type: button
    entity: light.one
  - type: button
    entity: light.two
  - type: button
    entity: light.three

Conditional & Filter Cards

Conditional Card

Show card based on conditions.

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.home_occupied
    state: "on"
  - condition: numeric_state
    entity: sensor.temperature
    above: 20
card:
  type: entities
  entities:
    - climate.thermostat

Entity Filter Card

Dynamic entity list based on state.

type: entity-filter
entities:
  - light.living_room
  - light.bedroom
  - light.kitchen
  - light.bathroom
state_filter:
  - "on"
card:
  type: glance
  title: Lights On
show_empty: false

Special Cards

Alarm Panel Card

Alarm control interface.

type: alarm-panel
entity: alarm_control_panel.home
states:
  - arm_home
  - arm_away
  - arm_night

Light Card

Simple light control.

type: light
entity: light.living_room
name: Living Room
icon: mdi:ceiling-light

Shopping List Card

Shopping list management.

type: shopping-list
title: Grocery List

Todo List Card

Todo list display.

type: todo-list
entity: todo.shopping
title: Shopping List

Energy Cards

Energy dashboard cards (require energy integration).

# Energy Distribution
type: energy-distribution
link_dashboard: true

# Energy Usage Graph
type: energy-usage-graph

# Energy Solar Graph
type: energy-solar-graph

Card Actions Reference

All cards support these action types:

tap_action:
  action: toggle              # Toggle entity state
  # OR
  action: more-info           # Open entity dialog
  # OR
  action: navigate            # Navigate to view
  navigation_path: /lovelace/bedroom
  # OR
  action: url                 # Open URL
  url_path: https://example.com
  # OR
  action: call-service        # Call Home Assistant service
  service: light.turn_on
  data:
    entity_id: light.bedroom
    brightness_pct: 50
  # OR
  action: none                # Disable action

Actions available on most cards:

• tap_action - Single tap/click
• hold_action - Long press/hold
• double_tap_action - Double tap/click

Common Patterns Reference

Frequently used Lovelace dashboard patterns and configurations.

Conditional Visibility

Conditional Card

Show card based on entity state:

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.someone_home
    state: "on"
card:
  type: entities
  title: Home Controls
  entities:
    - light.living_room
    - climate.thermostat

Multiple Conditions (AND)

All conditions must be true:

type: conditional
conditions:
  - condition: state
    entity: binary_sensor.someone_home
    state: "on"
  - condition: numeric_state
    entity: sun.sun
    attribute: elevation
    below: 0
card:
  type: entities
  title: Evening Home
  entities:
    - light.living_room

State Not Equal

type: conditional
conditions:
  - condition: state
    entity: alarm_control_panel.home
    state_not: disarmed
card:
  type: alarm-panel
  entity: alarm_control_panel.home

Numeric State Conditions

type: conditional
conditions:
  - condition: numeric_state
    entity: sensor.temperature
    above: 25
card:
  type: entities
  title: It's Hot!
  entities:
    - climate.ac

Screen Width Conditions

type: conditional
conditions:
  - condition: screen
    media_query: "(min-width: 768px)"
card:
  type: entities
  title: Desktop Only
  entities:
    - light.living_room

User Conditions

type: conditional
conditions:
  - condition: user
    users:
      - user_id_1
      - user_id_2
card:
  type: entities
  title: Admin Only
  entities:
    - input_boolean.admin_mode

Entity Filtering

Entity Filter Card

Dynamic list based on state:

type: entity-filter
entities:
  - light.living_room
  - light.bedroom
  - light.kitchen
  - light.bathroom
state_filter:
  - "on"
card:
  type: glance
  title: Lights On
show_empty: false

Filter by Attribute

type: entity-filter
entities:
  - sensor.phone_battery
  - sensor.tablet_battery
  - sensor.laptop_battery
state_filter:
  - operator: "<"
    value: 20
card:
  type: entities
  title: Low Battery Devices

Filter Operators

state_filter:
  # Exact match
  - "on"

  # Not equal
  - operator: "!="
    value: "off"

  # Numeric comparisons
  - operator: "<"
    value: 50
  - operator: ">"
    value: 100
  - operator: "<="
    value: 25
  - operator: ">="
    value: 75

  # Regex
  - operator: "regex"
    value: ".*running.*"

Stack Layouts

Horizontal Stack

Cards side by side:

type: horizontal-stack
cards:
  - type: button
    entity: light.living_room
    name: Living
    icon: mdi:sofa
    tap_action:
      action: toggle
  - type: button
    entity: light.bedroom
    name: Bedroom
    icon: mdi:bed
    tap_action:
      action: toggle
  - type: button
    entity: light.kitchen
    name: Kitchen
    icon: mdi:silverware-fork-knife
    tap_action:
      action: toggle

Vertical Stack

Cards stacked vertically:

type: vertical-stack
cards:
  - type: markdown
    content: "## Living Room"
  - type: entities
    entities:
      - light.living_room
      - switch.living_room_fan
  - type: history-graph
    entities:
      - sensor.living_room_temperature
    hours_to_show: 24

Nested Stacks

Create complex layouts:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: gauge
        entity: sensor.temperature
        name: Temp
      - type: gauge
        entity: sensor.humidity
        name: Humidity
  - type: entities
    entities:
      - climate.thermostat

Grid Layout

type: grid
columns: 3
square: true
cards:
  - type: button
    entity: light.one
  - type: button
    entity: light.two
  - type: button
    entity: light.three
  - type: button
    entity: light.four
  - type: button
    entity: light.five
  - type: button
    entity: light.six

Entity Row Types

Basic Entity Row

type: entities
entities:
  - entity: light.living_room
    name: Main Light
    icon: mdi:ceiling-light
    secondary_info: last-changed

Attribute Row

Display specific attribute:

type: entities
entities:
  - type: attribute
    entity: sun.sun
    attribute: next_rising
    name: Sunrise
    icon: mdi:weather-sunset-up

Button Row

Multiple buttons in entities card:

type: entities
entities:
  - light.living_room
  - type: buttons
    entities:
      - entity: scene.relax
        name: Relax
        icon: mdi:sofa
      - entity: scene.bright
        name: Bright
        icon: mdi:brightness-7
      - entity: scene.movie
        name: Movie
        icon: mdi:movie

Call Service Row

type: entities
entities:
  - type: call-service
    name: Restart Home Assistant
    icon: mdi:restart
    action_name: Restart
    service: homeassistant.restart

Divider and Section

type: entities
entities:
  - light.living_room
  - light.bedroom
  - type: divider
  - type: section
    label: Climate
  - climate.thermostat
  - sensor.temperature

Web Link Row

type: entities
entities:
  - type: weblink
    name: Home Assistant
    url: https://www.home-assistant.io
    icon: mdi:home-assistant

Custom Secondary Info

type: entities
entities:
  - entity: sensor.temperature
    secondary_info: last-changed

  - entity: light.living_room
    secondary_info: last-updated

  - entity: media_player.tv
    secondary_info: entity-id

  - entity: climate.thermostat
    secondary_info: attribute
    attribute: current_temperature

Actions

Tap Actions

# Toggle entity
tap_action:
  action: toggle

# Open more info dialog
tap_action:
  action: more-info

# Navigate to another view
tap_action:
  action: navigate
  navigation_path: /lovelace/bedroom

# Open external URL
tap_action:
  action: url
  url_path: https://example.com

# Call service
tap_action:
  action: call-service
  service: light.turn_on
  data:
    entity_id: light.living_room
    brightness_pct: 100
    color_name: blue

# Do nothing
tap_action:
  action: none

# Fire DOM event (for custom cards)
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup

Confirmation Dialog

tap_action:
  action: call-service
  service: script.dangerous_action
  confirmation:
    text: "Are you sure you want to run this?"

Hold and Double-Tap

tap_action:
  action: toggle
hold_action:
  action: more-info
double_tap_action:
  action: call-service
  service: light.turn_on
  data:
    brightness_pct: 100
    entity_id: light.bedroom

Templates in Markdown

Basic Templates

type: markdown
content: |
  ## Welcome {{ user }}!

  The temperature is **{{ states('sensor.temperature') }}°C**

  Time: {{ now().strftime('%H:%M') }}

Conditionals

type: markdown
content: |
  {% if is_state('binary_sensor.door', 'on') %}
  **Door is open!**
  {% else %}
  Door is closed
  {% endif %}

Loops

type: markdown
content: |
  ## Lights On:
  {% for state in states.light if state.state == 'on' %}
  - {{ state.name }}
  {% endfor %}

Attributes

type: markdown
content: |
  Battery: {{ state_attr('sensor.phone', 'battery_level') }}%

  Weather: {{ state_attr('weather.home', 'temperature') }}°C,
  {{ state_attr('weather.home', 'humidity') }}% humidity

Card Header/Footer

Buttons Footer

type: entities
title: Living Room
entities:
  - light.living_room
  - switch.fan
footer:
  type: buttons
  entities:
    - entity: scene.relax
      icon: mdi:sofa
    - entity: scene.bright
      icon: mdi:brightness-7

Graph Footer

type: entities
title: Climate
entities:
  - climate.thermostat
footer:
  type: graph
  entity: sensor.temperature
  hours_to_show: 24
  detail: 2

Picture Header

type: entities
title: Room
header:
  type: picture
  image: /local/images/room.jpg
  tap_action:
    action: navigate
    navigation_path: /lovelace/room-detail
entities:
  - light.room

Picture Elements Patterns

State Badge

type: picture-elements
image: /local/floorplan.png
elements:
  - type: state-badge
    entity: binary_sensor.motion
    style:
      top: 30%
      left: 40%

State Icon with Toggle

- type: state-icon
  entity: light.living_room
  tap_action:
    action: toggle
  style:
    top: 50%
    left: 60%
    "--paper-item-icon-color": yellow

State Label

- type: state-label
  entity: sensor.temperature
  style:
    top: 70%
    left: 20%
    color: white
    font-size: 16px

Conditional Element

- type: conditional
  conditions:
    - entity: binary_sensor.motion
      state: "on"
  elements:
    - type: icon
      icon: mdi:motion-sensor
      style:
        top: 30%
        left: 40%
        color: red

Utility Patterns

Empty State Message

type: entity-filter
entities:
  - light.living_room
  - light.bedroom
state_filter:
  - "on"
show_empty: true
card:
  type: markdown
  content: "No lights are on"

Loading Placeholder

type: conditional
conditions:
  - condition: state
    entity: sensor.data
    state: unavailable
card:
  type: markdown
  content: "Loading data..."

Responsive Columns

type: glance
columns: 4  # Desktop: 4 columns, mobile: fewer
entities:
  - sensor.one
  - sensor.two
  - sensor.three
  - sensor.four

Theme Variables Reference

CSS variables for Home Assistant Lovelace theming.

Theme Configuration

Themes are defined in configuration.yaml:

frontend:
  themes:
    my_theme:
      # Variables go here
      primary-color: "#1976D2"

Or in a separate themes file:

# configuration.yaml
frontend:
  themes: !include_dir_merge_named themes/

# themes/my_theme.yaml
my_theme:
  primary-color: "#1976D2"

Core Colors

Primary & Accent

primary-color: "#03A9F4"              # Main UI color
accent-color: "#FF5722"               # Accent/highlight color
primary-text-color: "#212121"         # Main text
secondary-text-color: "#727272"       # Secondary/muted text
text-primary-color: "#FFFFFF"         # Text on primary color background

Background Colors

primary-background-color: "#FAFAFA"   # Main background
secondary-background-color: "#FFFFFF" # Cards/surfaces
card-background-color: "#FFFFFF"      # Card background
paper-dialog-background-color: "#FFFFFF" # Dialog background

Dividers & Borders

divider-color: "rgba(0, 0, 0, 0.12)"  # Divider lines
disabled-text-color: "#BDBDBD"        # Disabled elements

State Colors

Domain-Specific State Colors

# Format: state-{domain}-{state}-color
state-light-on-color: "#FFD700"
state-light-off-color: "#9E9E9E"
state-switch-on-color: "#4CAF50"
state-switch-off-color: "#9E9E9E"
state-cover-open-color: "#2196F3"
state-cover-closed-color: "#9E9E9E"
state-lock-locked-color: "#4CAF50"
state-lock-unlocked-color: "#F44336"
state-binary_sensor-on-color: "#4CAF50"
state-binary_sensor-off-color: "#9E9E9E"

Device Class Colors

# Format: state-{domain}-{device_class}-{state}-color
state-binary_sensor-motion-on-color: "#FF9800"
state-binary_sensor-door-on-color: "#F44336"
state-binary_sensor-window-on-color: "#2196F3"
state-sensor-battery-low-color: "#F44336"

Generic State Colors

state-icon-color: "#44739E"           # Default icon color
state-icon-active-color: "#FDD835"    # Active state icon
state-icon-unavailable-color: "#BDBDBD"
state-on-color: "#66BB6A"             # Generic on state
state-off-color: "#BDBDBD"            # Generic off state
state-unavailable-color: "#BDBDBD"
state-unknown-color: "#9E9E9E"

Card Styling

Card Appearance

ha-card-background: "#FFFFFF"
ha-card-border-radius: "12px"
ha-card-border-color: "transparent"
ha-card-border-width: "0px"
ha-card-box-shadow: "0px 2px 4px rgba(0,0,0,0.1)"

Card Header

ha-card-header-color: "#212121"
ha-card-header-font-size: "24px"

Sidebar Styling

sidebar-background-color: "#FAFAFA"
sidebar-text-color: "#212121"
sidebar-selected-background-color: "rgba(0,0,0,0.08)"
sidebar-selected-icon-color: "#03A9F4"
sidebar-icon-color: "#757575"

Header (App Bar)

app-header-background-color: "#03A9F4"
app-header-text-color: "#FFFFFF"
app-header-selection-bar-color: "#FFFFFF"

Dashboard Background

# Solid color
lovelace-background: "#E8E8E8"

# Image
lovelace-background: "center / cover no-repeat url('/local/background.jpg') fixed"

# Gradient
lovelace-background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"

Typography (2025+)

New typography tokens replacing legacy Polymer variables:

# Font families
ha-font-family-body: "Roboto, sans-serif"
ha-font-family-code: "Roboto Mono, monospace"

# Font sizes
ha-font-size-s: "12px"
ha-font-size-m: "14px"
ha-font-size-l: "16px"
ha-font-size-xl: "20px"
ha-font-size-2xl: "24px"
ha-font-size-4xl: "34px"

# Font weights
ha-font-weight-normal: "400"
ha-font-weight-medium: "500"
ha-font-weight-bold: "700"

# Line heights
ha-line-height-condensed: "1.2"
ha-line-height-normal: "1.5"

# Smoothing
ha-font-smoothing: "antialiased"

Legacy Variable Migration

Dark Mode

Define dark mode variants within theme:

frontend:
  themes:
    my_theme:
      # Light mode (default)
      primary-color: "#1976D2"
      primary-background-color: "#FAFAFA"
      primary-text-color: "#212121"

      modes:
        dark:
          # Dark mode overrides
          primary-color: "#90CAF9"
          primary-background-color: "#121212"
          primary-text-color: "#E0E0E0"
          card-background-color: "#1E1E1E"

Complete Theme Example

frontend:
  themes:
    modern_blue:
      # Primary
      primary-color: "#1976D2"
      accent-color: "#FF5722"

      # Text
      primary-text-color: "#212121"
      secondary-text-color: "#757575"
      text-primary-color: "#FFFFFF"

      # Backgrounds
      primary-background-color: "#F5F5F5"
      secondary-background-color: "#FFFFFF"
      card-background-color: "#FFFFFF"

      # Cards
      ha-card-border-radius: "16px"
      ha-card-box-shadow: "0 2px 8px rgba(0,0,0,0.08)"

      # States
      state-light-on-color: "#FFC107"
      state-switch-on-color: "#4CAF50"

      # Dashboard
      lovelace-background: "linear-gradient(180deg, #E3F2FD 0%, #F5F5F5 100%)"

      # Dark mode
      modes:
        dark:
          primary-color: "#90CAF9"
          primary-text-color: "#E0E0E0"
          secondary-text-color: "#9E9E9E"
          primary-background-color: "#121212"
          secondary-background-color: "#1E1E1E"
          card-background-color: "#252525"
          ha-card-box-shadow: "0 2px 8px rgba(0,0,0,0.3)"
          lovelace-background: "#121212"

Per-View Theme

Apply theme to specific view:

views:
  - title: Dark Room
    theme: my_dark_theme
    cards: [...]

Per-Card Theme

Apply theme to single card:

- type: entities
  theme: my_theme
  entities:
    - light.living_room

Actions

Set Theme via Automation

action: frontend.set_theme
data:
  name: my_theme
  mode: dark

Reload Themes

action: frontend.reload_themes

Troubleshooting

Theme not applying: 1. Check variable names (no typos) 2. Ensure theme is defined in configuration.yaml 3. Reload themes: Developer Tools > Services > frontend.reload_themes 4. Clear browser cache

Variables not working: 1. CSS variables require -- prefix in CSS, but not in YAML themes 2. Check if variable is supported in your HA version 3. Some variables require specific card types

View Types Reference

Complete guide to Home Assistant Lovelace view layouts with selection criteria.

View Type Comparison

Masonry View (Default)

Auto-arranging columns that adapt to screen width. Cards flow into columns based on available space.

Best for:

• General-purpose dashboards
• Mixed card types and sizes
• Quick setup without manual positioning

Configuration:

views:
  - title: Home
    # type: masonry  # Optional, this is the default
    path: home
    icon: mdi:home
    cards:
      - type: entities
        title: Lights
        entities:
          - light.living_room
          - light.bedroom
      - type: weather-forecast
        entity: weather.home
        forecast_type: daily
      - type: gauge
        entity: sensor.temperature
        name: Temperature

Behavior:

• Cards automatically arranged in columns
• Column count adjusts to screen width
• Card order follows YAML order (top-to-bottom, left-to-right)
• Cards with getCardSize() method influence placement

Panel View

Single card displayed full-width. Perfect for maps, media players, or any content that benefits from maximum space.

Best for:

• Map displays
• Camera feeds
• Large media players
• Custom full-screen cards

Configuration:

views:
  - title: Map
    type: panel
    path: map
    icon: mdi:map
    cards:
      - type: map
        entities:
          - device_tracker.phone
          - zone.home
          - zone.work
        aspect_ratio: 16:9
        default_zoom: 12

Important: Panel view only displays the first card. Additional cards are ignored.

Common Panel Cards:

• map - Location tracking
• picture-elements - Interactive floorplans
• iframe - Embedded content
• media-control - Large media player
• calendar - Full calendar view

Sections View (New Default)

Grid-based layout with drag-and-drop support in UI mode. Organizes cards into named sections.

Best for:

• Organized, structured dashboards
• Room-by-room layouts
• Mobile-first design
• Users who prefer UI editing

Configuration:

views:
  - title: Dashboard
    type: sections
    path: dashboard
    icon: mdi:view-dashboard
    max_columns: 4
    sections:
      - title: Living Room
        cards:
          - type: tile
            entity: light.living_room
          - type: tile
            entity: climate.living_room
          - type: tile
            entity: media_player.living_room

      - title: Bedroom
        cards:
          - type: tile
            entity: light.bedroom
          - type: tile
            entity: fan.bedroom

      - title: Security
        cards:
          - type: tile
            entity: lock.front_door
          - type: tile
            entity: binary_sensor.motion

Section Options:

sections:
  - title: Section Name
    type: grid                  # Default section type
    column_span: 2              # Span multiple columns
    cards: []

Card Grid Options (for custom cards):

// In custom card
getGridOptions() {
  return {
    rows: 2,        // Height in grid units
    columns: 6,     // Width in grid units (max 6)
    min_rows: 1,    // Minimum height
    max_rows: 4     // Maximum height
  };
}

Sidebar View

Two-column layout with main content area and sidebar. Useful for dashboards with primary content and supplementary information.

Best for:

• Control panels with status sidebar
• Media dashboards with queue/playlist sidebar
• Room controls with sensor readings sidebar

Configuration:

views:
  - title: Overview
    type: sidebar
    path: overview
    icon: mdi:view-split-vertical
    cards:
      # Main area cards (default position)
      - type: weather-forecast
        entity: weather.home
        forecast_type: daily

      - type: entities
        title: Quick Controls
        entities:
          - light.living_room
          - climate.thermostat
          - media_player.tv

      # Sidebar cards (explicit position)
      - type: entities
        title: Sensors
        view_layout:
          position: sidebar
        entities:
          - sensor.temperature
          - sensor.humidity
          - sensor.air_quality

      - type: logbook
        view_layout:
          position: sidebar
        entities:
          - binary_sensor.front_door
        hours_to_show: 12

Card Positioning:

# Place card in sidebar
- type: entities
  view_layout:
    position: sidebar
  entities: [...]

# Place card in main area (default)
- type: entities
  view_layout:
    position: main
  entities: [...]

Sidebar Behavior:

• Main area: ~70% width on desktop
• Sidebar: ~30% width on desktop
• Mobile: Sidebar stacks below main content

View Common Properties

All view types share these properties:

views:
  - title: View Title          # Tab title (required)
    path: view-path            # URL path (recommended)
    icon: mdi:home             # Tab icon
    theme: theme_name          # Apply specific theme
    background: /local/bg.jpg  # Background image
    visible:                   # Visibility conditions
      - user: admin
    subview: false             # Hide from navigation bar

    # Type-specific
    type: masonry              # masonry, panel, sections, sidebar
    cards: []                  # Card list

Visibility Control

Control who sees a view:

views:
  - title: Admin
    path: admin
    visible:
      - user: admin_user_id
      - user: another_admin

  - title: Guest View
    path: guest
    visible: false             # Hidden from all users in navigation

Subviews

Views accessible only via navigation, not in tab bar:

views:
  - title: Room Details
    path: room-details
    subview: true
    cards:
      - type: entities
        entities:
          - light.bedroom

Navigate to subview:

tap_action:
  action: navigate
  navigation_path: /lovelace/room-details

Selection Guide

Choose Masonry when:

• You want quick setup
• Card positions don't matter much
• You have varied card sizes

Choose Panel when:

• You need full-width display
• Showing maps, cameras, or embedded content
• Single-focus views

Choose Sections when:

• You want organized, structured layouts
• You prefer UI-based editing
• Mobile experience is priority
• You're setting up new dashboards (recommended default)

Choose Sidebar when:

• You need two distinct content areas
• Main controls with status/info sidebar
• Desktop-focused dashboards

Migration Tips

From Masonry to Sections: 1. Group related cards conceptually 2. Create sections for each group 3. Move cards into appropriate sections 4. Adjust max_columns for screen width

From UI to YAML: 1. Use three-dot menu > "Raw configuration editor" 2. Copy YAML and save to file 3. Enable YAML mode in configuration.yaml