From 48dc554b8a962cfb2ace4073b8a3a3ce8876e0d2 Mon Sep 17 00:00:00 2001
From: jebibot <83044352+jebibot@users.noreply.github.com>
Date: Thu, 29 Aug 2024 06:09:58 +0900
Subject: [PATCH] feat(app): add system theme

---
 apps/app-frontend/src/store/theme.js   | 12 ++++++++++--
 packages/app-lib/src/state/settings.rs |  3 +++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/store/theme.js b/apps/app-frontend/src/store/theme.js
index 3337e4fdf..f39cd2269 100644
--- a/apps/app-frontend/src/store/theme.js
+++ b/apps/app-frontend/src/store/theme.js
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 
 export const useTheming = defineStore('themeStore', {
   state: () => ({
-    themeOptions: ['dark', 'light', 'oled'],
+    themeOptions: ['system', 'dark', 'light', 'oled'],
     advancedRendering: true,
     selectedTheme: 'dark',
   }),
@@ -17,7 +17,15 @@ export const useTheming = defineStore('themeStore', {
       for (const theme of this.themeOptions) {
         document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
       }
-      document.getElementsByTagName('html')[0].classList.add(`${this.selectedTheme}-mode`)
+      let theme = this.selectedTheme
+      if (theme === 'system') {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)')
+        theme = prefersDark.matches ? 'dark' : 'light'
+        prefersDark.addEventListener('change', () => {
+          this.setThemeClass()
+        })
+      }
+      document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
     },
   },
 })
diff --git a/packages/app-lib/src/state/settings.rs b/packages/app-lib/src/state/settings.rs
index bdc36fce7..7e3f8904e 100644
--- a/packages/app-lib/src/state/settings.rs
+++ b/packages/app-lib/src/state/settings.rs
@@ -181,6 +181,7 @@ pub enum Theme {
     Dark,
     Light,
     Oled,
+    System,
 }
 
 impl Theme {
@@ -189,6 +190,7 @@ impl Theme {
             Theme::Dark => "dark",
             Theme::Light => "light",
             Theme::Oled => "oled",
+            Theme::System => "system",
         }
     }
 
@@ -197,6 +199,7 @@ impl Theme {
             "dark" => Theme::Dark,
             "light" => Theme::Light,
             "oled" => Theme::Oled,
+            "system" => Theme::System,
             _ => Theme::Dark,
         }
     }