# 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:

```bash
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`):

```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:

```yaml
# 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`:

```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.

```yaml
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`

```yaml
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.