Implement dark light toggle

Author: fboeller

projects/train-platform/src/app/app.component.css

@@ -0,0 +1,15 @@
+:host {
+  --background-color: white;
+  --font-color: black;
+}
+
+:host.dark {
+  --background-color: black;
+  --font-color: white;
+}
+
+:host {
+  display: block;
+  background-color: var(--background-color);
+  color: var(--font-color);
+}

projects/train-platform/src/app/app.component.ts

@@ -1,10 +1,27 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ThemeService } from './theme.service';
 
 @Component({
   selector: 'app-root',
   template: `
     <app-navbar></app-navbar>
     <router-outlet></router-outlet>
   `,
+  styleUrls: ['./app.component.css'],
 })
-export class AppComponent {}
+export class AppComponent implements OnDestroy {
+  subscription: Subscription;
+
+  @HostBinding('class') classes = 'dark';
+
+  constructor(private themeService: ThemeService) {
+    this.subscription = this.themeService.theme$.subscribe((theme) => {
+      this.classes = theme;
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

projects/train-platform/src/app/navbar/navbar.component.css

@@ -1,7 +1,6 @@
 nav {
   height: 40px;
   width: 100%;
-  background-color: aqua;
   display: flex;
   flex-direction: row;
   justify-content: space-between;

projects/train-platform/src/app/navbar/navbar.component.html

@@ -5,6 +5,13 @@
     </li>
   </ul>
   <div class="page-options">
+    <div>
+      <label>{{ "navbar.theme.text" | translate }}</label>
+      <select [ngModel]="theme" (ngModelChange)="updateTheme($event)">
+        <option value="light">{{ "navbar.theme.light" | translate }}</option>
+        <option value="dark">{{ "navbar.theme.dark" | translate }}</option>
+      </select>
+    </div>
     <div>
       <label>{{ "navbar.language.text" | translate }}</label>
       <select [ngModel]="language" (ngModelChange)="updateLanguage($event)">

projects/train-platform/src/app/navbar/navbar.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { ThemeService } from '../theme.service';
 
 @Component({
   selector: 'app-navbar',
@@ -8,8 +9,17 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class NavbarComponent {
   language: 'en' | 'de' = 'en';
+  theme: 'light' | 'dark' = 'light';
 
-  constructor(private translateService: TranslateService) {}
+  constructor(
+    private translateService: TranslateService,
+    private themeService: ThemeService
+  ) {}
+
+  updateTheme(theme: 'light' | 'dark'): void {
+    this.theme = theme;
+    this.themeService.updateTheme(theme);
+  }
 
   updateLanguage(lang: 'en' | 'de'): void {
     this.language = lang;

projects/train-platform/src/app/theme.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+type Theme = 'light' | 'dark';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ThemeService {
+  private themeSubject: BehaviorSubject<Theme> = new BehaviorSubject<Theme>(
+    'light'
+  );
+  public readonly theme$ = this.themeSubject.asObservable();
+
+  updateTheme(theme: Theme): void {
+    this.themeSubject.next(theme);
+  }
+}

projects/train-platform/src/assets/i18n/de.json

@@ -5,6 +5,11 @@
       "text": "Sprache",
       "en": "Englisch",
       "de": "Deutsch"
+    },
+    "theme": {
+      "text": "Farbe",
+      "light": "Hell",
+      "dark": "Dunkel"
     }
   },
   "booking": {

projects/train-platform/src/assets/i18n/en.json

@@ -5,6 +5,11 @@
       "text": "Language",
       "en": "English",
       "de": "German"
+    },
+    "theme": {
+      "text": "Theme",
+      "light": "Light",
+      "dark": "Dark"
     }
   },
   "booking": {

projects/train-platform/src/styles.css

@@ -1,6 +0,0 @@
-body {
-  margin: 0;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}