Kaloyan DanchevandClaude Opus 4.6
89ff17a3bc
Custom card bundle (luma-card, luma-weather-card) with slide-in panels for light/climate/cover/media/vacuum, matching the TV launcher's design tokens. Includes theme, dashboard YAML for all 8 rooms, and deployment handoff doc. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
109 lines
2.9 KiB
Markdown
109 lines
2.9 KiB
Markdown
# 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.
|