Skip to content

Material Design 3 based theme (dark olive green) for Home Assistant

License

Notifications You must be signed in to change notification settings

AmoebeLabs/HA-Theme_M3-07-DarkOliveGreen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

hacs release downloads

Material 3 Theme for Home Asistant: #07, Dark Olive Green

What is it

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

Installation via HACS

This Theme is in the default theme repository of HACS

Manual Installation

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.

Theme Preview:

Below the definition of the theme, generated and displayed using the Swiss Army Knife custom card for Home Assistant.

m3-07-palettes

m3-07-surfaces

m3-07-light

m3-07-dark

Some real-world screenshots:

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...

m3-07-sake12-light

m3-07-sake12-dark