Article: Modify Angular Material 19 Theme with SCSS & CSS | Angular Material Dev

[giscus[bot]]

Article: Modify Angular Material 19 Theme with SCSS & CSS | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/modify-angular-material-19-theme-with-scss-css

[danielgeorgsson]

What about typography, is it the same aproach as with colors? Cand typography be overridden the same way?

The thembuilder could also include typgraphy tokens. That is if typgraphy could be handeled as the color tokens.

[shhdharmen]

Yes, checkout tokens at https://material.angular.io/guide/system-variables#typography. If you want to update value for --mat-sys-body-small, then you would override body-small token.

Just fyi, I am covering everything in depth in my course https://angular-ui.com/courses/angular-material-theming/

[asurendran17]

Anyone who has switched from m2 theme to m3 theme? I have encountered an issue:

We have a toolkit using Angular Material, it is on v19, but still using an m2 theme. Since there are a lot of components, we want to switch to m3 theme iteratively. So, the migrated components will be on m3 while the others will be on the previous m2 one. Problem is, the m2 theme is applied globally using the all-component-themes mixin in styles.scss, and this CANNOT be overridden by an m3 theme. Cannot find any solution in the v19 docs, maybe I am missing something. Any input, @shhdharmen ?

[shhdharmen]

I would generate M2 theme in a special class and not for all of html. Like below:

.m2 {
  @include mat.all-component-themes($my-theme);
}

And you can wrap non-migrated components in m2 class