Implementation
HAM3 series themes are usually 100% Material 3 compatible. In addition, it extends the Material 3 color system to make it more usable in views/cards.
The main driver (for me) is the Swiss Army Knife custom card, which allows for extensive styling and can therefore use all the M3 color system features and extensions
Below is an overview of the features and extensions that HAM3 provides for Home Assistant themes.
The Material 3 for Home Assistant implementation¶
| What | Material 3 | HAM3 implementation |
|---|---|---|
| Palettes | 13 colors per palette | 100% M3 compliant for these 13 colors. Extended with 11 more colors, giving a total of 24 colors per palette showing more usable gradient colors with 12 shades and 12 tints |
| Surfaces | 2 surfaces, neutral and primary based for light and dark themes with 5 elevation levels | 5 surfaces, neutral, primary, secondary, tertiary and error with 10 elevation levels giving more flexibility and choice |
| Reference | Reference colors are uniquely defined for both dark and light mode palettes | 100% M3 compliant. Extended for surfaces |
| System | Light and Dark theme system colors mapping reference colors to the theme mode | 100% M3 compliant. Extended for surfaces and palette colors. The system palette colors are reversed for the Dark mode to maintain color contrast standards |
| Light Theme | Yes | 100% M3 compliant |
| Dark Theme | Yes | 100% M3 compliant |
The resulting theme colors¶
The resulting theme colors are shown below. The theme is rendered using several Swiss Army Knife custom cards and templates. The example uses the dynamic Material 3 D07, DarkOliveGreen theme. This theme is generated from the AmoebeLabs logo 
Primary, secondary, tertiary and error pallettes ranging from white (100) to black (0)
The 5 light and dark surfaces with 10 elevation levels each
The resulting light theme color selection
The resulting dark theme color selection
Examples¶
The dark and light examples show the Swiss Army Knife example #12 using the above theme colors.
You see the following aspects of the theme:
- The 'Primary' Dark Olive Green color in several shade/tints
- The 'Tertiary Container' and 'On Tertiary Container' colors on the first row with the battery and linkquality
- Some 'Neutral' surface colors on the Hall, Bedroom and Poseidon rows
- The background of the segmented arcs (the circles) are also using a 'Neutral' surface elevation color.
All the above colors adapt to the theme mode. The only exception is (barely) visible in the last row: that row uses reference colors that are the same in dark and light mode.
A light theme example card (Theme D07 - DarkOliveGreen)
A dark theme example card (Theme D07 - DarkOliveGreen)