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.
It is strongly recommended that you install this themes companion JavaScript module, 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.
- Navigate to HACS (install from here if you do not have it yet).
- Search for
Material You Theme. - Open this repository in HACS and click
Download. - Refresh your browser or close and open your app.
- Navigate to your Profile, and select
Material Youor 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 under browser settings for colors and component design upgrades to work.
To fully utilize this theme, you should install the companion JavaScript module from this repository. In addition to installing it using HACS, you must add it to your configuration.yaml as described in its README.
I recommend using 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.
- Navigate to a dashboard and then click
🖉 Edit dashboard>⋮ Open dashboard menu>Manage resources. - Click
+ Add Resource. - In the
URLfield enter the url https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap. - Select
Resource TypeStylesheet. - Click
Create. - Hard refresh (
CTRL+F5) your browser or clear app/browser cache to ensure the new resource loads correctly.
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, such as the legacy Google Home 2024 theme colors and alternate card style options. To install:
- Upload the CSS file to your Home Assistant instance, preferable in the config/www folder.
- Your
configuration.yamlfile is found in theconfigfolder. If thewwwfolder does not exist create it. More information about the configuration folder can be found here.
- Your
- Navigate to a dashboard and then click
🖉 Edit dashboard>⋮ Open dashboard menu>Manage resources. - Click
+ Add Resource. - In the
URLfield enter the path to the resource file.- Like
/local/all-cards.css
- Like
- Select
Resource TypeStylesheet. - Click
Create. - Hard refresh (
CTRL+F5) your browser or clear app/browser cache to ensure the new resource loads correctly.
If you do not want to use the JavaScript module resource, you can instead create your own Material Theme using 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.
- Navigate to Material Theme Builder.
- Choose your theme colors. You can skip picking fonts, they are not saved to the exported files.
- Click
Export theme, clickExport, and then clickWeb (CSS). - Extract the CSS files from the downloaded zip archive and open the css folder within it.
- 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.cssanddark.cssare standard,-mcis medium contrast, and-hcis high contrast.
- 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. - Copy all of the variables from one file to the other, and rename the selector (
.dark,.light-high-contrast, etc) tohtml. It should look something like this:
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 for uploading and installing custom CSS.
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: 88And for lights that do not have brightness control:
color: sandybrown
show_percentage: false
bold_text: true
height: 88
max: 0This theme includes variables to style Bubble Card elements using Material You colors and shapes. Bubble card pop-ups are equivalent to bottom sheets 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.
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);
}Check out Material Symbols to use updated material icons as shown in the screenshots!
This theme revolves around Material Design 3 and the tooling that its contributors have made available, especially Material Color Utilities and the Material Design 3 specification.
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, and it will be automatically used by this 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.