Material 3 Experimental Support in Angular 17.2
We’re thrilled to announce that Angular 17.2 features experimental support for Material 3 theming in Angular Material.
In this blog post we’re updating you on the latest news about this feature and providing a preview of what’s next for Material 3 support.
What is Material 3
Material 3 is the latest evolution of Material Design, Google’s open-source design system. Material 3 for Angular is implemented as an alternate theme, compatible with the same Angular Material components and Sass mixins you use today.
Material 3 themes are based on design tokens (implemented as CSS custom properties). This allows you to more easily override the theme without increasing CSS selector specificity. It also enables you to granularly override specific properties without the need to target CSS selectors at internal Angular Material elements.
Using Material 3 in your application
To use Material 3 in your app, create an M3 theme in Sass using matx.define-theme and pass it to the same Angular Material Sass mixins you’re using currently:
@use '@angular/material' as mat;
@use '@angular/material-experimental' as matx;
$m3-dark-theme: matx.define-theme((
color: (
theme-type: dark,
primary: matx.$m3-indigo-palette,
tertiary: matx.$m3-blue-palette,
)
));
$m3-light-theme: matx.define-theme((
color: (
primary: matx.$m3-indigo-palette,
tertiary: matx.$m3-blue-palette,
)
));
.dark-theme {
@include mat.all-component-themes($m3-dark-theme);
}
.light-theme {
@include mat.all-component-themes($m3-light-theme);
}Because M3 themes are fully based on CSS custom properties, all of the theme, color, typography, and density mixins are guaranteed to only output CSS custom properties with no additional selector specificity. This means you can define the custom properties at the highest level and have them flow down to the components that rely on them. You can override the theme for a section of your app without worrying about selector specificity. For example, both of the following layouts work as expected, regardless of the order `.dark-theme` and `.light-theme` are defined in your Sass.
<body class="light-theme">
Light theme
<sidenav class="dark-theme">With a dark sidenav!</sidenav>
</body><body class="dark-theme">
Dark theme
<sidenav class="light-theme">With a light sidenav!</sidenav>
</body>Granular customizations beyond the Sass API are possible by setting the CSS custom properties directly. For example, you may want to emphasize a checkbox that the user should be particularly careful about enabling:
<mat-checkbox class="scary-setting">Delete my account</mat-checkbox>.scary-setting {
// No need to target any internal checkbox selectors! 🎉
- mdc-checkbox-unselected-hover-state-layer-color: red;
- mdc-checkbox-unselected-hover-icon-color: red;
}As with the official Sass mixins, these properties flow down to where they’re used, so if you have a whole section of scary checkboxes, you don’t need to apply this class to all of them, you can just apply it to the highest level element where the customizations should apply.
<section class="scary-setting">
<mat-checkbox>Delete my account</mat-checkbox>
<mat-checkbox>Also drain my bank account</mat-checkbox>
</section>Material 2 support
While we’re incredibly excited to introduce Material 3 and can’t wait for you to give it a try, Material 2 themes are still fully supported.
There are a few differences in how M2 and M3 themes are handled, most notably with respect to component color variants. You can read more about these differences in our guide to using Material 3.
Get Started Today
We are so excited to share this update with all of you in the Angular community. We can’t wait to hear your feedback — leave comments on this post to let us know what you think. You can try this feature today by heading over to our guide to Material 3. We’ll continue to work on custom color palette generation, CSS variables for system-level tokens, and polishing the API in order to graduate it to stable.
Thanks for reading and [END OF TRANSMISSION]
