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. 🖼️
• Lite Editions: Optional no-blur builds for older/low-end devices. They keep the same semi-transparent, glassy look while improving performance and avoiding dropdown misplacement caused by HA’s blur handling. ⚡
• Want to Customize? (New!): Install Frosted Glass Theme Manager to choose your own color&background! 🎨

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

Additionally, Markdown cards that are text-only will still receive the theme’s glass/border styling (themes can’t reliably detect “text-only” variants). If you want a truly plain text-only Markdown card, add this to that card (copy&paste ready):

card_mod:
  style: |
    ha-card {
      background: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
      border: none !important;
    }
    ha-card::before {
      content: none !important;
      background: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

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

---

🎨 Want to Customize? (New!)

Want to use your own Primary Color or Background Image without editing code?

Check out the official Frosted Glass Theme Manager integration! 🛠️

It allows you to:

• 🌈 Pick any color via a UI Color Picker (it automatically calculates the correct contrast/shades).
• 🖼️ Set custom backgrounds by simply pasting a URL.
• ⚡ Generate both Standard and Lite versions of your custom theme instantly.

---

🖼️ 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. Dropdowns Broken by Blur

📦 #42
Blur effects break dropdown visibility inside HACS menus (and other deeper level HA dropdowns) 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.
➡️ Tip: The Lite version (no blur) render dropdowns correctly and avoid this issue.

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

4. 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.).
➡️ Tip: The Lite version (no blur) for the same glassy look without blur, dramatically better performance, and no dropdown misplacement.

---

✨ Star History