docs: migrate docs app to M3 (#285)

Author: json-derulo

package-lock.json

@@ -22,6 +22,7 @@
     "@angular/core": "~17.2.0",
     "@angular/forms": "~17.2.0",
     "@angular/material": "~17.2.0",
+    "@angular/material-experimental": "~17.2.0",
     "@angular/platform-browser": "~17.2.0",
     "@angular/platform-browser-dynamic": "~17.2.0",
     "@angular/router": "~17.2.0",

package.json

@@ -12,7 +12,13 @@
       alt="GitHub logo"
       class="logo"
       matButtonIcon
-      src="assets/github-mark-white.png"
+      [ngSrc]="
+        isDarkTheme()
+          ? 'assets/github-mark-white.png'
+          : 'assets/github-mark.png'
+      "
+      height="24"
+      width="24"
     />
     GitHub
   </a>

projects/angular-intl-demo/src/app/app.component.html

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { NgOptimizedImage } from '@angular/common';
+import { Component, signal } from '@angular/core';
 import { MatAnchor, MatButton } from '@angular/material/button';
 import { MatToolbar } from '@angular/material/toolbar';
 import { RouterLink, RouterOutlet } from '@angular/router';
@@ -8,6 +9,21 @@ import { RouterLink, RouterOutlet } from '@angular/router';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   standalone: true,
-  imports: [RouterLink, RouterOutlet, MatToolbar, MatButton, MatAnchor],
+  imports: [
+    RouterLink,
+    RouterOutlet,
+    MatToolbar,
+    MatButton,
+    MatAnchor,
+    NgOptimizedImage,
+  ],
 })
-export class AppComponent {}
+export class AppComponent {
+  darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  isDarkTheme = signal(this.darkModeQuery.matches);
+  constructor() {
+    this.darkModeQuery.addEventListener('change', (event) => {
+      this.isDarkTheme.set(event.matches);
+    });
+  }
+}

projects/angular-intl-demo/src/app/app.component.ts

@@ -1,14 +1,14 @@
 import { provideHttpClient } from '@angular/common/http';
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { ApplicationConfig } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
-import { MarkdownModule } from 'ngx-markdown';
+import { provideRouter, withHashLocation } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    importProvidersFrom(MarkdownModule.forRoot()),
+    provideMarkdown(),
     {
       provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
       useValue: {
@@ -17,6 +17,6 @@ export const appConfig: ApplicationConfig = {
     },
     provideAnimations(),
     provideHttpClient(),
-    provideRouter(routes),
+    provideRouter(routes, withHashLocation()),
   ],
 };

projects/angular-intl-demo/src/app/app.config.ts

@@ -1,43 +1,43 @@
 @use "@angular/material" as mat;
+@use "@angular/material-experimental" as matx;
 
 @include mat.core();
 
-$light-theme: mat.define-light-theme(
+$light-theme: matx.define-theme(
   (
     color: (
-      primary: mat.define-palette(mat.$deep-purple-palette),
-      accent: mat.define-palette(mat.$deep-orange-palette),
+      primary: matx.$m3-violet-palette,
     ),
-    typography: mat.define-typography-config(),
-    density: 0,
   )
 );
 
-$dark-theme: mat.define-dark-theme(
+$dark-theme: matx.define-theme(
   (
     color: (
-      primary: mat.define-palette(mat.$purple-palette),
-      accent: mat.define-palette(mat.$deep-orange-palette),
+      theme-type: dark,
+      primary: matx.$m3-magenta-palette,
     ),
   )
 );
 
-@include mat.core-theme($light-theme);
-@include mat.button-theme($light-theme);
-@include mat.toolbar-theme($light-theme);
-@include mat.tabs-theme($light-theme);
-@include mat.select-theme($light-theme);
-@include mat.input-theme($light-theme);
-@include mat.form-field-theme($light-theme);
+html {
+  @include mat.core-theme($light-theme);
+  @include mat.button-theme($light-theme);
+  @include mat.toolbar-theme($light-theme);
+  @include mat.tabs-theme($light-theme);
+  @include mat.select-theme($light-theme);
+  @include mat.input-theme($light-theme);
+  @include mat.form-field-theme($light-theme);
 
-@media (prefers-color-scheme: dark) {
-  @include mat.core-color($dark-theme);
-  @include mat.button-color($dark-theme);
-  @include mat.toolbar-color($dark-theme);
-  @include mat.tabs-color($dark-theme);
-  @include mat.select-color($dark-theme);
-  @include mat.input-color($dark-theme);
-  @include mat.form-field-color($dark-theme);
+  @media (prefers-color-scheme: dark) {
+    @include mat.core-color($dark-theme);
+    @include mat.button-color($dark-theme);
+    @include mat.toolbar-color($dark-theme);
+    @include mat.tabs-color($dark-theme);
+    @include mat.select-color($dark-theme);
+    @include mat.input-color($dark-theme);
+    @include mat.form-field-color($dark-theme);
+  }
 }
 
 html,