Add Theme Service

src/app/app.component.html

@@ -1,10 +1,2 @@
-<mat-toolbar color="primary">
+<app-navbar></app-navbar>
-  <span>Flotte</span>
-</mat-toolbar>
-<p>Das ist ein Paragraph.</p>
-
-<br />
-<button mat-raised-button color="primary">Primary</button>
-<button mat-raised-button color="accent">Accent</button>
-
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,16 +1,16 @@
 import { Component, Renderer2 } from '@angular/core';
+import { ColorThemeService } from './services/colorTheme.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'flotte-frontend';
-  
+
-  constructor(private renderer: Renderer2) {
+  constructor(private renderer: Renderer2, private themeService: ColorThemeService) {
-    this.renderer.addClass(document.body, 'mat-app-background');
+    this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme
-    this.renderer.addClass(document.body, 'dark-theme');
+    this.themeService.load();
   }
-  
 }

src/app/app.module.ts

@@ -1,20 +1,31 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
+// Angular Material Components
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatButtonModule} from '@angular/material/button';
+import {MatTableModule} from '@angular/material/table';
+import {MatInputModule} from '@angular/material/input';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatIconModule} from '@angular/material/icon';
+
+
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoginComponent } from './pages/login/login.component';
+import { NavbarComponent } from './components/navbar/navbar.component';
+import { BikesComponent } from './pages/bikes/bikes.component';
 
-// Angular Material Components
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
 
 
 @NgModule({
   declarations: [
     AppComponent,
-    LoginComponent
+    LoginComponent,
+    NavbarComponent,
+    BikesComponent
   ],
   imports: [
     BrowserModule,
@@ -22,6 +33,11 @@ import {MatButtonModule} from '@angular/material/button';
     BrowserAnimationsModule,
     MatToolbarModule,
     MatButtonModule,
+    MatTableModule,
+    MatInputModule,
+    MatMenuModule,
+    MatSlideToggleModule,
+    MatIconModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/services/colorTheme.service.ts

@@ -0,0 +1,62 @@
+import {Injectable, Renderer2, RendererFactory2} from '@angular/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ColorThemeService {
+
+    private renderer: Renderer2;
+    private colorTheme: string;
+    // Define prefix for more clear and readable styling classes in scss files
+
+    constructor(rendererFactory: RendererFactory2) {
+        // Create new renderer from renderFactory, to make it possible to use renderer2 in a service
+        this.renderer = rendererFactory.createRenderer(null, null);
+    }
+
+    _detectPrefersColorTheme() {
+        // Detect if prefers-color-theme is supported
+         if (window.matchMedia('(prefers-color-theme)').media !== 'not all') {
+             // Set colorTheme to Dark if prefers-color-theme is dark. Otherwise set to light.
+             this.colorTheme = window.matchMedia('(prefers-color-theme: dark)').matches ? 'dark-theme' : 'light-theme';
+        } else {
+             // If browser dont support prefers-color-theme, set it as default to dark
+            this.colorTheme = 'light-theme';
+        }
+    }
+
+    _setColorTheme(theme) {
+        this.colorTheme = theme;
+        // Save prefers-color-theme to localStorage
+        localStorage.setItem('prefers-color', theme);
+    }
+
+    _getColorTheme() {
+        // Check if any prefers-color-theme is stored in localStorage
+        if (localStorage.getItem('prefers-color')) {
+            // Save prefers-color-theme from localStorage
+            this.colorTheme = localStorage.getItem('prefers-color');
+        } else {
+            // If no prefers-color-theme is stored in localStorage, Try to detect OS default prefers-color-theme
+            this._detectPrefersColorTheme();
+        }
+    }
+
+    load() {
+        this._getColorTheme();
+        this.renderer.addClass(document.body, this.colorTheme);
+    }
+
+    update(theme) {
+        this._setColorTheme(theme);
+        // Remove the old color-theme class
+        this.renderer.removeClass( document.body, (this.colorTheme === 'dark-theme' ? 'light-theme' : 'dark-theme') );
+        // Add the new / current color-theme class
+        this.renderer.addClass(document.body, theme);
+    }
+
+    currentActive() {
+        return this.colorTheme;
+    }
+
+}