From 567c66ff87833fcc5404e7bb65d736c5796b5861 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Sun, 21 Aug 2022 00:32:39 +0200
Subject: feat(frontend): try to match OS theme

---
 subprojects/frontend/src/theme/ThemeStore.ts | 42 +++++++++++++++++++++++++---
 1 file changed, 38 insertions(+), 4 deletions(-)

(limited to 'subprojects/frontend/src/theme/ThemeStore.ts')

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;
+    }
   }
 }
-- 
cgit v1.2.3-54-g00ecf