ng update

src/styles.scss

@@ -1,12 +1,12 @@
 // Custom Theming for Angular Material
+@use '~@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 
 @import './variables.scss';
@@ -14,13 +14,13 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$light-theme: mat-light-theme((color: (primary: $light-primary,
+$light-theme: mat.define-light-theme((color: (primary: $light-primary,
       accent: $light-accent,
       warn: $light-warn,
     )));
 
 // Define an alternate dark theme.
-$dark-theme: mat-dark-theme((color: (primary: $dark-primary,
+$dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
       accent: $light-accent,
       warn: $light-warn,
     )));
@@ -30,10 +30,10 @@ $dark-theme: mat-dark-theme((color: (primary: $dark-primary,
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($light-theme);
+@include mat.all-component-themes($light-theme);
 
 .dark-theme {
-  @include angular-material-color($dark-theme);
+  @include mat.all-component-colors($dark-theme);
 }