luma-home/ha-cards

Luma Home — HA Lovelace Cards

Custom Lovelace cards that replicate the Luma TV launcher design for Home Assistant.

Files

File	Purpose
luma-cards.js	Main card bundle — luma-card element with slide-in panels
luma-weather-card.js	Weather card with 5-day forecast
luma-theme.yaml	HA theme matching the Luma glass aesthetic
dashboard.yaml	Full dashboard config with all rooms

Installation

1. Copy card JS files

Copy both JS files to your HA www/ directory:

scp ha-cards/luma-cards.js ha-cards/luma-weather-card.js \
  root@192.168.10.102:/config/www/luma/

Or via the File Editor addon, create /config/www/luma/ and upload both files.

2. Register as resources

Go to Settings → Dashboards → Resources (or add to configuration.yaml):

# configuration.yaml
lovelace:
  resources:
    - url: /local/luma/luma-cards.js
      type: module
    - url: /local/luma/luma-weather-card.js
      type: module

3. Install the theme

Add to your themes: section in configuration.yaml, or merge into an existing themes file:

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

Then copy luma-theme.yaml to /config/themes/luma_glass.yaml.

4. Import the dashboard

Go to Settings → Dashboards → Add Dashboard, then switch to YAML mode and paste the contents of dashboard.yaml.

Or add it as a separate dashboard in configuration.yaml:

lovelace:
  mode: storage
  dashboards:
    luma:
      mode: yaml
      title: Luma Home
      icon: mdi:television
      show_in_sidebar: true
      filename: dashboards/luma.yaml

Then copy dashboard.yaml to /config/dashboards/luma.yaml.

5. Activate the theme

Go to your Profile (click your avatar) → Theme → select Luma Glass.

Dependencies

None — uses only native HA grid cards and custom elements. No HACS cards required.

Card types

luma-card

General-purpose card for lights, climate, covers, switches, scenes, media, and vacuum.

type: custom:luma-card
entity: light.living_room
name: Living Room       # optional, defaults to friendly_name
icon: mdi:lightbulb     # optional, auto-detected from domain
type_hint: range         # optional, helps with icon/accent selection

Click opens a slide-in panel with full controls (brightness, color temp, color swatches, presets, effects for lights; target temp, mode, fan speed, airflow for climate; position/presets for covers; transport/volume for media; rooms/mode/controls for vacuum).

Toggle-only entities (switches, scenes, scripts, lights without color modes) toggle on click instead of opening a panel.

luma-weather-card

type: custom:luma-weather-card
entity: weather.forecast_home

Customization

All colors are defined in the JS files' T (tokens) object and in the theme YAML. Adjust there to match your preference.