frontend/src/app/app.component.ts

import { Component, Renderer2 } from '@angular/core';
import { ColorThemeService } from './services/colorTheme.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'flotte-frontend';
  darkThemeIsActive: boolean = false;

  constructor(
    private renderer: Renderer2,
    private themeService: ColorThemeService
  ) {
    this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme
    this.themeService.load();
    this.darkThemeIsActive = this.themeService.currentActive() === 'dark-theme';
  }

  changeTheme(event) {
    this.themeService.update(event.checked ? 'dark-theme' : 'light-theme');
  }
}