diff --git a/package-lock.json b/package-lock.json index 926d92c0..53f654ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,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", @@ -1037,6 +1038,70 @@ "rxjs": "^6.5.3 || ^7.4.0" } }, + "node_modules/@angular/material-experimental": { + "version": "17.2.0", + "resolved": "https://registry.npmjs.org/@angular/material-experimental/-/material-experimental-17.2.0.tgz", + "integrity": "sha512-/celW5owLnYemLDApj0rgEiJOviFx2sGFqhEq6W7/5N6iCAZAr3MF1SBmuH+yFXyO51VQKYAFTGD1vh4U1bXHQ==", + "dependencies": { + "@material/animation": "15.0.0-canary.7f224ddd4.0", + "@material/auto-init": "15.0.0-canary.7f224ddd4.0", + "@material/banner": "15.0.0-canary.7f224ddd4.0", + "@material/base": "15.0.0-canary.7f224ddd4.0", + "@material/button": "15.0.0-canary.7f224ddd4.0", + "@material/card": "15.0.0-canary.7f224ddd4.0", + "@material/checkbox": "15.0.0-canary.7f224ddd4.0", + "@material/chips": "15.0.0-canary.7f224ddd4.0", + "@material/circular-progress": "15.0.0-canary.7f224ddd4.0", + "@material/data-table": "15.0.0-canary.7f224ddd4.0", + "@material/density": "15.0.0-canary.7f224ddd4.0", + "@material/dialog": "15.0.0-canary.7f224ddd4.0", + "@material/dom": "15.0.0-canary.7f224ddd4.0", + "@material/drawer": "15.0.0-canary.7f224ddd4.0", + "@material/elevation": "15.0.0-canary.7f224ddd4.0", + "@material/fab": "15.0.0-canary.7f224ddd4.0", + "@material/feature-targeting": "15.0.0-canary.7f224ddd4.0", + "@material/floating-label": "15.0.0-canary.7f224ddd4.0", + "@material/form-field": "15.0.0-canary.7f224ddd4.0", + "@material/icon-button": "15.0.0-canary.7f224ddd4.0", + "@material/image-list": "15.0.0-canary.7f224ddd4.0", + "@material/layout-grid": "15.0.0-canary.7f224ddd4.0", + "@material/line-ripple": "15.0.0-canary.7f224ddd4.0", + "@material/linear-progress": "15.0.0-canary.7f224ddd4.0", + "@material/list": "15.0.0-canary.7f224ddd4.0", + "@material/menu": "15.0.0-canary.7f224ddd4.0", + "@material/menu-surface": "15.0.0-canary.7f224ddd4.0", + "@material/notched-outline": "15.0.0-canary.7f224ddd4.0", + "@material/radio": "15.0.0-canary.7f224ddd4.0", + "@material/ripple": "15.0.0-canary.7f224ddd4.0", + "@material/rtl": "15.0.0-canary.7f224ddd4.0", + "@material/segmented-button": "15.0.0-canary.7f224ddd4.0", + "@material/select": "15.0.0-canary.7f224ddd4.0", + "@material/shape": "15.0.0-canary.7f224ddd4.0", + "@material/slider": "15.0.0-canary.7f224ddd4.0", + "@material/snackbar": "15.0.0-canary.7f224ddd4.0", + "@material/switch": "15.0.0-canary.7f224ddd4.0", + "@material/tab": "15.0.0-canary.7f224ddd4.0", + "@material/tab-bar": "15.0.0-canary.7f224ddd4.0", + "@material/tab-indicator": "15.0.0-canary.7f224ddd4.0", + "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0", + "@material/textfield": "15.0.0-canary.7f224ddd4.0", + "@material/theme": "15.0.0-canary.7f224ddd4.0", + "@material/tooltip": "15.0.0-canary.7f224ddd4.0", + "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0", + "@material/touch-target": "15.0.0-canary.7f224ddd4.0", + "@material/typography": "15.0.0-canary.7f224ddd4.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^17.0.0 || ^18.0.0", + "@angular/cdk": "17.2.0", + "@angular/common": "^17.0.0 || ^18.0.0", + "@angular/core": "^17.0.0 || ^18.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0", + "@angular/material": "17.2.0", + "@angular/platform-browser": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@angular/platform-browser": { "version": "17.2.1", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.2.1.tgz", diff --git a/package.json b/package.json index 286629fd..6039b38f 100644 --- a/package.json +++ b/package.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", diff --git a/projects/angular-intl-demo/src/app/app.component.html b/projects/angular-intl-demo/src/app/app.component.html index 19d9d091..afd0857f 100644 --- a/projects/angular-intl-demo/src/app/app.component.html +++ b/projects/angular-intl-demo/src/app/app.component.html @@ -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 diff --git a/projects/angular-intl-demo/src/app/app.component.ts b/projects/angular-intl-demo/src/app/app.component.ts index 143ea28d..5ff66dd6 100644 --- a/projects/angular-intl-demo/src/app/app.component.ts +++ b/projects/angular-intl-demo/src/app/app.component.ts @@ -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); + }); + } +} diff --git a/projects/angular-intl-demo/src/app/app.config.ts b/projects/angular-intl-demo/src/app/app.config.ts index bf8dbfe6..fe83d83b 100644 --- a/projects/angular-intl-demo/src/app/app.config.ts +++ b/projects/angular-intl-demo/src/app/app.config.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()), ], }; diff --git a/projects/angular-intl-demo/src/assets/github-mark.png b/projects/angular-intl-demo/src/assets/github-mark.png new file mode 100644 index 00000000..6cb3b705 Binary files /dev/null and b/projects/angular-intl-demo/src/assets/github-mark.png differ diff --git a/projects/angular-intl-demo/src/styles.scss b/projects/angular-intl-demo/src/styles.scss index 40fc9ca3..ab1edf6d 100644 --- a/projects/angular-intl-demo/src/styles.scss +++ b/projects/angular-intl-demo/src/styles.scss @@ -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,