Refactored and improved dark-mode implementation

frontend/src/app/services/cookie.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CookieService } from './cookie.service';
+
+describe('CookieService', () => {
+  let service: CookieService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CookieService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/services/cookie.service.ts

@@ -0,0 +1,34 @@
+import {Injectable} from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CookieService {
+
+  constructor() {
+  }
+
+  setCookie(name: string, value: any): void {
+    document.cookie = `${name}=${value.toString()};`;
+  }
+
+  getCookie(name: string): string | null {
+    let end;
+    const dc = document.cookie;
+    const prefix = name + "=";
+    let begin = dc.indexOf("; " + prefix);
+
+    if (begin == -1) {
+      begin = dc.indexOf(prefix);
+      if (begin != 0) return null;
+    } else {
+      begin += 2;
+      end = document.cookie.indexOf(";", begin);
+      if (end == -1) {
+        end = dc.length;
+      }
+    }
+
+    return decodeURI(dc.substring(begin + prefix.length, end));
+  }
+}

frontend/src/app/services/theming.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemingService } from './theming.service';
+
+describe('ThemingService', () => {
+  let service: ThemingService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ThemingService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

frontend/src/app/services/theming.service.ts

@@ -0,0 +1,53 @@
+import {Injectable} from '@angular/core';
+import {OverlayContainer} from "@angular/cdk/overlay";
+import {CookieService} from "./cookie.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ThemingService {
+
+  private darkmodeEnabled!: boolean;
+  private darkmodeClassName: string = 'darkMode';
+
+  constructor(private cookieService: CookieService,
+              private overlay: OverlayContainer) {
+    if (this.cookieService.getCookie("darkmode") !== null) {
+      this.darkmodeEnabled = this.cookieService.getCookie("darkmode") === "true";
+    } else if (window.matchMedia) {
+      this.darkmodeEnabled = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    } else {
+      this.darkmodeEnabled = false;
+    }
+
+    this.setTheme();
+  }
+
+  toggleTheme(): void {
+    this.darkmodeEnabled = !this.darkmodeEnabled;
+    this.setTheme();
+  }
+
+  private setTheme(): void {
+    this.darkmodeEnabled ? this.setDarkmode() : this.setLightmode();
+    this.cookieService.setCookie("darkmode", this.darkmodeEnabled);
+  }
+
+  private setDarkmode(): void {
+    document.body.classList.add(this.darkmodeClassName);
+    document.body.style.colorScheme = "dark";
+    document.body.style.background = "#303030";
+    document.body.style.color = "white";
+
+    this.overlay.getContainerElement().classList.add(this.darkmodeClassName);
+  }
+
+  private setLightmode(): void {
+    document.body.classList.remove(this.darkmodeClassName);
+    document.body.style.colorScheme = "light";
+    document.body.style.background = "white";
+    document.body.style.color = "black";
+
+    this.overlay.getContainerElement().classList.remove(this.darkmodeClassName);
+  }
+}