Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/nerwyn/material-you-theme

Material Design 3 Theme for Home Assistant
https://github.com/nerwyn/material-you-theme

hacs hacs-theme homeassistant homeassistant-themes lovelace-ui material-design material-design-3 material-you material-you-3

Last synced: 4 months ago
JSON representation

Material Design 3 Theme for Home Assistant

Awesome Lists containing this project

README 

          
[![GitHub Release](https://img.shields.io/github/release/Nerwyn/material-you-theme.svg?style=for-the-badge)](https://github.com/nerwyn/material-you-theme/releases)

[![License](https://img.shields.io/github/license/Nerwyn/material-you-theme.svg?style=for-the-badge)](LICENSE)

[![hacs_badge](https://img.shields.io/badge/HACS-Default-blue.svg?style=for-the-badge)](https://github.com/hacs/default)

[![Project Maintenance](https://img.shields.io/badge/maintainer-Nerwyn-blue.svg?style=for-the-badge)](https://github.com/Nerwyn)

![Github](https://img.shields.io/github/followers/Nerwyn.svg?style=for-the-badge)

[![GitHub Activity](https://img.shields.io/github/last-commit/Nerwyn/material-you-theme?style=for-the-badge)](https://github.com/Nerwyn/material-you-theme/commits/main)

[![Community Forum](https://img.shields.io/badge/community-forum-brightgreen.svg?style=for-the-badge)](https://community.home-assistant.io/t/material-you-theme-a-fully-featured-implementation-of-material-design-3-for-home-assistant/623242)

[![Buy Me A Coffee](https://img.shields.io/badge/donate-☕buy_me_a_coffee-yellow.svg?style=for-the-badge)](https://www.buymeacoffee.com/nerwyn)



[![My Home Assistant](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?repository=material-you-theme&owner=Nerwyn&category=Theme)



# Material You Theme - A Fully Featured Implementation of Material Design 3 for Home Assistant



A theme for Home Assistant influenced by Google apps and Material Design 3 by Google on Android.



Almost all CSS custom properties in this theme have been redefined to use Material Design 3 tokens. By default it will use a blue (#4C5C92) Tonal Spot scheme theme with contrast level 0 as generated by [Material Color Utilities](https://github.com/material-foundation/material-color-utilities).



**It is strongly recommended that you install this themes companion JavaScript module, [Material You Utilities](https://github.com/Nerwyn/material-you-utilities)**. With this module you will be able to generate custom color themes and modify the styles of Home Assistants components to match the Material Design 3 specification. The screenshots use this module.



This theme also includes separate light and dark versions for niche use cases, like older devices that do not support light/dark mode.






## Compared to Google Home





















## Basic Theme Installation



1. Navigate to HACS (install from [here](https://hacs.xyz/) if you do not have it yet).

2. Search for `Material You Theme`.

3. Open this repository in HACS and click `Download`.

4. Refresh your browser or close and open your app.

5. Navigate to your Profile, and select `Material You` or one of its variants.



**When using this theme with its JavaScript companion module, you must set the theme at the profile level for the module to trigger. If you set the theme at the view level, it will not style the anything outside of the view. The view tabs and sidebar are outside of the view. You MUST set the theme in [profile settings](http://homeassistant.local:8123/profile/general) under browser settings for colors and component design upgrades to work.**



## (Highly Recommended) Install the Companion JavaScript Module



To fully utilize this theme, you should install the companion JavaScript module from [this repository](https://github.com/Nerwyn/material-you-utilities). In addition to installing it using HACS, you must add it to your `configuration.yaml` as described in its README.



## (Optional) Figtree Font Installation



I recommend using [`Figtree`](https://fonts.google.com/specimen/Figtree) font with this theme, as it is very similar to the proprietary Google Sans font found in may Google apps but is free to use. If not installed the theme will use `Roboto`, which is still used by many Material You apps.



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 url https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap.

4. Select `Resource Type` `Stylesheet`.

5. Click `Create`.

6. Hard refresh (`CTRL` + `F5`) your browser or clear app/browser cache to ensure the new resource loads correctly.



## (Optional) Applying Custom Styles and Card Variants



While this isn't specific to this theme, you can apply custom CSS to Home Assistant's HTML DOM using frontend resource stylesheets. You can redefine theme custom properties to use alternate variables, whether it be Material You tokens or static values. This is useful for using alternate default card styles, or changing anything else you want about this theme. Doing so is especially helpful with this theme since everything is defined with Material You tokens, which are generated using the companion JavaScript Module.



Several example CSS files are included [here](https://github.com/Nerwyn/material-you-theme/tree/main/css), such as the legacy Google Home 2024 theme colors and alternate card style options. To install:



1. Upload the CSS file 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](https://www.home-assistant.io/docs/configuration/#to-find-the-configuration-directory).

2. Navigate to a dashboard and then click `🖉 Edit dashboard` > `⋮ Open dashboard menu` > `Manage resources`.

3. Click `+ Add Resource`.

4. In the `URL` field enter the path to the resource file.

    - Like `/local/all-cards.css`

5. Select `Resource Type` `Stylesheet`.

6. Click `Create`.

7. Hard refresh (`CTRL` + `F5`) your browser or clear app/browser cache to ensure the new resource loads correctly.



## (Alternative/Optional) Build Your Own Theme



If you do not want to use the JavaScript module resource, you can instead create your own Material Theme using [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).



**NOTE**: color themes created this way will not apply to iframes such as the HACS and Add-ons pages. It will also not apply to some page backgrounds like the settings and developer tools pages, which are hardcoded to a default color. It will also be superceded by any themes set using the companion JavaScript module.



1. Navigate to [Material Theme Builder](https://material-foundation.github.io/material-theme-builder/).

2. Choose your theme colors. You can skip picking fonts, they are not saved to the exported files.

3. Click `Export theme`, click `Export`, and then click `Web (CSS)`.

4. Extract the CSS files from the downloaded zip archive and open the css folder within it.

5. Choose a matching set of light and dark css files with the same contrast extension (or mix and match) and open them in a text editor.

   - `light.css` and `dark.css` are standard, `-mc` is medium contrast, and `-hc` is high contrast.

6. Find and replace (`CTRL` + `F`) all colons `:` in the CSS files and replace them with `-light:` in the light file and `-dark:` in the dark file.

7. Copy all of the variables from one file to the other, and rename the selector (`.dark`, `.light-high-contrast`, etc) to `html`. It should look something like this:



```css

html {

  --md-sys-color-primary-dark: rgb(242 220 130);

  --md-sys-color-surface-tint-dark: rgb(219 198 110);

  --md-sys-color-on-primary-dark: rgb(45 37 0);

  --md-sys-color-primary-container-dark: rgb(163 144 63);

  ...

  --md-sys-color-surface-container-lowest-light: rgb(255 255 255);

  --md-sys-color-surface-container-low-light: rgb(250 243 229);

  --md-sys-color-surface-container-light: rgb(238 232 218);

  --md-sys-color-surface-container-high-light: rgb(227 220 207);

  --md-sys-color-surface-container-highest-light: rgb(215 209 196);

}

```



Follow the [above instructions](#optional-applying-custom-styles-and-card-variants) for uploading and installing custom CSS.



## Similar Projects and Credits



### Big Slider Card



Use [Big Slider Card](https://github.com/nicufarmache/lovelace-big-slider-card) to create Google Home style button/slider cards for light entities. Use the following style settings to match the screenshots:



```yaml

colorize: true

show_percentage: true

bold_text: true

height: 88

```



And for lights that do not have brightness control:



```yaml

color: sandybrown

show_percentage: false

bold_text: true

height: 88

max: 0

```



### Bubble Card



This theme includes variables to style [Bubble Card](https://github.com/Clooos/Bubble-Card) elements using Material You colors and shapes. Bubble card pop-ups are equivalent to [bottom sheets](https://m3.material.io/components/bottom-sheets/overview) and have their background color and border radius set to better match its specification.



Here is the basic configuration I use to make Bubble Card pop-ups look more like modal bottom sheets.



```yaml

type: vertical-stack

cards:

  - type: custom:bubble-card

    card_type: pop-up

    hash: '#your-hash-here'

    width_desktop: 90vw # This should be 640px per the specification, but I prefer near full width dialogs on desktop

    close_by_clicking_outside: true

    show_header: false

    styles: |-

      #root {

        height: unset !important;

        max-height: 100% !important

      }

      .bubble-pop-up-container {

        /* Removing side padding if using ha-card elements instead of Bubble Card elements */

        padding-left: 0 !important;

        padding-right: 0 !important;

        padding-bottom: 64px !important;

      }

  - type: custom:bubble-card

    card_type: separator # A modified separator to mimic the bottom sheet drag handle

    styles: |-

      .bubble-icon, .bubble-name {

        display: none;

      }

      .bubble-line {

        margin-right: 0;

        height: 4px;

        background: var(--md-sys-color-on-surface-variant);

      }

      ha-card {

        width: 32px;

        left: calc(50% - 16px);

      }

```



### Material Symbols



Check out [Material Symbols](https://github.com/beecho01/material-symbols) to use updated material icons as shown in the screenshots!



### Material Design 3 and Material Color Utilities



This theme revolves around Material Design 3 and the tooling that its contributors have made available, especially [Material Color Utilities](https://github.com/material-foundation/material-color-utilities) and the [Material Design 3 specification](https://m3.material.io/).



### Figtree Font



[Figtree](https://fonts.google.com/specimen/Figtree) is a free font that is very similar to Google's proprietary font Google Sans. You can install it as a frontend resource in Home Assistant using [this URL](https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap), and it will be automatically used by this theme.



## Developing, Modifying, and Building The Theme



This theme has a build pipeline which runs on pre-commit. To setup the pre-commit hook, run the command `npm run setup`. The `material_you.yaml` file found in the `src` folder is the base version of the theme. It has defaults set for all Material Design System colors in light and dark mode, which are then used for all other theme variables. The pre-commit build pipeline will run a JavaScript file name `pre-commit.js`, which creates three versions of this theme explicit light and dark modes. You can build the distributed theme YAML file using the command `npm run build`.