A Material 3 based extended Dark & Light theme for Home Assistant.
This theme not only defines Material 3 dark and light mode colors, but also adapts some of the Home Assistant colors in dark mode as advised by Material 3:
- The error, warning, success and info colors
- The energy dashboard colors
- The label badge (red, blue, green, yellow, grey) colors
- The state climate colors
- The state (on, off, home, not home, unknown, idle) colors
All these colors have been desaturated a bit and given more brightness to have a better match with the dark mode.
The theme also defines some Neumorphic shadow colors for dark and light mode.
For the manual: see https://material3-themes-manual.amoebelabs.com/
For more theme examples, check the overview of all the 22 examples
And to implement them in your cards: look at how to use these Material 3 themes in a Home Assistant card
This Theme is in the default theme repository of HACS
Get the yaml file and put int into your themes
folder.
If you have the following in your configuration.yaml
:
frontend:
themes: !include_dir_merge_named themes/
The theme will be automatically available once you have reloaded the themes using the Home Assistant Developer Tools
> Services
> frontend.reload_themes
service.
Below the definition of the theme, generated and displayed using the Swiss Army Knife custom card for Home Assistant.
A Light and Dark example made with the Swiss Army Knife custom card.
Note that the card background in the light theme is white instead of the lightest theme background. Will be corrected...