[Metrology] Metro + Fluent + Windows Themes for Home Assistant

madelena · January 4, 2023, 4:52am

Aww thank you very much for your compliments! I’m glad that it has been well received and was already the top 3 themes on HACS in just a few months (humblebrag, lol).

And also thank you for your best wishes! It was tough but I had recovered well in the past month and I am slowly back to normal again.

madelena · January 4, 2023, 5:01am

I poked a little bit into this, and it seems to be related to a bunch of new --rgb-state colors added recently. The default state of a button turned on is amber yellow, which is bizarre.

I will probably add them in the next update.

simenopsahl · January 7, 2023, 9:12pm

I made an issue on github:
On the more-info dialog for an entity, the tooltip when hovering over the graph or state history is generated outside the frame and hidden. A scrollbar appears at the bottom of the more-info card

Great theme

hazio · November 3, 2023, 10:57am

Nice theme! What’s the best way to make the corners more rounded? cheers

Jani0 · November 8, 2023, 10:20am

Is there a way to add photo as a background for the theme?

hazio · December 24, 2023, 8:57pm

Are there any versions of this theme with rounded corners? cheers

Haze · February 6, 2024, 5:51pm

@madelena awesome theme. Wanted to get the structure working on my theme for the networking.
I noticed the background for some of the boxes is not clear. Although the CSS background is set to none.
Is this something on my end or am I missing one of the card-mod settings.

thoompje · February 7, 2024, 9:40am

@madelena Where to find the Astro tab with the whole config? Because on your config page I cannot find it GitHub - Madelena/hass-config-public: My Dashboards for Home Assistant - Advanced data visualizations, responsive design, a neat maximalist Metro Live Tile layout, and an ultraminimal tablet layout! Please get back, would be awesome!

arpel · May 3, 2024, 9:26pm

Hi, I’m using this theme and 2024.5(.1) seems to have induced “transparent” (sort of alpha 50%) on all popups : any chance to fix it ?

arpel · May 4, 2024, 1:21pm

Just replying to myself, if you want to fix this with a “quick & dirty” solution :

Line 516 of metro.yaml :

  .mdc-dialog__surface {
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          background-color: rgba(var(--rgb-mdc-theme-surface), HERE> .5) !important;
>         }

change to

          background-color: rgba(var(--rgb-mdc-theme-surface), HERE> 1) !important;

calberttj · May 9, 2024, 10:37pm

You mind sharing how you did this in the first place? I couldn’t figure it out, did you do sections or masonry? and than how did you space it?

lungoland · May 11, 2024, 6:27pm

Another solution would be to force the background-filter. This way the blur effect should be applied as well.

.mdc-dialog__surface {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
     background-color: rgba(var(--rgb-mdc-theme-surface), 0.5) !important;
}

It seems that the backdrop-filter modifier was added to the relevant class in the 2025.5 release.

Sierra · May 19, 2024, 6:13pm

I hope you can update this Dashboard, which I believe is the best available right now, very similar in style to the Tesla dashboard. I hope it can be updated to the latest version of HA, where everything is drag-and-drop. According to the developers, dashboards will soon be easier to share through Lovelace dashboard blueprints.

pedrita · July 8, 2024, 1:28am

love it!! how did you do that sol system cards? their beautiful

paddy0174 · July 8, 2024, 2:25am

You can take a look at the configuration, which you can find here:

github.com

Madelena/hass-config-public/blob/a34865410ae96c4f5d26938d45115e88b8032bc6/ui/views/astrometrics.yaml

# MAXIMALIST DASHBOARD
# Astrometrics Showxating
# Made by Madelena Mak 2022

title: Astrometrics
path: astrometrics

type: 'custom:grid-layout'
layout: !include ../shared/snippets/layout-page-margin.yaml

cards:
  - type: 'custom:layout-card'
    layout_type: 'custom:grid-layout'
    view_layout:
      grid-area: cc
    layout:
      grid-template-columns: 'repeat(auto-fill, [col-start] minmax(360px, 1fr) [col-end])'
      grid-template-rows: auto
      grid-column-gap: 32px
      margin: -1px

This file has been truncated. show original

Sierra · August 29, 2024, 7:22pm

Make it simple to apply to 2024 HA versions

don-reba · September 24, 2024, 4:01am

Love the look but wish it did not change my background.

Rilcy · October 25, 2024, 8:16pm

My two cents…
Personnaly I will add by default the following lines within metro.yaml to sync Thermostat Card with Metro themes.

 # Heating
  state-climate-heat-color: var(--primary-color)

madjetey · November 7, 2024, 11:29am

I’m trying to apply a background image to the theme that follows the day/night setting of the viewing devices but I’m not making progress getting the code to work in the metro.yaml

Replaced out line 35 with lovelace-background: var(--background-image) then added the equivalent paths below to after line 348 (modes)

light:
  background-image: 'center / cover no-repeat fixed url("/local/Metro_day.svg")'
dark:
  background-image: 'center / cover no-repeat fixed url("/local/Metro_night.svg")'

arpel · November 16, 2024, 10:24am

Hi, I’m a long time user of this theme also.
There’s been a lot of changes to the default theme and new additions lately (sections for instance) that are not coherent and are getting me away from the latest features : had anyone started to integrate those already ?

Do you feel it would it be simpler to start from default and get back this Fluent styling or the other way round ?