Frosted Glass Theme for Home Assistant ✨

Bring depth and elegance to your dashboard with blurred glass panels and soft UI touches. ☀️

This theme brings a sophisticated "Frosted Glass" aesthetic to your dashboard, combining transparency with elegant blurring effects to create a truly unique and contemporary look. Designed for both visual appeal and comfortable usability, the Frosted Glass Theme transforms your Home Assistant interface into a work of art. 🖼️

✨ Features

• Frosted Glass Aesthetic: Transparent and blurred card elements create depth and layering. ❄️
• Light & Dark Modes: Choose between a bright, clean look or a soft dark interface. ☀️🌑
• Modern Design: Rounded corners, minimal shadows, and cohesive color palettes. 🛋️
• Enhanced UX: Designed to feel fluid, comfortable, and polished. 🖼️

🚀 Quick Installation Guide

Step 1: Prerequisites

• Make sure HACS is installed.
• Install the card-mod integration via HACS — this theme depends on it for the blur and styling.

Step 2: Install Theme via HACS

Step 3: Restart Home Assistant

Step 4: Activate Theme

• Go to your profile (bottom-left corner of Home Assistant UI), and select Frosted Glass, Frosted Glass Light or Frosted Glass Dark from the theme dropdown.

---

⚠️ Note: This theme requires card-mod to render correctly. Without it, blur effects and styling will not work.

💡 Optional: To match the navigation bar shown in screenshots, install the lovelace-navbar-card.

---

🖼️ Screenshots

☀️ Light Mode:

🌑 Dark Mode:

❤️ Support the Project

• If you enjoy this theme and want to support future updates, consider buying me a coffee:

---

🐞 Issues / Feedback

Have a problem or a suggestion?
Open an issue or start a discussion on GitHub.

---

🧩 Known Issues & Limitations

These are known limitations caused by platform constraints, aggressive CSS behavior in certain custom cards, or performance trade-offs. Workarounds may be possible in some cases via card-mod.

1. Hue-Like Light Card Text Visibility

🪔 #5
When the light is on, text inside the custom:hue-like-light-card may turn black and become unreadable against the card background.
This card aggressively reapplies internal styles that override theme-level colors, even with !important declarations.
➡️ Currently not fixable from the theme side.

2. State-Based card-mod Styling Fails

🎨 #17
Dynamic background colors using Jinja templates in card_mod (e.g., for chips) are overridden by the theme’s global transparency rules (background: none !important).
➡️ Workaround: Disable Frosted Glass manually per card using card-mod.

3. HACS Dropdowns Broken by Blur

📦 #42
Blur effects break dropdown visibility inside HACS menus due to how Home Assistant renders these elements outside the theme root DOM.
Multiple fixes were tested, but the problem stems from Material Web Components and is unlikely to be solvable from the theme side.
➡️ Won’t fix unless upstream behavior changes.

4. stack-in-card Incompatibility

🧱 #44
Cards rendered inside custom:stack-in-card are deeply nested, and the theme’s ::before blur cannot be excluded reliably for inner elements.
➡️ Recommended workaround: Use card-mod inside each card to manually disable the ::before layer.

5. Performance on Low-End Devices

The heavy use of backdrop-filter: blur() may cause noticeable lag on low-end hardware (older tablets, Pi-based dashboards, etc.).
➡️ A future “Frosted Glass Lite” variant is planned, with simplified visuals for better performance.

---

✨ Star History