feat(frontend): try to match OS theme

1 files changed, 38 insertions, 4 deletions

diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index 11391b06..6fbd9f90 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -1,16 +1,50 @@
-import { action, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
+
+export enum ThemePreference {
+  System,
+  PreferLight,
+  PreferDark,
+}
 
 export default class ThemeStore {
-  darkMode = true;
+  preference = ThemePreference.System;
+
+  systemDarkMode: boolean;
 
   constructor() {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this.systemDarkMode = mediaQuery.matches;
+    mediaQuery.addEventListener('change', (event) => {
+      this.systemDarkMode = event.matches;
+    });
     makeObservable(this, {
-      darkMode: observable,
+      preference: observable,
+      systemDarkMode: observable,
+      darkMode: computed,
       toggleDarkMode: action,
     });
   }
 
+  get darkMode(): boolean {
+    switch (this.preference) {
+      case ThemePreference.PreferLight:
+        return false;
+      case ThemePreference.PreferDark:
+        return true;
+      default:
+        return this.systemDarkMode;
+    }
+  }
+
   toggleDarkMode(): void {
-    this.darkMode = !this.darkMode;
+    if (this.darkMode) {
+      this.preference = this.systemDarkMode
+        ? ThemePreference.PreferLight
+        : ThemePreference.System;
+    } else {
+      this.preference = this.systemDarkMode
+        ? ThemePreference.System
+        : ThemePreference.PreferDark;
+    }
   }
 }