github Nerwyn/material-you-utilities 1.0.22
1.0.22 - Material You Utilities

latest releases: 2.1.26, 2.1.25, 2.1.24...
15 months ago

Changes in 1.0.22

  • Fix ha-list-item meta size cutting of switch.

Material You, Unlimited

The companion JavaScript module for Material You theme has been moved here to its own repository, to make it easier for users to receive updates through HACS.

This module now handles not only user color themes, but the Home Assistant custom component style upgrades as well. The theme no longer uses card-mod, but instead "monkey patches" the lifecycle methods of custom element constructors to include the custom styles. This allows these styles to be applied everywhere in Home Assistant and should fix the performance issues many users are experiencing issue Nerwyn/material-you-theme#49.

You should delete the old color only JavaScript module file from both frontend resources and modules before installing this version. Because the new method of applying style upgrades is time sensitive, you should install it as a frontend module in configuration.yaml and not resources. It is not guaranteed to work if installed as a frontend resource. You should also install it as a custom panel to use the new configuration options. See the README for full instructions.

You now have even more control of how your Material You theme is generated! Component style upgrades now work everywhere in Home Assistant and are much more efficient. Component upgrades no longer use card-mod and require the new JavaScript module.

Configuration UI

If you install the theme following the updated instructions, you'll notice a new sidebar option! This is the new Material You Theme configuration page. Here you can automatically generate the input helpers for all users and global defaults. An administrator must setup the inputs for a non-administrator user before they can be used. Non-administrators can access this page and setup their own theme colors.

The old sensor domain inputs used by older versions of Material You theme have been obsoleted. If you have any custom logic surrounding them, you should migrate them to automations that set the new input helpers using service calls on sensor state change. An example automation is included in the README.

Schemes and Contrast Level

Material Color Utilities has nine available dynamic schemes for you to choose from. See the README for more information about them, or just try them out yourself in the configuration UI panel.

  • Tonal Spot (default)
  • Content
  • Fidelity
  • Expressive
  • Fruit Salad
  • Rainbow
  • Vibrant
  • Neutral
  • Monochrome

You can now also set the color theme contrast level. This should be a number between -1 and 1 (default 0), and can be set in the configuration UI panel.

Even More Component Style Upgrades

The method for applying custom styles to custom elements has been completely reworked. This method is faster, more efficient, and more thorough as it "monkey patches" the lifecycle methods of custom elements before they're created, and the styles are applied at element creation. These redesigns will now appear everywhere in Home Assistant.

Style upgrades have been added to many more elements via theme variables and CSS modifications. Screenshots of most changes can be found in the README.

Patch Version Changes

  • RTL fixes for switches, top app bar, and sidebar profile initials/picture.
  • Tweak card alternate styles to use custom properties, and change outlined card to use a border instead.
  • Efficiency/consistency improvements for style application.
  • Grid/stack editor horizontal overflow fix.
  • Set pointer-events: all on header cards.
  • Require confirmation on Delete Helpers.
  • Repository name changed to material-you-utilities and updated workflow action for HACS submission.
  • Input chip styles.
  • Slider thumb negative area will try to match background in cards and dialogs.
  • Add padding to top and bottom of slider to help prevent overflow.
  • Fix ha-input-chip background color when --color is provided.
  • hue-like-light-card style fixes.
  • Always set html background-color to --md-sys-color-surface to be more consistent when user theme colors are not used and with default Home Assistant theme.
  • Refactor how styles are set to extend class rather than replace it's prototype lifecycle functions, and to also try to trigger adding styles on constructor.
  • Navigation bar, rail, and drawer fixes for 2025.5.0 Nerwyn/material-you-theme#87.
  • Fix view tabs centering on large displays.
  • Fix small menu button notification badge size and color.
  • Refactor how styles are set (again) to only run on render or on constructor using a mutation observer.
  • Set styles on a timeout that increases up to 20s in case observer and render miss shadow-root creation.
  • Remove slotted card-content style fix as it broke more than it fixed Nerwyn/material-you-theme#89.
  • Tweak style observer and timeout to only apply styles to shadow-roots with children, and observe childless shadow-roots.
  • Remove styles setting on render, as it no longer seems to be needed alongside the style observer and timeout.
  • Remove view tab tap highlight color.
  • Add top margin to entities card editor toggles #16.
  • Hide overflow on switches instead of its parents #18.
  • Fix switch situationally being cut off.
  • Fix ha-list-item meta size cutting of switch.

Full Changelog: 1.0.0...1.0.22

Don't miss a new material-you-utilities release

NewReleases is sending notifications on new releases.