From ae1158d9577f3e4c9bf6efe5fb2737065559f777 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Sat, 12 Oct 2024 22:48:08 +0800
Subject: [PATCH] fix(config): options are not getting reflected in fav
 light/dark theme select, closes #1079

---
 src/App.tsx          |  7 +++++++
 src/pages/Config.tsx | 14 ++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d6289980..79112fbe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,6 +27,13 @@ export const App: ParentComponent = ({ children }) => {
   const prefersDark = usePrefersDark()
 
   createEffect(() => {
+    console.log(
+      autoSwitchTheme(),
+      prefersDark(),
+      favNightTheme(),
+      favDayTheme(),
+    )
+
     if (autoSwitchTheme())
       setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
   })
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index 5883d625..eb0b4522 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -492,13 +492,16 @@ const ConfigForXd = () => {
               <ConfigTitle>{t('favDayTheme')}</ConfigTitle>
 
               <Select
-                value={favDayTheme()}
                 onChange={(e) =>
                   setFavDayTheme(e.target.value as (typeof themes)[number])
                 }
               >
                 <For each={themes}>
-                  {(theme) => <option value={theme}>{theme}</option>}
+                  {(theme) => (
+                    <option selected={favDayTheme() === theme} value={theme}>
+                      {theme}
+                    </option>
+                  )}
                 </For>
               </Select>
             </div>
@@ -507,13 +510,16 @@ const ConfigForXd = () => {
               <ConfigTitle>{t('favNightTheme')}</ConfigTitle>
 
               <Select
-                value={favNightTheme()}
                 onChange={(e) =>
                   setFavNightTheme(e.target.value as (typeof themes)[number])
                 }
               >
                 <For each={themes}>
-                  {(theme) => <option value={theme}>{theme}</option>}
+                  {(theme) => (
+                    <option selected={favNightTheme() === theme} value={theme}>
+                      {theme}
+                    </option>
+                  )}
                 </For>
               </Select>
             </div>