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. The source of truth for this theme’s design decisions are the Material Design 3 specifications. This theme and its companion module implement the latest Material Expressive updates to Material Design 3.
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, like show in the screenshots below. More information about color theme generation and updated components can be found in that modules README.
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) 2021 phone default contrast Tonal Spot scheme theme as generated by Material Color Utilities.
Basic Theme Installation
- Navigate to Home Assistant Marketplace.
- Search for
Material You Theme.
- Open this repository in the Marketplace and click
Download.
- Refresh your browser or close and open your app.
- 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, the companion module will not trigger. You MUST set the theme in profile settings under browser settings for colors and component design upgrades to work. This is to ensure that the module does not break other themes that you may want to use.
(Highly Recommended) Install the Companion JavaScript Module
To fully utilize this theme, you should install the companion JavaScript module from this repository. In addition to installing it using the Marketplace, you should add it to your configuration.yaml as described in its README.
(Optional) Google Sans Flex Font Installation
I recommend using Google Sans Flex font with this theme. It is the open source version of Google’s Google/Product Sans fonts, which were previously not available for publc use. If not installed the theme has a priority list of other Material Design fonts like Figtree, Roboto Flex, and Roboto, which will be used instead.
- Navigate to a dashboard and then click
✎ Edit dashboard > ⋮ Open dashboard menu > Manage resources.
- Click
+ Add Resource.
- In the
URL field enter the url https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,[email protected],1..1000&display=swap.
- Select
Resource Type Stylesheet.
- Click
Create.
- Hard refresh (
CTRL + F5) your browser or clear app/browser cache to ensure the new resource loads correctly.
(Alternative/Optional) Build Your Own Theme
You can create more customizable albeit static color themes using Material Theme Builder. Themes created using this tool use the same material design tokens that this theme does.
- 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, click Export, and then click Web (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.css and dark.css are standard, -mc is medium contrast, and -hc is 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) to :host, html, body, ha-card. It should look something like this:
:host,
html,
body,
ha-card {
--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);
}
- 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.
You can then use this file as a frontend resource or by using the CSS Path/URL option in the companion module.
As a Frontend Resource
NOTE: CSS files added this way will not apply to some page backgrounds like the settings and developer tools pages, which are hardcoded to a default color, if the companion module is not installed. It will also be superceded by any color themes set using the companion module. Some users have reported that stylesheets do not work on their Home Assistant frontends due to a possible browser bug unrelated to this theme or its companion module.
- Navigate to a dashboard and then click
🖉 Edit dashboard > ⋮ Open dashboard menu > Manage resources.
- Click
+ Add Resource.
- In the
URL field enter the path to the resource file.
- Like
/local/my-md3-theme.css
- Select
Resource Type Stylesheet.
- Click
Create.
- Hard refresh (
CTRL + F5) your browser or clear app/browser cache to ensure the new resource loads correctly.
Using the Companion Module
Requires Material You Utilities. CSS files added this way will supercede any color themes set using the companion module.
- Navigate to the user, device, or global settings that you want this file to apply to.
- Click on the
Other tab in the configuration card.
- In the
URL field enter the path to the resource file.
- Like
/local/my-md3-theme.css
Material Design 3 Friendly Projects
Check out Material Symbols to use updated material icons like shown in the screenshots!
This module is a library of Google Home style Home Assistant frontend components that uses this themes Material Design tokens. Use it to make your Home Assistant frontend look even more like a Material Design app as shown in the screenshots!
This is my general web components project for Home Assistant. With it you can create customizable card features, such as buttons, selectors, sliders, and toggles, as sub-elements of cards or as standalone cards themselves. Most custom features have Material Design appearance options which use the same style tokens as this theme and will follow theme colors.
This card can be used to control you Music Assistant server with Material Expressive colors and components. It uses the same theme generation logic as this theme’s companion module.
This thermostat card was designed to pair with this theme, and gives you Nest-style temperature control along with access to custom entity controls.
This air purifier card was designed to pair with this theme, and gives you animated air purifier control along with access to configurable tiles.
This plant card was designed to pair with this theme, and gives you an alternative way to view plant information provided by Plant Monitor for Home Assistant.
This theme includes variables to style Bubble Card elements using Material You colors and shapes, while respecting Bubble Card’s unique design decisions.
This theme includes variables to style Xiaomi Map Card using Material You colors, providing it with primary, secondary, and tertiary color palettes.
Credits
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.
评论