3.0.1-alpha.001

make ha-card header/footer overflow stricter to allow non-graph overflow

True Material You Color Theming

⚠️ BREAKING CHANGES ⚠️

Material You color generation is now handled by a JavaScript module which has to be added as a resource in Home Assistant. Instructions on how to do so can be found here.

While color theme generation no longer requires card-mod, component modification does.

True Material You Color Theming

Version 2 of this theme introduced Material You color theming via an approximation of theme colors generated via HSL with fixed saturation and luminance values. While this worked, it was a hack and proved difficult to tweak to generate more colors for different theme variables.

Version 3 introduces true Material You color theming via the Material Color Utilities module. This does require that you install a JavaScript module resource as described above in breaking changes and the README.

A Modern Full Featured Material You Theme

This repository now includes a second theme - Material You. This theme replaces almost all of it's colors with colors generated using Material Color Utilities, giving you a fully color themed theme. Color theming has been applied to almost every component in Home Assistant following the guidelines provided by Material Design 3. This theme still uses the sensors material_rounded_base_color and material_rounded_base_color_john_doe.

Other Changes

• BREAKING removed the old user color approximation logic. Using custom colors now requires installing the JavaScript module as described above.
• Added md3 switches to ha-card analytics and more-info updates.
• Use error (red) color for navigation rail badges.
• Removed background and use sidebar text color for navigation drawer badges.

Full Changelog: 2.1.10...3.0.0

2.1.10

Changes in 2.1.10

• Kiosk mode fixes #44.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.
• Change light mode --secondary-background-color to not be pure white #35.
• Fix profile initials layer and position in sidebar #37.
• Fix bottom padding of subviews #40.
• Only set view bottom padding if ha-tabs or paper-tabs are present #40.
• Alter in card graph colors to be more visible #41.
• Fix view image backgrounds for HA 2024.1 #42.
• Kiosk mode fixes #44.

Full Changelog: 2.0.5...2.1.10

2.1.9

Changes in 2.1.9

• Alter in card graph colors to be more visible #41.
• Fix view image backgrounds for HA 2024.1 #42.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.
• Change light mode --secondary-background-color to not be pure white #35.
• Fix profile initials layer and position in sidebar #37.
• Fix bottom padding of subviews #40.
• Only set view bottom padding if ha-tabs or paper-tabs are present #40.
• Alter in card graph colors to be more visible #41.
• Fix view image backgrounds for HA 2024.1 #42.

Full Changelog: 2.0.5...2.1.9

2.1.8

Changes in 2.1.8

• Only set view bottom padding if ha-tabs or paper-tabs are present #40.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.
• Change light mode --secondary-background-color to not be pure white #35.
• Fix profile initials layer and position in sidebar #37.
• Fix bottom padding of subviews #40.
• Only set view bottom padding if ha-tabs or paper-tabs are present #40.

Full Changelog: 2.0.5...2.1.8

2.1.7

Changes in 2.1.7

• Fix bottom padding of subviews #40.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.
• Change light mode --secondary-background-color to not be pure white #35.
• Fix profile initials layer and position in sidebar #37.
• Fix bottom padding of subviews #40.

Full Changelog: 2.0.5...2.1.7

2.1.6

Changes in 2.1.6

• Fix profile initials layer and position in sidebar #37.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.
• Change light mode --secondary-background-color to not be pure white #35.
• Fix profile initials layer and position in sidebar #37.

Full Changelog: 2.0.5...2.1.6

2.1.5

Changes in 2.1.5

• Change light mode --secondary-background-color to not be pure white #35.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.
• Change light mode --secondary-background-color to not be pure white #35.

Full Changelog: 2.0.5...2.1.5

2.1.4

Changes in 2.1.4

• RTL direction sidebar fixes #30.

Header Improvements

This update better fleshes out the header top app bar as a separate element from the navigation bar footer. The card-mod CSS has been reworked to only move the view tabs to the footer instead of applying multiple CSS transformations to the header elements.

The back and action buttons and the title will now appear at the top of the screen in subviews and dashboards with one view #24 #25. In order to better define the header as a separate area, a 40 pixel margin has been added to the top of views, so you may find that your cards have been shifted down a bit.

Light and Dark Only Themes

For older devices that cannot easily switch between light and dark modes, new light and dark only versions of the theme have been added #23.

Patch Version Changes

• Add safe-area-inset back to the view and to the footer.
• Restore true transparency of transparent theme card backgrounds by only setting ha-card-background to transparent.
• Apply switch styles to switches in ha-card shadow-root.
• RTL direction sidebar fixes #30.

Full Changelog: 2.0.5...2.1.4