dark mode

src/app/widget-modules/components/application-frame/navigation/navigation.component.ts

@@ -1,5 +1,7 @@
-import {Component} from '@angular/core';
-import {faChalkboard, faMusic, faPersonBooth, faUserCog} from '@fortawesome/free-solid-svg-icons';
+import {Component, inject} from '@angular/core';
+import {MatIconButton} from '@angular/material/button';
+import {FaIconComponent} from '@fortawesome/angular-fontawesome';
+import {faChalkboard, faMoon, faMusic, faPersonBooth, faSun, faUserCog} from '@fortawesome/free-solid-svg-icons';
 import {fromEvent, Observable} from 'rxjs';
 import {distinctUntilChanged, map, shareReplay, startWith} from 'rxjs/operators';
 import {BrandComponent} from './brand/brand.component';
@@ -8,18 +10,22 @@ import {RoleDirective} from '../../../../services/user/role.directive';
 import {LinkComponent} from './link/link.component';
 import {FilterComponent} from './filter/filter.component';
 import {AsyncPipe} from '@angular/common';
+import {ThemeService} from '../../../../services/theme/theme.service';
 
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.less'],
-  imports: [BrandComponent, RouterLink, RoleDirective, LinkComponent, FilterComponent, AsyncPipe],
+  imports: [BrandComponent, RouterLink, RoleDirective, LinkComponent, FilterComponent, AsyncPipe, MatIconButton, FaIconComponent],
 })
 export class NavigationComponent {
+  public readonly themeService = inject(ThemeService);
   public faSongs = faMusic;
   public faShows = faPersonBooth;
   public faUser = faUserCog;
   public faPresentation = faChalkboard;
+  public faDarkMode = faMoon;
+  public faLightMode = faSun;
 
   public readonly windowScroll$: Observable<number> = fromEvent(window, 'scroll').pipe(
     map(() => window.scrollY),