fix(config): options are not getting reflected in fav light/dark them…

…e select, closes #1079
MetaCubeX · Oct 12, 2024 · ae1158d · ae1158d
1 parent f2578c9
commit ae1158d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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>