refactor: use m3 theme

Author: nzbin

projects/dev-app/src/app/home/home.component.html

@@ -8,7 +8,7 @@ <h4>Code Editor Config</h4>
 
   <div>
     <h4>
-      <button mat-button (click)="showOutput = !showOutput">Toggle output</button>
+      <button matButton (click)="showOutput = !showOutput">Toggle output</button>
     </h4>
     <div class="editor-wrap">
       <code-editor

projects/dev-app/src/app/home/home.component.scss

@@ -6,7 +6,7 @@
   }
 
   .cm-editor {
-    border: 1px solid var(--mat-divider-color);
+    border: 1px solid var(--mat-sys-outline-variant);
   }
 }
 

projects/dev-app/src/styles.scss

@@ -2,21 +2,16 @@
 @use '@angular/material' as mat;
 @use '@ng-matero/extensions' as mtx;
 
-@include mat.elevation-classes();
-@include mat.app-background();
+html {
+  color-scheme: light;
 
-$primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500);
-$accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
-$theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-    ),
-    typography: mat.m2-define-typography-config(),
-    density: 0,
-  )
-);
+  @include mat.theme((
+    color: mat.$azure-palette,
+    typography: Roboto,
+    density: 0
+  ));
+}
 
-@include mat.all-component-themes($theme);
-@include mtx.all-component-themes($theme);
+.theme-dark {
+  color-scheme: dark;
+}