feat: auto-detect if OS is in dark mode

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component, NgZone } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { Router } from '@angular/router';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
-import { ChannelStore } from './state';
-import { Settings } from './settings/settings.interface';
+import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface';
+import * as semver from 'semver';
+import { IpcCommand } from '../../shared/ipc-command.class';
 import {
     EPG_ERROR,
     EPG_FETCH,
@@ -13,13 +14,13 @@ import {
     VIEW_ADD_PLAYLIST,
     VIEW_SETTINGS,
 } from '../../shared/ipc-commands';
-import { IpcCommand } from '../../shared/ipc-command.class';
+import { DataService } from './services/data.service';
 import { SettingsService } from './services/settings.service';
 import { WhatsNewService } from './services/whats-new.service';
-import * as semver from 'semver';
-import { ModalWindow } from 'ngx-whats-new/lib/modal-window.interface';
+import { Settings } from './settings/settings.interface';
+import { Theme } from './settings/theme.enum';
 import { STORE_KEY } from './shared/enums/store-keys.enum';
-import { DataService } from './services/data.service';
+import { ChannelStore } from './state';
 
 /**
  * AppComponent
@@ -137,11 +138,30 @@ export class AppComponent {
 
                     if (settings.theme) {
                         this.settingsService.changeTheme(settings.theme);
+                    } else {
+                        this.detectDarkMode();
                     }
+                } else {
+                    this.detectDarkMode();
                 }
             });
     }
 
+    /**
+     * Detects if the operation system uses dark mode and changes the theme
+     */
+    detectDarkMode(): void {
+        if (
+            window.matchMedia &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+            this.settingsService.changeTheme(Theme.DarkTheme);
+            this.settingsService.setValueToLocalStorage(STORE_KEY.Settings, {
+                theme: Theme.DarkTheme,
+            });
+        }
+    }
+
     /**
      * Checks the actual version of the application and shows the "what is new" dialog if the updated version was detected
      */

src/app/services/settings.service.ts

@@ -1,7 +1,7 @@
-import { Theme } from './../settings/theme.enum';
 import { Injectable } from '@angular/core';
 import { StorageMap } from '@ngx-pwa/local-storage';
 import { STORE_KEY } from '../shared/enums/store-keys.enum';
+import { Theme } from './../settings/theme.enum';
 
 @Injectable({
     providedIn: 'root',
@@ -36,7 +36,7 @@ export class SettingsService {
      * @param key key to set
      * @param value value to set
      */
-    setValueToLocalStorage(key: STORE_KEY, value: string) {
+    setValueToLocalStorage(key: STORE_KEY, value: unknown) {
         this.storage.set(key, value).subscribe(() => {});
     }
 }