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

[madelena]

Hello all,

I just started using HA seriously about a month or two ago, and since I had a ton of free time recovering from surgery I decided to put some time theming my HA to my needs. Enjoy!

Metrology for Home Assistant

This is a theme that is part of a practical series of app customizations and redesigns aimed at bringing a bold, clear, and consistent user experience to various Windows and Android apps. Its design language is based on Metro and Fluent design systems pioneered by Microsoft Design since the 2010s.

Currently the Metro theme and Fluent theme are included with 6 color variations and light and dark modes, bringing it to a total of 24 theme variations!

By popular demand, my current plan is to further update it with the extra card-mod tweaks and template button-cards that are seen in some of the screenshots.

GitHub - Madelena/Metrology-for-Hass: 🎨 Give your Home Assistant a modern and...

To check out what this theme is capable of, check out my Home Assistant config.

Thank you @legovaer and @pbohannon for your generous support!

Metro + Fluent Themes

Two styles are included in this theme:

Metro style has a more vibrant color contrast, sharp corners, and a true black background great for AMOLED screens. Based on the design of Windows 10.

Fluent style has subtle shades of colors, rounded corners, and background colors adjusted to be easy on eyes. Based on the design of Windows 11.

Awesome Features

Display your home automation status with distinct and bold typography using Segoe UI or Segoe UI Variable fonts.	Use Light and Dark Modes natively. Dark Mode has a true black background great for AMOLED screens.
Switch between 6 color themes. Also adding new themes is relatively easy thanks to YAML Anchors.	Revamp your More Info cards and various system UI screens to look extra clean and slick.

Screenshots

Device Example	Device Example	Binary Sensor Example	Binary Sensor Example
Update Example	Update Example	Sensor Example	Sensor Example
Settings Example

How to Install the Theme

If you have HACS, you probably already know what you are doing. You can search for this theme and install it there. If you don’t have HACS, here are the steps:

Prerequisites

• Some way to upload files to your HA server, e.g. Visual Studio Code or Samba add-ons
• card-mod

Installation

1. If you are new to Home Assistant and its themes, you first need to add this in your configuration.yaml file:

frontend:
  themes: !include_dir_merge_named themes

2. Create a new folder named themes under /config.
3. Copy metro.yaml to /config/themes.
4. (Optional if you want Segoe UI on non-Windows devices) Copy style.css and the .ttf font files in the /www folder to /config/www.

• If you are using the Lovelace Dashboard not in YAML mode, go to your Home Assistant Settings → Dashboards → Resources and then add /local/style.css as a Stylesheet.
  (Note: It might look strange that you had copied the files to /www but here you typed /local, but HA will handle the path redirection for you so no worries.)
• If you are using it in YAML mode, add the following to your lovelace resources section:

    lovelace:
      mode: yaml
      resources:
        - url: /local/style.css
          type: css
  

5. Restart Home Assistant to apply the changes. Once restarted, go to your Profile page, which is the button where your avatar is at the bottom left.

6. Under Themes, choose the color you like for the Metro themes.
7. Pick Auto, Light, or Dark Mode for the theme.

Segoe UI font is optional if you are already using Windows. If you are not using Home Assistant, you can download the fonts here and upload them along with style.css to your /config/www folder.

Credits

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Additionally, I would appreciate proper credits back to me if redistributed or modified. That would help my livelihood since design is my career.

The initial code was partially based on the JuanMTech’s AMOLED Theme.

[djMvT (Maurice van Trijffel)]

Beautiful theme!
One question: in dark mode, is it possible to make the switches a bit lighter so they are more visible especially when a switch is in the off position?

[madelena]

Yes! I just fixed the bug in my latest repo commit. Thanks for reporting.

[djMvT (Maurice van Trijffel)]

thanks, looking awesome!

[Marcos_Felipe]

on github it shows this floor plan, any document how to create in this format?

[marvandorth (Marnix van Dorth)]

Would love to know as well!
Actually… The whole dashboard looks appealing to me and I’m waiting for OP to share more details

[legovaer]

OP explained this on reddit:

Here's what I used:

1. [SketchUp](https://www.sketchup.com/plans-and-pricing/sketchup-pro) for 3D Modeling, export Wireframe view in PDF.
2. Import PDF into [Inkscape](https://inkscape.org/) and add IDs to each tag. Export as SVG.
3. [HA-Floorplan](https://experiencelovelace.github.io/ha-floorplan/) to show the SVG and add interactivity.
4. ???
5. Profit!

(I'm only at Step 3.)

[madelena]

It’s time for…

v1.5 Pre-release!

Release v1.5 · Madelena/Metrology-for-Hass

This is a major release with lots of code cleanup. There are now 24 theme variations (2 styles - Fluent and Metro, 2 modes - light and dark, and 6 colors). A few more card-mods are added to change some cards (glance cards and entity rows) to resemble more like their Windows counterparts.

What’s Changed

• Major refactoring: Code is a lot less redundant now (#30, #31)
• Split Metro and Fluent themes (#30, #24)
• Fluent themes now have subtle Mica-like colors
• Base theme now usable as Metro / Fluent Slate themes
• Fall back to system-ui before sans-serif by @KTibow in #23
• Add card-mod to Glance Cards to make them look more like Windows icons
• Add button and small font sizes to make row cards look more like Windows tiles

New Contributors

• @KTibow made their first contribution in #23

Full Changelog: Comparing v1.2.1...v1.5 · Madelena/Metrology-for-Hass · GitHub

[HFsi]

Excelent work!
Could you share how to get R,S and G indexes from NOAA?
Thanks

[madelena]

Thanks!

Could you share how to get R,S and G indexes from NOAA?

I used ha-multiscrape, but the standard REST sensors should work as well.

multiscrape:

- name: NOAA Space Weather - Conditions
  resource: https://services.swpc.noaa.gov/products/noaa-scales.json
  scan_interval: 3600
  sensor:
    - unique_id: noaa_space_weather_R_24hr
      name: NOAA Space Weather - Radio Blackout Impacts (24-Hour Observed Maximums)
      value_template: '{{ value_json["-1"].R.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["-1"].R.Text }}'
    - unique_id: noaa_space_weather_S_24hr
      name: NOAA Space Weather - Solar Radiation Storm Impacts (24-Hour Observed Maximums)
      value_template: '{{ value_json["-1"].S.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["-1"].S.Text }}'
    - unique_id: noaa_space_weather_G_24hr
      name: NOAA Space Weather - Geomagnetic Storm Impacts (24-Hour Observed Maximums)
      value_template: '{{ value_json["-1"].G.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["-1"].G.Text }}'

    - unique_id: noaa_space_weather_R_latest
      name: NOAA Space Weather - Radio Blackout Impacts (Latest Observed)
      value_template: '{{ value_json["0"].R.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["0"].R.Text }}'
    - unique_id: noaa_space_weather_S_latest
      name: NOAA Space Weather - Solar Radiation Storm Impacts (Latest Observed)
      value_template: '{{ value_json["0"].S.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["0"].S.Text }}'
    - unique_id: noaa_space_weather_G_latest
      name: NOAA Space Weather - Geomagnetic Storm Impacts (Latest Observed)
      value_template: '{{ value_json["0"].G.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["0"].G.Text }}'

    - unique_id: noaa_space_weather_R_MajorProb_1day
      name: NOAA Space Weather - Radio Blackout Impacts (1 Day Forecast)
      value_template: '{{ value_json["1"].R.MajorProb }}'
      unit_of_measurement: '%'
      attributes:
        - name: Timestamp
          value_template: '{{ value_json["1"].DateStamp }} {{ value_json["1"].TimeStamp }}'
    - unique_id: noaa_space_weather_R_MinorProb_1day
      name: NOAA Space Weather - Radio Blackout Impacts (1 Day Forecast)
      value_template: '{{ value_json["1"].R.MinorProb }}'
      unit_of_measurement: '%'
      attributes:
        - name: Timestamp
          value_template: '{{ value_json["1"].DateStamp }} {{ value_json["1"].TimeStamp }}'
    - unique_id: noaa_space_weather_S_1day
      name: NOAA Space Weather - Solar Radiation Storm Impacts (1 Day Forecast)
      value_template: '{{ value_json["1"].S.Prob }}'
      unit_of_measurement: '%'
      attributes:
        - name: Timestamp
          value_template: '{{ value_json["1"].DateStamp }} {{ value_json["1"].TimeStamp }}'
    - unique_id: noaa_space_weather_G_1day
      name: NOAA Space Weather - Geomagnetic Storm Impacts (1 Day Forecast)
      value_template: '{{ value_json["1"].G.Scale }}'
      attributes:
        - name: Text
          value_template: '{{ value_json["1"].G.Text }}'
        - name: Timestamp
          value_template: '{{ value_json["1"].DateStamp }} {{ value_json["1"].TimeStamp }}'

[madelena]

v1.7.1 has been released! Here are the changes:

• Fixed the issue of HA warning about duplicate tags in the HA log (#35)
• Fixed configuration validation issue.
• Vertical stack margin fix by @fOmey (#40)
• Theme for Sidebar Buttons
• Fixed dialog shadows in HA 2022.08

Releases · Madelena/Metrology-for-Hass

[whyisthisbroken]

It would be nice to see animated Weather icons

[madelena]

v1.7.2 has released!

• Fixed borders in HA 2022.11 (#46)
• Changed Segoe UI Semibold font-weight from 500 to 600 so that it looks correct in macOS and iOS devices
• Removed video max-height for webcam streams

Release v1.7.2 · Madelena/Metrology-for-Hass

[echnics]

Anybody know how the get that wonderfull Sol System page ??
The whole page just like the picture i found when i downloaded the theme??

Sorry if i missed it
Anybody??

[aaroncarson]

Just have to tell you – I’ve not ever come across a Home Assistant theme I’ve properly liked in the past. But Metrology absolutely changed that. I actively want to use it because of how gorgeous it is. So thank you so much!

Also – I’ve just seen on GitHub that you’re on surgery leave; I hope you’re recovering well

[sonicgoose]

I cannot for the life of me get this theme to work.

I’ve installed metro.yaml in /usr/share/hassio/homeassistant/themes/metro on my debian linux system. I’ve installed card-mod.js in /usr/share/hassio/homeassistant/www/community/lovelace-card-mod.

I’ve made a copy of styles.css and the .ttf files in /usr/share/hassio/homeassistant/www and I have the following in my configuration.yaml like this:

lovelace:
  mode: yaml
  resources:
    - url: /local/style.css
      type: css

# Frontend Mods
frontend:
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js
  themes: !include_dir_merge_named themes

Any ideas where I’ve gone wrong?

[str3pto]

im looking for that as well. i like the concept but i keep searching the internet and i cannot find any references for it.

[cmuc24 (mr cmuc)]

Followed card-mod Installation as described?
https://github.com/thomasloven/lovelace-card-mod#installing

Then you should also follow the configuration.yaml instructions

frontend:
  extra_module_url:
    - /local/card-mod.js

It seems that everyone is confused about this topic, how are folders defined!?
But as the foldername ‘www’ indicates similar to ‘puplic’, a webserver is defining in the background.

@madalena described it even nicer at #4 . so no worries

GitHub - Madelena/Metrology-for-Hass: 🎨 Give your Home Assistant a modern and...

[wingman1487]

Really beautiful theme and I like all the different themes all in 1! I am curious if the Button card can be themed to match the rest of the theme. For example the screenshot here shows that the Green theme is applied to the Entities card (top), however the Button cards (bottom) does not seem to take the Green theme color. I’m not as familiar with the theming yaml to suggest an update there, but I might go poking around to see if I can’t make a local change to test and report back here.

[madelena]

@str3pto

It is on my Hass Config repo. I plan to do a write-up on how it works for those who are interested.