Liquid Glass — premium glass-morphism theme with six variants

studio-prisma · May 9, 2026, 11:03am

Hey HA community,

I've been maintaining a theme called Liquid Glass for a while and want to share it more broadly now. It started as a "I want my own dashboard to look better" project and grew into something more substantial — six variants in one file, plus a small background pack.

What it is

A glass-morphism aesthetic — translucent surfaces, layered blur, soft accents, refined dark UI. The goal was a theme that feels coherent across the whole HA frontend (not just the dashboard cards) and stays legible.

Why I'm posting now

Recent HA Frontend versions migrated form controls and dialogs to WebAwesome (Shoelace fork) and Material Web 3 components. That broke a lot of older themes — alarm-code inputs, time pickers, language dropdowns, tooltips, dialog popovers all rendered with white-on-white text. I went deep into the HA frontend source, traced the actual root cause (a missing modes: dark: {} declaration that gates HA's dark token system), and fixed it cleanly. The current release works on HA 2026.5+ and stays compatible back to 2024.1.

Sharing this in case anyone else hit the same wall.

Variants

Theme name	Behavior
Liquid Glass	always dark, default, recommended
Liquid Glass Auto (experimental)	OS-driven light/dark — known limitations
Liquid Glass Light only	always light
Liquid Glass Compact	always dark + tighter spacing for wall tablets
Liquid Glass Sunset	always dark + warm rose/amber palette
Liquid Glass Floorplan	always dark + heatmap glow for picture-element cards

Features

Glass-morphism with layered translucent surfaces and blur
Form fields, dropdowns, tooltips, dialogs render correctly in dark mode (no white-on-white)
WCAG AA contrast verified for all dark variants — text/background pairs scored 12:1 to 19:1, well above AAA
Per-domain status colors (light, switch, climate, cover, fan, media_player, person, lock, vacuum)
Per-room accent tokens (room-living-rgb, room-bedroom-rgb, …) — color cards differently per area
Energy Dashboard integration — grid, solar, battery, gas, water harmonized
Mushroom and Bubble Card token compatibility
Card-mod global variables exposed
Background Pack — four PNGs (Aurora, Dawn, Night, Calm) shipped with the repo

Install

HACS → Frontend → top-right menu → Custom repositories
URL: https://github.com/studio-prisma/homeassistant-theme-liquid-glass
Category: Theme → Add → install
Restart HA, then frontend: themes: !include_dir_merge_named themes/ in configuration.yaml
Profile → Theme → Liquid Glass

For the background pack: drop the four PNGs from docs/assets/backgrounds/ into /config/www/liquid_glass/. Detailed instructions in the README.

Tested

HA Core 2026.5.0, Frontend 20260509.x, Supervisor 2026.05.0, OS 17.3
Browser: Chrome / Firefox / Safari / Edge desktop
iOS Companion App

Minimum supported: HA Core 2024.1.0.

I'd love feedback on

A few specific things, but really — anything:

Does it render cleanly on your install? Especially if you're on a fresh 2026.5+. The recent token migrations have been rough on themes.
Variant ideas? I'm thinking about a high-contrast variant for outdoor / wall tablets, but want to hear what's missing.
Card-mod snippets you'd want me to include in docs/card-mod-snippets.yaml?
Auto-switch as a Blueprint? Currently documented as an automation pattern in the README — would a 1-click Blueprint make this more accessible?
Edge cases I missed — if you find a control that still renders wrong, please open an issue with a DOM-Inspect screenshot. CONTRIBUTING.md has the diagnose walkthrough.

Links

Happy to take ideas, PRs, and bug reports. Cheers!

— studio-prisma

finity · May 9, 2026, 10:38pm

you probably ought to post some example screenshots here.

m3enzo · May 10, 2026, 6:42am

I'm not entirely sure how to use this. Does every card need the card-mod snippet?

studio-prisma · May 10, 2026, 7:54am

@m3enzo just install the theme and use it for the dashboard views you want to have it and/ or your profile settings for the HA UI. That's all

studio-prisma · May 10, 2026, 9:30am

@finity good point, added 3 screenshots into the README.md

m3enzo · May 10, 2026, 10:48pm

I’m not seeing the transparency effect on the cards by default. The Desk LEDs card (Mushroom Light Card) has the snippet:

card_mod:
  style: |
    ha-card {
      background: var(--glass-bg) !important;
      backdrop-filter: var(--glass-blur);
      -webkit-backdrop-filter: var(--glass-blur);
      border: var(--glass-border);
      border-radius: var(--mush-control-border-radius, 20px);
    }
    mushroom-shape-icon {
      --shape-color: rgba(var(--rgb-state, 122, 184, 255), 0.18);
    }

The others are Tile, Thermostat, Area cards without the snippet.

studio-prisma · May 15, 2026, 1:17pm

@m3enzo Thanks for the screenshot — that's in deed a gap, and you were right to flag it. The short answer: what you're seeing on the Tile / Thermostat / Area cards is intentional today, but the README was overselling it. I just shipped a clarifying update.

Here's the actual split:

Tier 1 — automatic, no card-mod — Every Lovelace card you already have inherits the Liquid Glass color tokens: translucent dark surface, rounded corners, theme borders, harmonized per-domain state colors, WCAG-AA-compliant text. That's what your Tile / Thermostat / Area cards are showing right now. It's the theme part of the theme.

Tier 2 — opt-in, card-mod required — The full backdrop blur effect you see on the Mushroom card in your screenshot. Mushroom brings its own blur via its --mush-control-* tokens (no card-mod needed for Mushroom specifically). For stock cards, the blur is a one-line opt-in via card-mod.

The reason I don't ship a global ha-card { backdrop-filter: ... } rule via card-mod-theme: it's been observed to break Bubble Card v3 pop-up rendering (the pop-up body renders empty when ha-card-* is styled globally — Bubble Card issue #2347). So Tier 2 stays explicit, per card, to keep plugin compatibility intact.

studio-prisma · May 18, 2026, 1:30pm

@m3enzo good news, v1.4.0, just released.

Bubble Card v3 popup bug (issue #2347) — a global backdrop-filter on ha-card broke popups, so I shipped the glass effect as a per-card opt-in.

That upstream bug is now fixed (Bubble Card pop-ups moved outside the ha-card tree post v3.2.0-beta4). So v1.4.0 ships the full glass-morphism look as a global card-mod-card rule across all six variants — every card renders with the Screenshot look automatically. No per-card snippet.

Two prerequisites:

card-mod installed once via HACS (the global rule rides on its card-mod-theme mechanism)
Bubble Card on the current official release (anything past v3.2.0-beta4)

Fugazzy · May 18, 2026, 3:13pm

Does it also work with the card-mod successor uix?