Releases: Nerwyn/material-you-utilities
2.0.24 - Material Expressive
Changes in 2.0.24
- 2025.11.3 fix sidebar collapsed state layer.
- Use HA card helpers for confirmation dialog.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
- Fix apply styles on timeout ready check #49.
- Fix Add Card button on non-sections views #51.
- 2025.11.0
ha-wa-dialogstyles #53. ha-dialog-headerstyles.- Better entities card header toggle position fix.
- Apply card variant styles to
hui-cardchildhui-*-cards to support setting card class variant with card-mod v4. - 2025.11.3 fix sidebar collapsed state layer.
- Use HA card helpers for confirmation dialog.
Full Changelog: 1.0.20...2.0.24
2.0.23 - Material Expressive
Changes in 2.0.23
- Better entities card header toggle position fix.
- Apply card variant styles to
hui-cardchildhui-*-cards to support setting card class variant with card-mod v4.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
- Fix apply styles on timeout ready check #49.
- Fix Add Card button on non-sections views #51.
- 2025.11.0
ha-wa-dialogstyles #53. ha-dialog-headerstyles.- Better entities card header toggle position fix.
- Apply card variant styles to
hui-cardchildhui-*-cards to support setting card class variant with card-mod v4.
Full Changelog: 1.0.20...2.0.23
2.0.22 - Material Expressive
Changes in 2.0.22
- 2025.11.0
ha-wa-dialogstyles #53. ha-dialog-headerstyles.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
- Fix apply styles on timeout ready check #49.
- Fix Add Card button on non-sections views #51.
- 2025.11.0
ha-wa-dialogstyles #53. ha-dialog-headerstyles.
Full Changelog: 1.0.20...2.0.22
2.0.21 - Material Expressive
Changes in 2.0.21
- Fix Add Card button on non-sections views #51.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
- Fix apply styles on timeout ready check #49.
- Fix Add Card button on non-sections views #51.
Full Changelog: 1.0.20...2.0.21
2.0.20 - Material Expressive
Changes in 2.0.20
- Fix apply styles on timeout ready check #49.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
- Fix apply styles on timeout ready check #49.
Full Changelog: 1.0.20...2.0.20
2.0.19 - Material Expressive
Changes in 2.0.19
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
- Add a show/hide application bar toggle #45.
- Fix configuration panel from throwing an error if Material You Theme is not installed #47.
- Fix application and navigation bar styles applying to current user when set for a different user.
Full Changelog: 1.0.20...2.0.19
2.0.17 - Material Expressive
Changes in 2.0.17
- Update button group styles to match specification.
- Use button groups in config cards.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
- Update button group styles to match specification.
- Use button groups in config cards.
Full Changelog: 1.0.20...2.0.17
2.0.16 - Material Expressive
Changes in 2.0.16
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
- Fix button shape morph do not change on hover.
- Update configuration panel card create/delete buttons to follow updated Material Expressive specification.
Full Changelog: 1.0.20...2.0.16
2.0.15 - Material Expressive
Changes in 2.0.15
- 2025.10.0 button state layer fix and slider improvements.
- Remember to thoroughly clear cache!
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- 2025.10.0 button state layer fix and slider improvements.
Full Changelog: 1.0.20...2.0.15
2.0.14 - Material Expressive
Changes in 2.0.14
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
- Remember to thoroughly clear cache!
Material Expressive #13
In May of 2025 Google announced that Android 16 includes a major update to Material Design 3 - Material 3 Expressive. Material Expressive introduces updated dynamic color themes, component designs, and animations. I'm proud to say that Material You Theme and this module have been updated to follow the updated Material 3 Expressive specifications. Home Assistant can look just like your up to date Android 16 apps with updated colors, components, and animations.
This update requires at least Material You Theme version 5.0.0 to function properly. The theme includes new and updated material design system tokens for expressive colors and animations that this update relies on.
Specification Versions and Platforms
The Material Color Utilities package has been updated to support Material Expressive with a new 2025 specification for dynamic color theme generation. You can choose between this new specification or the original 2021 specification in the configuration panel. Try out the Expressive and Vibrant schemes with the 2025 specifications!
When using the 2025 specification, you also have access to a new platform field. You can use this to choose whether the dynamic color theme should be generated for phone or watches. While you cannot apply these generated dynamic theme colors to a watch, you can still choose to generate the watch colors. The 2021 specification does not support the platform field.
Updated Components
Many components styles upgrades have been updated to follow the new Material Expressive specifications. Here are some significant ones:
Navigation Bar
The navigation bar is now shorter and has an alternate horizontal layout for icons and labels on larger displays.
Navigation Rail and Drawer
The navigation rail now follows the latest Material Design specification in its entirety. Each destination has a smaller indicator and it's label underneath it when not expanded. When expanded, the navigation rail destination indicators only fit the width of the destination label rather than the full width of the expanded rail. The rail also has updated expressive animations when opening and closing.
Headlines
The default headline added in theme version 3.1.0 has been removed. This headline was added shortly before Home Assistant implemented its own much more robust headline system. If you want headlines on your pages you should instead switch to that. The styles of markdown cards (like the Home Assistant headline card) has been modified so that headers set using markdown or HTML will use the app bar large, medium, and small title and subtitle fonts, with h1, h2, and h3 referring to large, medium, and small titles and h4, h5, and h6 referring to large, medium, and small subtitles. If a subtitle is placed after a title the margin between them will be removed.
Animations
Material Expressive comes with a new motion physics system. Transitions now have more bounce and will slightly overshoot their final values before stopping. These transitions have been applied to many components such as switches, dialogs, and the navigation rail.
Other Features and Changes
Semantic Color Harmonization #30
One problem with dynamic color themes is that static colors can be visually displeasing with certain theme palettes. The creators of Material Design accounted for this with the concept of dynamic color harmonization. By enabling this feature all semantic colors, such as red, yellow, warning, info, etc., will be hue shifted towards the theme primary color. You'll notice these changes in cards that make use of static colors like tile cards, climate cards, and more info dialogs.
Base Color From Image #24
You can now derive your theme base color from an image. By providing your theme settings with an image URL (either locally hosted on your Home Assistant server or on an external server with CORS approval), the base color input will automatically be updated when opening Home Assistant or when the URL changes. Changing the contents of the image file by itself will not update already open Home Assistant pages, as the image URL input helper has not changed.
Card Types
The Material Design 3 specification offers three card types. In version 1 of this module you could use card-mod to set the class of a card to easily use the alternate card type styles. You can now also set the global card type style in the configuration panel. All cards in Home Assistant will default to the style set in this user set input if they do not have a different card type attribute or class set. Cards found in the configuration pages already have type outlined, and this will supersede the default elevated card type or one set by the user. Card type set using card-mod classes will supersede card types set in the configuration panel.
CSS From File #7
You can now apply CSS from a file using this module. Previously it was recommended that users do this using frontend resources, but this did not work for all users. Custom CSS from a file set using this module should apply consistently to Home Assistant and iframes like the HACS and Add-Ons pages.
Show/Hide Navigation Bar #27
You now have the option to hide the navigation bar using this module, rather than modifying the theme to use card-mod to do so. This allows you to use an alternate navigation system such as navbar-card.
Device Settings #22
You can now set theme and style settings for a specific device. These settings will be prioritized over the user and default settings. Device settings uses Browser Mod to keep track of the current and other device/browser instances, which can be installed using HACS. Because of how Browser Mod defines separate browser instances, the devices settings are user specific.
Administrators can see all configured devices in the devices tab for all users. Non-administrators can only see device settings for the device they are currently using. Be warned that if you create helpers for a device but then change the browser name using Browser Mods configuration panel, the old inputs will be orphaned and you will have to manually delete them from your helpers list.
Theme Mode FAB
The configuration panel now has a floating action button that will allow you to easily switch to Material You Theme and cycle between light, dark, and auto modes to help you quickly see how your dynamic color themes look in light and dark modes.
Patch Version Fixes
- Fix set/unset palette infinite loop check.
- Fix
style.getPropertyValuetrim result to prevent fatal Firefox bug. - Ensure that entity IDs are lower case and replace spaces and dashes with underscores #34.
- Refactored delayed set functions to have consistent logic.
- Fix button state layer transition.
- Header top margin and margin between headline and subtitle changes #37.
- Kiosk mode sidebar fix support #38.
- Fix updates config card list overflow #39.
- Safari/iOS modal sidebar and navigation bar width fixes #40.
- Increase footer height with larger font size and do not hide sidebar label overflow #42.
- 2025.9.0 navigation bar fixes.
- Fix keyframes styles regex to avoid catastrophic lookback.
- 2025.10.0 navigation bar and slider fixes Nerwyn/material-you-theme#119
Full Changelog: 1.0.20...2.0.14