3.1.5 - View Titles and State Layers

Changes in 3.1.5

• Refactor Material You default colors to reduce file size.
• Add Bubble Card specific colors #73.

View Titles

The current view name is now present in the top center of views, as defined by the center-aligned top app bar specification

State Layers

State layers are semi-transparent layers that visually indicate different user interactions, such as hovering and pressing. State layers have now been added to the navigation bar, drawer, and rail as defined by the Material Design 3 specification. You'll now see state layers when hovering over and pressing view tabs and sidebar destinations.

Other Changes

• Increase header height to 64px to match top app bar specification.
• Increase the font weight of the current view or destination to match the Material Design 3 specification.
• Reduce gap between view icon and title to better match Material You Android apps.
• Tweak header scroll transition to be more consistent.
• Move current view tab icon indicator to a pseudo-element to improve it's performance and fix a visual bug where it would jitter when selected.

Patch Version Changes

• Fix navigation rail badge z-index.
• Add new theme variables for upcoming Custom Features toggle Material Design switches.
• Remove box-shadow from toggle switch thumb.
• Fix unchecked toggle switch track color.
• Add state layers to toggle switch.
• Fix Material Rounded checkbox colors when using JS module.
• Add checkbox unchecked state layer color.
• Pre-render view tabs count jinja2 template so card-mod doesn't have to #49.
• Scrolled header performance improvements.
• Material Design 3 ha-switch performance improvements, focused state layer fixes, and increase thumb size on hover and focus.
• Fix profile tab navigation rail/drawer transition animation.
• Fix edit mode menu link button color.
• Refactor how Material You --md-sys-color theme colors are set for better downstream usage.
• Fix subview back button not being interactable or scrolling.
• Fix input-ink-color typo made during refactor.
• Tweak Material Rounded theme switch, checkbox, and radio button colors to match Material You theme defaults.
• Change --accent-color and --text-accent-color to --md-sys-color-secondary and --md-sys-color-on-secondary to fix graph color without card mod #72.
  • And remove graph color card mod fixes.
• Fix position of ha-switch input element.
• Refactor Material You default colors to reduce file size.
• Add Bubble Card specific colors #73.

Full Changelog: 3.0.8...3.1.5

3.1.4 - View Titles and State Layers

Changes in 3.1.4

• Fix position of ha-switch input element.

View Titles

The current view name is now present in the top center of views, as defined by the center-aligned top app bar specification

State Layers

State layers are semi-transparent layers that visually indicate different user interactions, such as hovering and pressing. State layers have now been added to the navigation bar, drawer, and rail as defined by the Material Design 3 specification. You'll now see state layers when hovering over and pressing view tabs and sidebar destinations.

Other Changes

• Increase header height to 64px to match top app bar specification.
• Increase the font weight of the current view or destination to match the Material Design 3 specification.
• Reduce gap between view icon and title to better match Material You Android apps.
• Tweak header scroll transition to be more consistent.
• Move current view tab icon indicator to a pseudo-element to improve it's performance and fix a visual bug where it would jitter when selected.

Patch Version Changes

• Fix navigation rail badge z-index.
• Add new theme variables for upcoming Custom Features toggle Material Design switches.
• Remove box-shadow from toggle switch thumb.
• Fix unchecked toggle switch track color.
• Add state layers to toggle switch.
• Fix Material Rounded checkbox colors when using JS module.
• Add checkbox unchecked state layer color.
• Pre-render view tabs count jinja2 template so card-mod doesn't have to #49.
• Scrolled header performance improvements.
• Material Design 3 ha-switch performance improvements, focused state layer fixes, and increase thumb size on hover and focus.
• Fix profile tab navigation rail/drawer transition animation.
• Fix edit mode menu link button color.
• Refactor how Material You --md-sys-color theme colors are set for better downstream usage.
• Fix subview back button not being interactable or scrolling.
• Fix input-ink-color typo made during refactor.
• Tweak Material Rounded theme switch, checkbox, and radio button colors to match Material You theme defaults.
• Change --accent-color and --text-accent-color to --md-sys-color-secondary and --md-sys-color-on-secondary to fix graph color without card mod #72.
  • And remove graph color card mod fixes.
• Fix position of ha-switch input element.

Full Changelog: 3.0.8...3.1.4

3.1.3 - View Titles and State Layers

Changes in 3.1.3

• Fix subview back button not being interactable or scrolling.
• Fix input-ink-color typo made during refactor.
• Tweak Material Rounded theme switch, checkbox, and radio button colors to match Material You theme defaults.
• Change --accent-color and --text-accent-color to --md-sys-color-secondary and --md-sys-color-on-secondary to fix graph color without card mod #72.
  • And remove graph color card mod fixes.

View Titles

The current view name is now present in the top center of views, as defined by the center-aligned top app bar specification

State Layers

State layers are semi-transparent layers that visually indicate different user interactions, such as hovering and pressing. State layers have now been added to the navigation bar, drawer, and rail as defined by the Material Design 3 specification. You'll now see state layers when hovering over and pressing view tabs and sidebar destinations.

Other Changes

• Increase header height to 64px to match top app bar specification.
• Increase the font weight of the current view or destination to match the Material Design 3 specification.
• Reduce gap between view icon and title to better match Material You Android apps.
• Tweak header scroll transition to be more consistent.
• Move current view tab icon indicator to a pseudo-element to improve it's performance and fix a visual bug where it would jitter when selected.

Patch Version Changes

• Fix navigation rail badge z-index.
• Add new theme variables for upcoming Custom Features toggle Material Design switches.
• Remove box-shadow from toggle switch thumb.
• Fix unchecked toggle switch track color.
• Add state layers to toggle switch.
• Fix Material Rounded checkbox colors when using JS module.
• Add checkbox unchecked state layer color.
• Pre-render view tabs count jinja2 template so card-mod doesn't have to #49.
• Scrolled header performance improvements.
• Material Design 3 ha-switch performance improvements, focused state layer fixes, and increase thumb size on hover and focus.
• Fix profile tab navigation rail/drawer transition animation.
• Fix edit mode menu link button color.
• Refactor how Material You --md-sys-color theme colors are set for better downstream usage.
• Fix subview back button not being interactable or scrolling.
• Fix input-ink-color typo made during refactor.
• Tweak Material Rounded theme switch, checkbox, and radio button colors to match Material You theme defaults.
• Change --accent-color and --text-accent-color to --md-sys-color-secondary and --md-sys-color-on-secondary to fix graph color without card mod #72.
  • And remove graph color card mod fixes.

Full Changelog: 3.0.8...3.1.3

3.1.2 - View Titles and State Layers

Changes in 3.1.2

• Scrolled header performance improvements.
• Material Design 3 ha-switch performance improvements, focused state layer fixes, and increase thumb size on hover and focus.
• Fix profile tab navigation rail/drawer transition animation.
• Fix edit mode menu link button color.
• Refactor how Material You --md-sys-color theme colors are set for better downstream usage.

View Titles

The current view name is now present in the top center of views, as defined by the center-aligned top app bar specification

State Layers

State layers are semi-transparent layers that visually indicate different user interactions, such as hovering and pressing. State layers have now been added to the navigation bar, drawer, and rail as defined by the Material Design 3 specification. You'll now see state layers when hovering over and pressing view tabs and sidebar destinations.

Other Changes

• Increase header height to 64px to match top app bar specification.
• Increase the font weight of the current view or destination to match the Material Design 3 specification.
• Reduce gap between view icon and title to better match Material You Android apps.
• Tweak header scroll transition to be more consistent.
• Move current view tab icon indicator to a pseudo-element to improve it's performance and fix a visual bug where it would jitter when selected.

Patch Version Changes

• Fix navigation rail badge z-index.
• Add new theme variables for upcoming Custom Features toggle Material Design switches.
• Remove box-shadow from toggle switch thumb.
• Fix unchecked toggle switch track color.
• Add state layers to toggle switch.
• Fix Material Rounded checkbox colors when using JS module.
• Add checkbox unchecked state layer color.
• Pre-render view tabs count jinja2 template so card-mod doesn't have to #49.
• Scrolled header performance improvements.
• Material Design 3 ha-switch performance improvements, focused state layer fixes, and increase thumb size on hover and focus.
• Fix profile tab navigation rail/drawer transition animation.
• Fix edit mode menu link button color.
• Refactor how Material You --md-sys-color theme colors are set for better downstream usage.

Full Changelog: 3.0.8...3.1.2

3.1.1 - View Titles and State Layers

Changes in 3.1.1

• Fix navigation rail badge z-index.
• Add new theme variables for upcoming Custom Features toggle Material Design switches.
• Remove box-shadow from toggle switch thumb.
• Fix unchecked toggle switch track color.
• Add state layers to toggle switch.
• Fix Material Rounded checkbox colors when using JS module.
• Pre-render view tabs count jinja2 template so card-mod doesn't have to #49.

View Titles

The current view name is now present in the top center of views, as defined by the center-aligned top app bar specification

State Layers

State layers are semi-transparent layers that visually indicate different user interactions, such as hovering and pressing. State layers have now been added to the navigation bar, drawer, and rail as defined by the Material Design 3 specification. You'll now see state layers when hovering over and pressing view tabs and sidebar destinations.

Other Changes

• Increase header height to 64px to match top app bar specification.
• Increase the font weight of the current view or destination to match the Material Design 3 specification.
• Reduce gap between view icon and title to better match Material You Android apps.
• Tweak header scroll transition to be more consistent.
• Move current view tab icon indicator to a pseudo-element to improve it's performance and fix a visual bug where it would jitter when selected.

Patch Version Changes

• Fix navigation rail badge z-index.
• Add new theme variables for upcoming Custom Features toggle Material Design switches.
• Remove box-shadow from toggle switch thumb.
• Fix unchecked toggle switch track color.
• Add state layers to toggle switch.
• Fix Material Rounded checkbox colors when using JS module.
• Add checkbox unchecked state layer color.
• Pre-render view tabs count jinja2 template so card-mod doesn't have to #49.

Full Changelog: 3.0.8...3.1.1

3.1.0 - View Titles and State Layers

View Titles

The current view name is now present in the top center of views, as defined by the center-aligned top app bar specification

State Layers

State layers are semi-transparent layers that visually indicate different user interactions, such as hovering and pressing. State layers have now been added to the navigation bar, drawer, and rail as defined by the Material Design 3 specification. You'll now see state layers when hovering over and pressing view tabs and sidebar destinations.

Other Changes

• Increase header height to 64px to match top app bar specification.
• Increase the font weight of the current view or destination to match the Material Design 3 specification.
• Reduce gap between view icon and title to better match Material You Android apps.
• Tweak header scroll transition to be more consistent.
• Move current view tab icon indicator to a pseudo-element to improve it's performance and fix a visual bug where it would jitter when selected.

Full Changelog: 3.0.8...3.1.0

3.0.8 - True Material You Color Theming

Changes in 3.0.8

• Fix checkbox and radio button colors #64.

⚠️ 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.
• 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.
• Better fix for graph colors #61.
• Improve/fix view tabs count calculation to not include hidden tabs, which allows hidden and sub views to be placed in the middle of the tab order #62.
  • Older devices that do not support the nth-child of <selector> syntax will fallback to the old method, which requires hidden and sub views to be placed at the end of the tab order.
• Only save card-mod yaml fields to the main Material Rounded version of the theme, and have the Material You versions of the theme reference that.
• Make sidebar badge font bold and fix position of rail badge.
• Remove --rgb-primary-text-color from themes and let it be auto-generated by Home Assistant #63.
• Fix checkbox and radio button colors #64.

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.
• Fix user name sensor logic to handle user names with more than two names #60.
• Remove theme colors from iframes when unsetTheme is called.
• Add asynchronous checks to page web element retrieval to fix issues when the module is used as a frontend module #54.
• Improve logging to include theme colors.
• Improve async query and get functions to be less demanding by using an observer and increasing while loop sleep timeout over time.

Full Changelog: 2.1.10...3.0.7

3.0.7 - True Material You Color Theming

Changes in 3.0.7

• Remove --rgb-primary-text-color from themes and let it be auto-generated by Home Assistant #63.

⚠️ 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.
• 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.
• Better fix for graph colors #61.
• Improve/fix view tabs count calculation to not include hidden tabs, which allows hidden and sub views to be placed in the middle of the tab order #62.
  • Older devices that do not support the nth-child of <selector> syntax will fallback to the old method, which requires hidden and sub views to be placed at the end of the tab order.
• Only save card-mod yaml fields to the main Material Rounded version of the theme, and have the Material You versions of the theme reference that.
• Make sidebar badge font bold and fix position of rail badge.
• Remove --rgb-primary-text-color from themes and let it be auto-generated by Home Assistant #63.

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.
• Fix user name sensor logic to handle user names with more than two names #60.
• Remove theme colors from iframes when unsetTheme is called.
• Add asynchronous checks to page web element retrieval to fix issues when the module is used as a frontend module #54.
• Improve logging to include theme colors.
• Improve async query and get functions to be less demanding by using an observer and increasing while loop sleep timeout over time.

Full Changelog: 2.1.10...3.0.7

3.0.6 - True Material You Color Theming

Changes in 3.0.6

• Improve/fix view tabs count calculation to not include hidden tabs, which allows hidden and sub views to be placed in the middle of the tab order #62.
  • Older devices that do not support the nth-child of <selector> syntax will fallback to the old method, which requires hidden and sub views to be placed at the end of the tab order.
• Only save card-mod yaml fields to the main Material Rounded version of the theme, and have the Material You versions of the theme reference that.
• Make sidebar badge font bold and fix position of rail badge.
• JS Module Changes
  • Improve logging to include theme colors.
  • Improve async query and get functions to be less demanding by using an observer and increasing while loop sleep timeout over time.

⚠️ 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.
• 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.
• Better fix for graph colors #61.
• Improve/fix view tabs count calculation to not include hidden tabs, which allows hidden and sub views to be placed in the middle of the tab order #62.
  • Older devices that do not support the nth-child of <selector> syntax will fallback to the old method, which requires hidden and sub views to be placed at the end of the tab order.
• Only save card-mod yaml fields to the main Material Rounded version of the theme, and have the Material You versions of the theme reference that.
• Make sidebar badge font bold and fix position of rail badge.

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.
• Fix user name sensor logic to handle user names with more than two names #60.
• Remove theme colors from iframes when unsetTheme is called.
• Add asynchronous checks to page web element retrieval to fix issues when the module is used as a frontend module #54.
• Improve logging to include theme colors.
• Improve async query and get functions to be less demanding by using an observer and increasing while loop sleep timeout over time.

Full Changelog: 2.1.10...3.0.6

3.0.5 - True Material You Color Theming

Changes in 3.0.5

• Better fix for graph colors #61.

⚠️ 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.
• 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.
• Better fix for graph colors #61.

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.
• Fix user name sensor logic to handle user names with more than two names #60.
• Remove theme colors from iframes when unsetTheme is called.
• Add asynchronous checks to page web element retrieval to fix issues when the module is used as a frontend module #54.

Full Changelog: 2.1.10...3.0.5