Material Rounded and Material You - Material Design 3 Themes for Home Assistant

Themes for Home Assistant influenced by the Google Home app and Material Design 3 by Google on Android.

Both themes implement Material Design 3 redesigns of elements when possible using card-mod. If you have card-mod installed and do not the component redesigns, use the "No Mod" versions of this theme.

Don't like the blue accents? You can choose a different Material You base color! See below for more. Requires an additional JS resource script. Does not require card-mod.

This theme also includes "Transparent Card" versions with transparent card backgrounds. It also includes separate light and dark versions of all themes for niche use cases.

Material Rounded - In the Style of the Google Home App

The original version of the theme. This theme aims to match the styling of the Google Home app pre Material Design 3 redesign, which uses some aspects of Material Design 3 and static blue accent colors. It supports custom user colors, but just for primary, accent, and toggle switch colors.

Compared to Google Home

Light cards made using Big Slider Card.

Updated Material You Components

Material You - A Fully Featured Implementation of Material Design 3

The full color version of the theme. This theme aims to match the styling of Material Design 3 (also known as Material You) Google apps on Android like Phone, Contacts, Messages, Photos, and Drive. Everything has been updated to use colors generated using Material Color Utilities following the Material Design 3 guidelines. Supports custom user colors for virtually all of Home Assistant.

Compared to Material You Android Apps

Updated Material You Components

Installation

1. Navigate to HACS (install from here if you do not have it yet).
2. Navigate to Frontend.
3. Click + EXPLORE & DOWNLOAD REPOSITORIES and search for Material Rounded Theme.
4. Open this repository in HACS and click DOWNLOAD.
5. Optionally also install card-mod from HACS to take advantage of the Material You components and colors described above.
6. Refresh Home Assistant.
7. Navigate to your Profile, and select one of the Material Rounded or Material You theme variants.
8. (Optional) Follow the instructions above for installing the companion Material Design 3 color JavaScript module resource.

Material You Colors

This theme supports Material You color theming! This requires an additional JavaScript module resource which can be downloaded from this repo or using the CDN URL. To install the script to your Home Assistant instance:

(Optional) Download JavaScript Module Resource Locally in Home Assistant

1. Download the module from this repository here.
2. Upload this module to your Home Assistant instance, preferable in the config/www folder.
   • Your configuration.yaml file is found in the config folder. If the www folder does not exist create it. More information about the configuration folder can be found here.

Add the Module as a Resource

1. Navigate to a dashboard and then click 🖉 Edit dashboard > ⋮ Open dashboard menu > Manage resources.
2. Click + ADD RESOURCE.
3. In the URL field enter the path to the resource file.
   • /local/material-rounded-theme.js if downloaded to your Home Assistant instance.
   • https://cdn.jsdelivr.net/gh/nerwyn/material-rounded-theme@main/dist/material-rounded-theme.js if using the CDN version.
4. Select Resource Type JavaScript module.
5. Click CREATE.
6. Hard refresh (CTRL + F5) your browser or clear app/browser cache to ensure the new resource loads correctly.

Once the JavaScript module resource has been added, create a helper template sensor named Material Rounded Base Color that returns the hex code of your preferred base color. The theme colors will be calculated using Material Color Utilities.

Create a Template Sensor Helper

1. Navigate to Settings > Devices & services > Helpers.
2. Click + CREATE HELPER.
3. Click Template.
4. Click Template a sensor.
5. Name the sensor Material Rounded Base Color. The sensor entity ID should be sensor.material_rounded_base_color.
6. Enter your Material You base color as a six digit hex code, like 238636 or #db4437. You can also use a template to read a hex code from the state or attribute of a different entity, like {{ states("sensor.pixel_fold_accent_color") }}.
7. Click SUBMIT.

You can also choose user specific colors by creating a sensor named Material Rounded Base Color Your Name, with your name being your person name as it appears on the Home Assistant people page. The sensory entity ID should be something like sensor.material_rounded_base_color_john_doe.

Home Assistant Android App Color Sensor

If you are using the Home Assistant Android companion app, you can enable the accent color sensor in the companion app settings to use your phone's Material You accent color as the theme base color:

1. Navigate to Settings > Companion app.
2. Click Manage sensors.
3. Scroll down to the section titled Dynamic color and click Accent color.
4. Toggle Enable sensor on. It should now return your phone's Material You base color as a hex code.

Then create a base color template sensor as described above, and use a template to return the state of your companion app accent color sensor.

Material You Components, Powered By Card Mod

This theme is super-charged by card-mod! Using card-mod many components have received Material You design upgrades.

Navigation

Redesigns the toolbar and sidebar buttons to follow Material You navigation component guidelines.

Top App Bar

• Retains the sidebar toggle and dashboard menu (small width screens) or action items (large width screens) from the navigation toolbar header in a top app bar.
• Non-view buttons appear at top of screen near their original locations.
• Buttons disappear when user is not scrolled to the top of the view.

Navigation Bar

• Converts the toolbar header view tabs bar into a navigation bar footer.
• Removes the default selection bar and ripple.
• Spaces the view icons evenly along the entire toolbar.
  • WARNING: Subviews must be placed at the end of the toolbar for the view tab count to be correct, otherwise the view tabs will end up smaller than expected.
  • While evenly spacing the icons should (and previously) be done by making their parent a flexbox, their parent is within a shadow-root which the view tabs are slotted into. Modifying this parent element with card-mod is possible but it is slow and inconsistent. A tab count and width calculation method is used instead, which is much faster and more consistent.
• Adds view names below the view icons.
• Highlights the current view with a colored icon and background behind the icon.
• Transition animation on view icon background when selected.

Navigation Drawer

Desktop sidebar expanded and mobile.

• Icon and background of current view now uses primary and accent colors.
• Transition animation on view icon background when selected.
• Badge background color removed and color set to same as icon and text.

Navigation Rail

Desktop sidebar collapsed.

• Background of current view now uses primary and accent colors.
• Current view icon background is a circle to match Material You example of a navigation rail menu without labels.
• Badge colors changed to material design error colors (red).

Switches

• Track now encompasses thumb.
• Removes the default ripple in favor of a thumb that changes size when used.
• Uses material design colors for the switch thumb, track, and outline.

Views

• Adds a 40px margin to the top for the top app bar and an 80px margin to the bottom for the navigation bar.
• Adds a 12px margin to each side of the view to match the Google Home app.
• Add card button of classic lovelace views updated to better match the extended FAB specification.

If you do not want these changes, use the "No Mod" versions of the theme. If you only want some of these changes, you will have to modify and recompile the theme yourself.

Similar Projects and Credits

Big Slider Card

Use Big Slider Card to create Google Home style button/slider cards for light entities. Use the following style settings to match the screenshots:

colorize: true
show_percentage: true
bold_text: true
height: 88

And for lights that do not have brightness control:

color: sandybrown
show_percentage: false
bold_text: true
height: 88
max: 0

Material Symbols

Check out Material Symbols to use updated material icons as shown in the screenshots!

Graphite Theme

This theme was initially modified from Graphite theme, as it was my favorite Home Assistant theme on HACS before I created this one. Therefore, it may contain some legacy variables from it.

LCARS Theme

The Star Trek LCARS theme for Home Assistant also uses a JavaScript module resource for advanced theme modification, and I used it as a basis for getting started on my Material You color theming JavaScript module.

Developing, Modifying, and Building The Theme

Due to the multiple versions and complexity of this theme, I have split it into multiple CSS and yaml files and created a Python git pre-commit build pipeline to compile all of the files into a single Home Assistant theme file. You can either run this build pipeline by making a git commit (not to the main repo of course) running the file build.sh, or running the pre-commit.py Python file.

Twelve versions of a theme are created per base theme (24 total) - with card mod, without card mod, transparent cards with card mod, transparent cards without card mod, and a separate light and dark version of each. The no card mod versions of theme have the card-mod-theme fields removed and will have no design upgrades, but do use user defined colors. The separate light and dark versions of the theme are if you need to explicitly set a device to use light or dark mode without the Home Assistant built in theme mode options.

Any files under common that end in .yaml are treated as card-mod-*-yaml fields in the themes, and files ending in .css contain the actual card-mod CSS. Different overall version of the theme.yaml file are included in separate folders, such as material_rounded. CSS files are copied into the card-mod yaml fields using jinja2 templates, allowing for repetitive styles that go in different shadow roots to all source from the same file.