Open utterances-bot opened 1 year ago
shawnweeks
commented
1 year ago Some things have changed in newer versions of Material and I think $black-87-opacity needs to be replaced with rgba(black, 0.87) for it work in Material v13. Also $firestarter-demo-primary: mat-palette($custom-orange); might should be $firestarter-demo-primary: mat.define-palette($custom-orange);
datzgit
commented
1 year ago Yep, I also found it difficult today to follow instructions from the current video / course description for angular material theme customization as it evolved since version 10 when the presented code from the course was still valid. Now since version 12, we don't
@import '~@angular/material/theming' anymore, we simply make:
@use '@angular/material' as mat;
and since we use the mat object to define main palettes like this:
$firestarter-primary: mat.define-palette($md-trello);
$firestarter-accent: mat.define-palette($md-trello, A200, A100, A400);
$firestarter-warn: mat.define-palette(mat.$red-palette);
Custom Typography global config (without customizing palette levels)
$custom-typography-config: mat.define-typography-config( $font-family: 'Noto Sans' );
After that we use:
$firestarter-theme: mat.define-light-theme(( color: ( primary: $firestarter-primary, accent: $firestarter-accent, warn: $firestarter-warn, ), typography: $custom-typography-config ));
Notice how we use now in the above firestarter theme definition the typography param where we can pass the global new typography config and we do NOT inject it in the @include mat.core(); anymore.
Of course much better and concise can be written/updated in the lesson description by the Master Angular Guru Jeff
Thank you again for being here for us!
Meet Angular Material
Introduction to Angular Material and design systems
https://fireship.io/courses/angular/basics-resources/