Skip to content

Add five new card designs with per-card colour theming - #5

Merged
marsh4200 merged 2 commits into
mainfrom
CARDS
Jul 22, 2026
Merged

Add five new card designs with per-card colour theming#5
marsh4200 merged 2 commits into
mainfrom
CARDS

Conversation

@marsh4200

Copy link
Copy Markdown
Owner

Summary

Expands the bundled Lovelace card from one layout to six selectable designs, and
adds per-card colour theming.

The original layout is untouched and remains the default, so existing dashboards
are unaffected.

Designs

Selectable per card in the visual editor, or via design: in YAML.

Design Best for What it is
classic General use (default) The original tabbed layout — unchanged
glass Lounge / phone Ambient Apple-TV-style view; the card glows in the active source's brand colour, sources sit on a grid of gradient tiles
remote One-handed phone use A physical handset — live LCD status window, a D-pad wired automatically to the zone's CEC/IR navigation commands, volume rocker, mute, source hotkeys
strip Whole house, lodges One row per output; tap a row to expand its inputs and volume in place
panel Wall-mounted tablets Kiosk mode — oversized touch targets, no tab bar, optionally locked to a single room
poster Media rooms Artwork-first 2:3 tiles using uploaded input images, with a brand gradient fallback

All six are skins over the same engine — custom input images, aliases, hidden
inputs/outputs, sequences, IR/CEC, diagnostics and multi-hub binding behave
identically in each. Different cards on different dashboards can use different
designs.

Colours

Accent colour, card background and corner radius, set per card. Both colours
default to the active Home Assistant theme, so the card keeps matching the
dashboard unless deliberately overridden. Only #rgb, #rrggbb and #rrggbbaa
are accepted — anything else is rejected before it reaches the DOM.

Colour changes repaint via CSS custom properties rather than rebuilding, so the
editor preview updates instantly and keeps its scroll position.

Design-specific options

# panel
lock_zone: "B"       # lock the kiosk to one output; hides the room picker
show_tabs: true      # bring back the Volume/Scenes/Remote/Info tab bar

# poster
lock_zone: "B"
poster_columns: 4    # 2–6, default 3

Switching design strips options that only applied to the previous one, so saved
YAML never accumulates dead keys.

Implementation notes

  • Room pickers use native <select>, inheriting keyboard and screen-reader
    behaviour and proper mobile pickers rather than a custom dropdown
  • Volume + mute is a single shared component reused by every design
  • No CSS.escape dependency — output IDs are arbitrary strings and that API
    isn't available in every browser HA runs in

Testing

  • All six designs render, navigate between tabs, and switch sources
  • Colour injection attempts (accent: "red;background:url(x)") rejected, empty
    style attribute produced
  • Live recolour without rebuild
  • Editor: six-design picker, colour swatches, per-design options, dead-key cleanup
  • Edge cases: zero zones, single zone (pickers hidden rather than rendering a
    one-item dropdown), no volume entity (control omitted, not shown dead),
    mute-only zones, all inputs hidden, all outputs hidden, invalid lock_zone,
    poster_columns of 1/99/"abc" all clamping, 10-room install

Breaking changes

None. design defaults to classic; all new config keys are optional.

@marsh4200
marsh4200 merged commit 4aae548 into main Jul 22, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant