3.0.2 - True Material You Color Theming

Changes in 3.0.2

• Fix footer height calculation to not include env(safe-area-inset-bottom) #57.

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

If you have this module downloaded locally, remember to download the latest version for new features and fixes!

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.

Patch Version Changes

• Remove unnecessary graph border radius styles #50.
• Improve graph fill selector.
• Fix text input background color to use correct md3 theme color.
• Prioritize using "Google Sans" font if available before using "Roboto".
• Increase --ha-heading-card-title-font-weight to match section titles in md3 apps.
• Remove view left/right padding and reinforcing of view background, and instead increase --ha-view-sections-row-gap to 18px to achieve a similar result in sections view on mobile displays #52.
• Fix footer height calculation to not include env(safe-area-inset-bottom) #57.

JS Module Changes

• Trigger companion app (Android and iOS) app and navigation bar color updates on setting of user theme colors #53.
• Fix error if a user color sensor does not exist.
• Add option to use user ID instead of user friendly name for sensor #55.
• Apply user color theme to add-ons and HACS iframes.

Full Changelog: 2.1.10...3.0.2

3.0.1 - True Material You Color Theming

Changes in 3.0.1

• Remove unnecessary graph border radius styles #50.
• Improve graph fill selector.
• Fix text input background color to use correct md3 theme color.
• Prioritize using "Google Sans" font if available before using "Roboto".
• Increase --ha-heading-card-title-font-weight to match section titles in md3 apps.
• Remove view left/right padding and reinforcing of view background, and instead increase --ha-view-sections-row-gap to 18px to achieve a similar result in sections view on mobile displays #52.
• JS Module fixes and improvements
  • Trigger companion app (Android and iOS) app and navigation bar color updates on setting of user theme colors #53.
  • Fix error if a user color sensor does not exist.
  • Add option to use user ID instead of user friendly name for sensor #55.
  • Apply user color theme to add-ons and HACS iframes.

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

If you have this module downloaded locally, remember to download the latest version for new features and fixes!

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.

Patch Version Changes

• Remove unnecessary graph border radius styles #50.
• Improve graph fill selector.
• Fix text input background color to use correct md3 theme color.
• Prioritize using "Google Sans" font if available before using "Roboto".
• Increase --ha-heading-card-title-font-weight to match section titles in md3 apps.
• Remove view left/right padding and reinforcing of view background, and instead increase --ha-view-sections-row-gap to 18px to achieve a similar result in sections view on mobile displays #52.
• JS Module fixes and improvements
  • Trigger companion app (Android and iOS) app and navigation bar color updates on setting of user theme colors #53.
  • Fix error if a user color sensor does not exist.
  • Add option to use user ID instead of user friendly name for sensor #55.
  • Apply user color theme to add-ons and HACS iframes.

Full Changelog: 2.1.10...3.0.1

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