feat: Add "Appearance" pane to preferences (#816)

Co-authored-by: Mo <mo@standardnotes.com>

app/assets/javascripts/services/themeManager.ts

@@ -10,6 +10,7 @@ import {
   UuidString,
   FeatureStatus,
   PayloadSource,
+  PrefKey,
 } from '@standardnotes/snjs';
 
 const CACHED_THEMES_KEY = 'cachedThemes';
@@ -19,6 +20,53 @@ export class ThemeManager extends ApplicationService {
   private unregisterDesktop!: () => void;
   private unregisterStream!: () => void;
 
+  constructor(application: WebApplication) {
+    super(application);
+    this.colorSchemeEventHandler = this.colorSchemeEventHandler.bind(this);
+  }
+
+  private colorSchemeEventHandler(event: MediaQueryListEvent) {
+    this.setThemeAsPerColorScheme(event.matches);
+  }
+
+  private setThemeAsPerColorScheme(prefersDarkColorScheme: boolean) {
+    const useDeviceThemeSettings = this.application.getPreference(
+      PrefKey.UseSystemColorScheme,
+      false
+    );
+
+    if (useDeviceThemeSettings) {
+      const preference = prefersDarkColorScheme
+        ? PrefKey.AutoDarkThemeIdentifier
+        : PrefKey.AutoLightThemeIdentifier;
+      const themes = this.application.getDisplayableItems(
+        ContentType.Theme
+      ) as SNTheme[];
+
+      const enableDefaultTheme = () => {
+        const activeTheme = themes.find(
+          (theme) => theme.active && !theme.isLayerable()
+        );
+        if (activeTheme) this.application.toggleTheme(activeTheme);
+      };
+
+      const themeIdentifier = this.application.getPreference(
+        preference,
+        'Default'
+      ) as string;
+      if (themeIdentifier === 'Default') {
+        enableDefaultTheme();
+      } else {
+        const theme = themes.find(
+          (theme) => theme.package_info.identifier === themeIdentifier
+        );
+        if (theme && !theme.active) {
+          this.application.toggleTheme(theme);
+        }
+      }
+    }
+  }
+
   async onAppEvent(event: ApplicationEvent) {
     super.onAppEvent(event);
     if (event === ApplicationEvent.SignedOut) {
@@ -32,6 +80,15 @@ export class ThemeManager extends ApplicationService {
       await this.activateCachedThemes();
     } else if (event === ApplicationEvent.FeaturesUpdated) {
       this.reloadThemeStatus();
+    } else if (event === ApplicationEvent.Launched) {
+      window
+        .matchMedia('(prefers-color-scheme: dark)')
+        .addEventListener('change', this.colorSchemeEventHandler);
+    } else if (event === ApplicationEvent.PreferencesChanged) {
+      const prefersDarkColorScheme = window.matchMedia(
+        '(prefers-color-scheme: dark)'
+      );
+      this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches);
     }
   }
 
@@ -46,6 +103,9 @@ export class ThemeManager extends ApplicationService {
     this.unregisterStream();
     (this.unregisterDesktop as unknown) = undefined;
     (this.unregisterStream as unknown) = undefined;
+    window
+      .matchMedia('(prefers-color-scheme: dark)')
+      .removeEventListener('change', this.colorSchemeEventHandler);
     super.deinit();
   }