upgrade dependencies and migrate, small improvements and fixes

package.json

@@ -12,35 +12,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.1",
-    "@angular/cdk": "^17.3.1",
-    "@angular/common": "^17.3.1",
-    "@angular/compiler": "^17.3.1",
-    "@angular/core": "^17.3.1",
-    "@angular/forms": "^17.3.1",
-    "@angular/material": "^17.3.1",
-    "@angular/material-moment-adapter": "^17.3.1",
-    "@angular/platform-browser": "^17.3.1",
-    "@angular/platform-browser-dynamic": "^17.3.1",
-    "@angular/router": "^17.3.1",
-    "@angular/service-worker": "^17.3.1",
+    "@angular/animations": "^19.2.10",
+    "@angular/cdk": "^19.2.15",
+    "@angular/common": "^19.2.10",
+    "@angular/compiler": "^19.2.10",
+    "@angular/core": "^19.2.10",
+    "@angular/forms": "^19.2.10",
+    "@angular/material": "^19.2.15",
+    "@angular/material-moment-adapter": "^19.2.15",
+    "@angular/platform-browser": "^19.2.10",
+    "@angular/platform-browser-dynamic": "^19.2.10",
+    "@angular/router": "^19.2.10",
+    "@angular/service-worker": "^19.2.10",
     "moment": "^2.30.1",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.4"
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.2",
-    "@angular/cli": "^17.3.2",
-    "@angular/compiler-cli": "^17.3.1",
-    "@angular/localize": "^17.3.1",
-    "@types/jasmine": "^5.1.4",
-    "jasmine-core": "~5.1.2",
-    "karma": "^6.4.3",
+    "@angular-devkit/build-angular": "^19.2.11",
+    "@angular/cli": "^19.2.11",
+    "@angular/compiler-cli": "^19.2.10",
+    "@angular/localize": "^19.2.10",
+    "@types/jasmine": "^5.1.8",
+    "jasmine-core": "~5.7.1",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "typescript": "~5.4.3"
+    "typescript": "~5.8.3"
   }
 }

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { I18nService } from './services/i18n.service';
 
 @Component({
+  standalone: false,
   selector: 'app-root',
   templateUrl: './app.component.html'
 })

src/app/material/autofocus.ts

@@ -1,6 +1,7 @@
 import { Directive, ElementRef, OnInit } from '@angular/core';
 
 @Directive({
+  standalone: false,
   selector: '[matAutofocus]',
 })
 export class AutofocusDirective implements OnInit {

src/app/pages/bookmarks/bookmarks.page.ts

@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { BookmarksService } from '../../services/bookmarks.service';
 
 @Component({
+  standalone: false,
   selector: 'page-bookmarks',
   templateUrl: './bookmarks.page.html'
 })

src/app/pages/comment/comment.page.ts

@@ -5,6 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { CommentService } from '../../services/comment.service';
 
 @Component({
+  standalone: false,
   selector: 'page-comment',
   templateUrl: './comment.page.html',
   styleUrls: ['./comment.page.scss']

src/app/pages/entries/entries.page.ts

@@ -1,11 +1,12 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { PageEvent } from '@angular/material/paginator';
+import { ActivatedRoute, Router } from '@angular/router';
 
-import { SettingsService } from '../../services/settings.service';
 import { Subscription } from 'rxjs';
+import { SettingsService } from '../../services/settings.service';
 
 @Component({
+  standalone: false,
   selector: 'page-entries',
   templateUrl: './entries.page.html'
 })

src/app/pages/entry/edit/edit.page.ts

@@ -1,14 +1,15 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { EntriesService } from '../../../services/entries.service';
-import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { TagsService } from 'src/app/services/tags.service';
-import { SettingsService } from 'src/app/services/settings.service';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { SettingsService } from 'src/app/services/settings.service';
+import { TagsService } from 'src/app/services/tags.service';
+import { EntriesService } from '../../../services/entries.service';
 
 @Component({
+  standalone: false,
   selector: 'page-entry-edit',
   templateUrl: './edit.page.html',
   styleUrls: ['./edit.page.scss']

src/app/pages/entry/entry.page.ts

@@ -2,11 +2,12 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 
 import { ActivatedRoute } from '@angular/router';
 
-import { EntriesService } from '../../services/entries.service';
 import { CommentService } from '../../services/comment.service';
+import { EntriesService } from '../../services/entries.service';
 import { UiComments } from '../../ui/comments/comments.ui';
 
 @Component({
+  standalone: false,
   selector: 'page-entry',
   templateUrl: './entry.page.html',
   styleUrls: ['./entry.page.scss']

src/app/pages/login/login.page.ts

@@ -6,6 +6,7 @@ import { environment } from '../../../environments/environment';
 import { AuthService } from '../../services/auth.service';
 
 @Component({
+  standalone: false,
   selector: 'page-login',
   templateUrl: './login.page.html',
   styleUrls: ['./login.page.scss']

src/app/pages/moderation/comments/moderation.comments.page.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { ModerationService } from '../../../services/moderarion.service';
 
 @Component({
+  standalone: false,
   selector: 'page-moderation-comments',
   templateUrl: './moderation.comments.page.html'
 })

src/app/pages/moderation/entries/moderation.entries.page.ts

@@ -3,6 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { ModerationService } from '../../../services/moderarion.service';
 
 @Component({
+  standalone: false,
   selector: 'page-moderation-entries',
   templateUrl: './moderation.entries.page.html'
 })

src/app/pages/notfound/notfound.page.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'page-notfound',
   templateUrl: './notfound.page.html',
   styleUrls: ['./notfound.page.scss']

src/app/pages/search/search.page.ts

@@ -8,6 +8,7 @@ import { SearchService } from 'src/app/services/search.service';
 import { SettingsService } from 'src/app/services/settings.service';
 
 @Component({
+  standalone: false,
   selector: 'page-search',
   templateUrl: './search.page.html',
   styleUrls: ['./search.page.scss']

src/app/pages/settings/settings.page.ts

@@ -1,11 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { UserService } from '../../services/user.service';
-import { SettingsService } from 'src/app/services/settings.service';
 import { Subscription } from 'rxjs';
+import { SettingsService } from 'src/app/services/settings.service';
+import { UserService } from '../../services/user.service';
 
 @Component({
+  standalone: false,
   selector: 'page-settings',
   templateUrl: './settings.page.html',
   styleUrls: ['./settings.page.scss']

src/app/pages/unavailable/unavailable.page.ts

@@ -1,8 +1,9 @@
+import { Location } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
-import { Location } from '@angular/common'
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
+  standalone: false,
   selector: 'page-unavailable',
   templateUrl: './unavailable.page.html',
   styleUrls: ['./unavailable.page.scss']

src/app/pages/user/user.page.ts

@@ -6,6 +6,7 @@ import { ActivatedRoute } from '@angular/router';
 import { UserService } from '../../services/user.service';
 
 @Component({
+  standalone: false,
   selector: 'page-user',
   templateUrl: './user.page.html',
   styleUrls: ['./user.page.scss']

src/app/pages/user/usercomments/usercomments.page.ts

@@ -1,12 +1,13 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
-import { Router, ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 
 import { CommentService } from '../../../services/comment.service';
 import { SettingsService } from '../../../services/settings.service';
 
 @Component({
+  standalone: false,
   selector: 'page-usercomments',
   templateUrl: './usercomments.page.html',
   styleUrls: ['./usercomments.page.scss']

src/app/pages/user/userentries/userentries.page.ts

@@ -5,6 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { EntriesService } from '../../../services/entries.service';
 
 @Component({
+  standalone: false,
   selector: 'page-userentries',
   templateUrl: './userentries.page.html'
 })

src/app/pages/view/edit/edit.page.ts

@@ -1,16 +1,17 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { TagsService } from 'src/app/services/tags.service';
-import { SettingsService } from 'src/app/services/settings.service';
-import { Subscription } from 'rxjs';
-import { ViewService } from 'src/app/services/view.service';
-import { I18nService } from 'src/app/services/i18n.service';
-import { ConfirmDialog } from 'src/app/ui/confirm/confirm.component';
 import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { I18nService } from 'src/app/services/i18n.service';
+import { SettingsService } from 'src/app/services/settings.service';
+import { TagsService } from 'src/app/services/tags.service';
+import { ViewService } from 'src/app/services/view.service';
+import { ConfirmDialog } from 'src/app/ui/confirm/confirm.component';
 
 @Component({
+  standalone: false,
   selector: 'page-view-edit',
   templateUrl: './edit.page.html',
   styleUrls: ['./edit.page.scss']

src/app/pages/view/view.page.ts

@@ -7,6 +7,7 @@ import { EntriesService } from '../../services/entries.service';
 import { PageEntries } from '../entries/entries.page';
 
 @Component({
+  standalone: false,
   selector: 'page-view',
   templateUrl: './view.page.html',
   styleUrls: ['./view.page.scss']

src/app/ui/comment/comment.ui.ts

@@ -1,16 +1,17 @@
-import { Component, OnInit, Input, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 
 import { AuthService } from '../../services/auth.service';
-import { VoteService } from '../../services/vote.service';
-import { FlagService } from '../../services/flag.service';
 import { CommentService } from '../../services/comment.service';
+import { FlagService } from '../../services/flag.service';
 import { ModerationService } from '../../services/moderarion.service';
+import { VoteService } from '../../services/vote.service';
 import { ConfirmDialog } from '../../ui/confirm/confirm.component';
 import { UiComments } from '../comments/comments.ui';
 
 @Component({
+  standalone: false,
   selector: 'ui-comment',
   templateUrl: './comment.ui.html',
   styleUrls: ['./comment.ui.scss']

src/app/ui/commentcount/commentcount.ui.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { CommentService } from '../../services/comment.service';
 
 @Component({
+  standalone: false,
   selector: 'ui-commentcount',
   templateUrl: './commentcount.ui.html',
   styleUrls: ['./commentcount.ui.scss']

src/app/ui/commentform/commentform.ui.ts

@@ -1,9 +1,9 @@
-import { Component, OnInit, ViewChild, Input } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
 import { CommentService } from '../../services/comment.service';
-import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
-import { Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'ui-commentform',
   templateUrl: './commentform.ui.html',
   styleUrls: ['./commentform.ui.scss']

src/app/ui/comments/comments.ui.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { CommentService } from '../../services/comment.service';
 import { SettingsService } from '../../services/settings.service';
 
 @Component({
+  standalone: false,
   selector: 'ui-comments',
   templateUrl: './comments.ui.html',
   styleUrls: ['./comments.ui.scss']

src/app/ui/confirm/confirm.component.ts

@@ -1,8 +1,9 @@
 import { Component, Inject } from '@angular/core';
-import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { I18nService } from '../../services/i18n.service';
 
 @Component({
+  standalone: false,
   templateUrl: 'confirm.component.html',
   styleUrls: ['./confirm.component.scss']
 })

src/app/ui/entries/entries.ui.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Component({
+  standalone: false,
   selector: 'ui-entries',
   templateUrl: './entries.ui.html',
   styleUrls: ['./entries.ui.scss']

src/app/ui/entry/entry.ui.scss

@@ -1,5 +1,9 @@
 @import '../../../variables.scss';
 
+.mat-line {
+  white-space: break-spaces;
+}
+
 .mat-icon {
   top: 3px;
   position: relative;
@@ -53,7 +57,6 @@ span.mod {
   opacity: 0.7;
 }
 
-
 .tag {
   cursor: default;
   position: relative;

src/app/ui/entry/entry.ui.ts

@@ -1,16 +1,17 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
-import { AuthService } from '../../services/auth.service';
-import { VoteService } from '../../services/vote.service';
-import { FlagService } from '../../services/flag.service';
-import { BookmarksService } from '../../services/bookmarks.service';
-import { ModerationService } from '../../services/moderarion.service';
-import { ConfirmDialog } from '../../ui/confirm/confirm.component';
-import { EntriesService } from 'src/app/services/entries.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { EntriesService } from 'src/app/services/entries.service';
+import { AuthService } from '../../services/auth.service';
+import { BookmarksService } from '../../services/bookmarks.service';
+import { FlagService } from '../../services/flag.service';
+import { ModerationService } from '../../services/moderarion.service';
+import { VoteService } from '../../services/vote.service';
+import { ConfirmDialog } from '../../ui/confirm/confirm.component';
 
 @Component({
+  standalone: false,
   selector: 'ui-entry',
   templateUrl: './entry.ui.html',
   styleUrls: ['./entry.ui.scss']

src/app/ui/main/main.ui.html

@@ -45,7 +45,7 @@
 </mat-toolbar>
 
 <mat-sidenav-container>
-  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [(opened)]="opened || searchFocus"
+  <mat-sidenav #sidenav [mode]="isBiggerScreen() ? 'side' : 'over'" [opened]="opened || searchFocus"
     [autoFocus]="false" (click)="!isBiggerScreen() && this.close()">
     <mat-nav-list *ngIf="authenticated">
       <ui-viewmenu></ui-viewmenu>

src/app/ui/main/main.ui.ts

@@ -1,19 +1,20 @@
 import { Component, HostListener } from '@angular/core';
-import { Router } from '@angular/router';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material/icon';
 import { DateAdapter } from '@angular/material/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 import { fromEvent } from 'rxjs';
 
 import { AuthService } from '../../services/auth.service';
-import { UserService } from '../../services/user.service';
 import { I18nService } from '../../services/i18n.service';
 import { SettingsService } from '../../services/settings.service';
+import { UserService } from '../../services/user.service';
 
-import packageJson from '../../../../package.json';
 import { SwUpdate } from '@angular/service-worker';
+import packageJson from '../../../../package.json';
 
 @Component({
+  standalone: false,
   selector: 'ui-main',
   templateUrl: './main.ui.html',
   styleUrls: ['./main.ui.scss']

src/app/ui/points/points.ui.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { VoteService } from '../../services/vote.service';
 
 @Component({
+  standalone: false,
   selector: 'ui-points',
   templateUrl: './points.ui.html',
   styleUrls: ['./points.ui.scss']

src/app/ui/tags/tagspicker.ui.html

@@ -7,9 +7,9 @@
         <mat-icon>cancel</mat-icon>
       </button>
     </mat-chip-row>
-    <input *ngIf="max == 0 || !tags || tags.length < max" #tagsInput [formControl]="searchFormControl"
+    <input #tagsInput [formControl]="searchFormControl"
       [matAutocomplete]="auto" [matChipInputFor]="tagList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-      (matChipInputTokenEnd)="addInputTag($event)">
+      (matChipInputTokenEnd)="addInputTag($event)" [readOnly]="max && tags && tags.length >= max">
     <mat-hint *ngIf="max > 1" align="end">{{tags && tags.length || 0}}/{{max}}</mat-hint>
   </mat-chip-grid>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="addOptionTag($event)">

src/app/ui/tags/tagspicker.ui.ts

@@ -1,5 +1,5 @@
 import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
-import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
@@ -8,6 +8,7 @@ import { debounceTime, switchMap } from 'rxjs/operators';
 import { TagsService } from 'src/app/services/tags.service';
 
 @Component({
+  standalone: false,
   selector: 'ui-tagspicker',
   templateUrl: './tagspicker.ui.html',
   styleUrls: ['./tagspicker.ui.scss']
@@ -59,12 +60,16 @@ export class UiTagsPicker implements OnInit {
     if (this.change) {
       this.change(this.model);
     }
+    if (this.tagsInput) {
       this.tagsInput.nativeElement.value = '';
     }
+  }
 
   addInputTag(event: MatChipInputEvent): void {
-    this.addTag((event.value || "").trim())
-    event.chipInput!.clear();
+    this.addTag((event.value || "").trim());
+    if (event.chipInput) {
+      event.chipInput.clear();
+    }
   }
 
   addOptionTag(event: MatAutocompleteSelectedEvent): void {

src/app/ui/viewmenu/viewmenu.ui.ts

@@ -5,6 +5,7 @@ import { SettingsService } from 'src/app/services/settings.service';
 import { ViewService } from 'src/app/services/view.service';
 
 @Component({
+  standalone: false,
   selector: 'ui-viewmenu',
   templateUrl: 'viewmenu.ui.html',
   styleUrls: ['./viewmenu.ui.scss']

src/app/utils/i18n.pipe.ts

@@ -4,6 +4,7 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { I18nService } from './../services/i18n.service';
 
 @Pipe({
+    standalone: false,
     name: 'i18n'
 })
 export class I18nPipe implements PipeTransform {
@@ -18,6 +19,7 @@ export class I18nPipe implements PipeTransform {
 }
 
 @Pipe({
+    standalone: false,
     name: 'i18nEmpty'
 })
 export class I18nEmptyPipe implements PipeTransform {

src/app/utils/moment.pipe.ts

@@ -1,7 +1,10 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import * as moment from 'moment';
 
-@Pipe({ name: 'datef' })
+@Pipe({
+  standalone: false,
+  name: 'datef'
+})
 export class MomentPipe implements PipeTransform {
   transform(value: Date | moment.Moment, dateFormat: string): any {
     if (!dateFormat) {

src/app/utils/urltext.pipe.ts

@@ -1,7 +1,10 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
-@Pipe({ name: 'urltext' })
+@Pipe({
+  standalone: false,
+  name: 'urltext'
+})
 export class UrlTextPipe implements PipeTransform {
 
   httpPattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/ig;
@@ -16,7 +19,10 @@ export class UrlTextPipe implements PipeTransform {
   }
 }
 
-@Pipe({ name: 'urlbase' })
+@Pipe({
+  standalone: false,
+  name: 'urlbase'
+})
 export class UrlBasePipe implements PipeTransform {
 
   httpPattern = /(\b(https?:\/\/)([-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|]))/ig;

src/styles.scss

@@ -11,22 +11,6 @@
 
 @import './variables.scss';
 
-// 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.define-light-theme((color: (primary: $light-primary,
-        accent: $light-accent,
-        warn: $light-warn,
-      )));
-
-// Define an alternate dark theme.
-$dark-theme: mat.define-dark-theme((color: (primary: $dark-primary,
-        accent: $light-accent,
-        warn: $light-warn,
-      )));
-
-
-
 // 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.

src/variables.scss

@@ -1,19 +1,33 @@
 @use '@angular/material' as mat;
 
-$light-primary: mat.define-palette(mat.$deep-orange-palette, 800);
-$light-accent: mat.define-palette(mat.$grey-palette, A400, A200, A700);
-$light-warn: mat.define-palette(mat.$red-palette);
+$light-primary: mat.m2-define-palette(mat.$m2-deep-orange-palette, 800);
+$light-accent: mat.m2-define-palette(mat.$m2-grey-palette, A400, A200, A700);
+$light-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$primary: mat.get-color-from-palette($light-primary);
-$accent: mat.get-color-from-palette($light-accent);
-$warn: mat.get-color-from-palette($light-warn);
+$dark-primary: mat.m2-define-palette(mat.$m2-deep-orange-palette, 900, 500, 700);
+$dark-accent: mat.m2-define-palette(mat.$m2-grey-palette, A200, A100, A400);
+$dark-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
-$dark-primary: mat.define-palette(mat.$deep-orange-palette, 900, 500, 700);
-$dark-accent: mat.define-palette(mat.$grey-palette, A200, A100, A400);
-$dark-warn: mat.define-palette(mat.$red-palette);
+// 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.m2-define-light-theme((color: (primary: $light-primary,
+        accent: $light-accent,
+        warn: $light-warn,
+      )));
+
+// Define an alternate dark theme.
+$dark-theme: mat.m2-define-dark-theme((color: (primary: $dark-primary,
+        accent: $light-accent,
+        warn: $light-warn,
+      )));
+
+$primary: mat.get-theme-color($light-theme, primary, default);
+$accent: mat.get-theme-color($light-theme, accent, default);
+$warn: mat.get-theme-color($light-theme, warn, default);
 
 .dark-theme {
-  $primary: mat.get-color-from-palette($light-primary);
-  $accent: mat.get-color-from-palette($light-accent);
-  $warn: mat.get-color-from-palette($light-warn);
+  $primary: mat.get-theme-color($dark-theme, primary, default);
+  $accent: mat.get-theme-color($dark-theme, accent, default);
+  $warn: mat.get-theme-color($dark-theme, warn, default);
 }