Dark mode settings logic

src-ui/src/app/services/app-view.service.spec.ts

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

src-ui/src/app/services/app-view.service.ts

@@ -0,0 +1,29 @@
+import { Inject, Injectable, Renderer2, RendererFactory2 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { GENERAL_SETTINGS } from 'src/app/data/storage-keys';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppViewService {
+  private renderer: Renderer2;
+
+  constructor(rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document) {
+    this.renderer = rendererFactory.createRenderer(null, null);
+  }
+
+  updateDarkModeSettings() {
+    let darkModeUseSystem = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM)) && GENERAL_SETTINGS.DARK_MODE_USE_SYSTEM_DEFAULT
+    let darkModeEnabled = JSON.parse(localStorage.getItem(GENERAL_SETTINGS.DARK_MODE_ENABLED)) || GENERAL_SETTINGS.DARK_MODE_ENABLED_DEFAULT
+
+    if (darkModeUseSystem) {
+      this.renderer.addClass(this.document.body, 'dark-mode-preferred')
+      this.renderer.removeClass(this.document.body, 'dark-mode')
+    } else {
+      this.renderer.removeClass(this.document.body, 'dark-mode-preferred')
+      darkModeEnabled ? this.renderer.addClass(this.document.body, 'dark-mode') : this.renderer.removeClass(this.document.body, 'dark-mode')
+    }
+
+  }
+
+}