feat(frontend): try to match OS theme

2 files changed, 50 insertions, 8 deletions

diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html
index e14e8d30..a3e52ef9 100644
--- a/subprojects/frontend/index.html
+++ b/subprojects/frontend/index.html
@@ -10,8 +10,8 @@
     <link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" sizes="180x180">
     <link rel="mask-icon" href="/mask-icon.svg" type="image/svg+xml" color="#038a99">
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#21252b">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa">
+    <meta name="theme-color" media="(prefers-color-scheme:light)" content="#fafafa">
+    <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b">
     <style>
       @import '@fontsource/jetbrains-mono/variable.css';
       @import '@fontsource/jetbrains-mono/variable-italic.css';
@@ -270,8 +270,16 @@
       }
 
       body {
-        color: #ebebff;
-        background: #282c34;
+        color: #35373e;
+        background: #ffffff;
+        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        body {
+          color: #ebebff;
+          background: #282c34;
+        }
       }
     </style>
   </head>
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;
+    }
   }
 }