DOCSEARCHbyAlgolia
Submit Docs

Frosted Glass Themes for Home Assistant

repository·main·Indexed 21 days ago

https://github.com/wessamlauf/homeassistant-frosted-glass-themes

A Home Assistant theme providing a 'Frosted Glass' aesthetic with transparency and blur effects. Includes Light, Dark, and Lite versions. Requires HACS and card-mod for installation and styling. Compatible with the Frosted Glass Theme Manager for custom colors and background images.

Tokens
759
Snippets
1
Records
4
Agent score
26%

What's inside homeassistant-frosted-glass-themes

  2. Install the Frosted Glass Theme

    main

    Follow these steps to install and activate the theme in your Home Assistant instance:

    1. Prerequisites:
      • Ensure HACS is installed.
      • Install the card-mod integration via HACS. This is required for blur effects and styling to function.
    2. Install via HACS:
      • Search for and install homeassistant-frosted-glass-themes within the HACS Theme repository.
    3. Restart Home Assistant.
    4. Activate:
      • Open your user profile (bottom-left corner of the UI).
      • Select Frosted Glass, Frosted Glass Light, or Frosted Glass Dark from the theme dropdown.

  3. Troubleshoot blur-related issues and performance

    main

    The theme uses backdrop-filter: blur(), which can cause specific issues. Use the following guidance to resolve them:

    • Broken Dropdowns: Blur effects can break dropdown visibility in HACS or deep HA menus. Solution: Use the Lite version of the theme (no blur) to ensure dropdowns render correctly.
    • Low Performance: On older tablets or Raspberry Pi-based dashboards, blur effects may cause lag. Solution: Use the Lite version for better performance while maintaining a glassy look.
    • stack-in-card Incompatibility: The theme's ::before blur cannot be reliably excluded for elements inside custom:stack-in-card. Solution: Use card-mod inside each card to manually disable the ::before layer.
    • Hue-Like Light Card Text: Text in custom:hue-like-light-card may become unreadable when the light is on. This is a known limitation of that specific card and cannot be fixed via the theme.

  4. Remove glass styling from Markdown cards

    main

    By default, text-only Markdown cards will still receive the theme's glass/border styling. To create a truly plain text-only Markdown card, apply the following card_mod configuration to the card:

    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;
    }