refactor: auto switch theme

src/pages/Config.tsx

@@ -34,7 +34,6 @@ import {
   themes,
 } from '~/constants'
 import {
-  applyThemeByMode,
   autoCloseConns,
   autoSwitchTheme,
   backendConfig,
@@ -280,10 +279,7 @@ const ConfigForXd = () => {
 
         <select
           class="select select-bordered w-full max-w-xs"
-          onChange={(e) => {
+          onChange={(e) => setFavDayTheme(e.target.value)}
-            setFavDayTheme(e.target.value)
-            applyThemeByMode()
-          }}
         >
           <For each={themes}>
             {(theme) => (
@@ -299,10 +295,7 @@ const ConfigForXd = () => {
 
         <select
           class="select select-bordered w-full max-w-xs"
-          onChange={(e) => {
+          onChange={(e) => setFavNightTheme(e.target.value)}
-            setFavNightTheme(e.target.value)
-            applyThemeByMode()
-          }}
         >
           <For each={themes}>
             {(theme) => (
@@ -327,7 +320,6 @@ const ConfigForXd = () => {
       value: autoSwitchTheme,
       onChange: (value: boolean) => {
         setAutoSwitchTheme(value)
-        applyThemeByMode()
       },
       subChild: autoSwitchThemeSubChild,
     },

src/signals/config.ts

@@ -1,5 +1,6 @@
+import { usePrefersDark } from '@solid-primitives/media'
 import { makePersisted } from '@solid-primitives/storage'
-import { createSignal } from 'solid-js'
+import { createEffect, createSignal } from 'solid-js'
 import {
   LATENCY_QUALITY_MAP_HTTP,
   LATENCY_QUALITY_MAP_HTTPS,
@@ -90,25 +91,14 @@ export const isLatencyTestByHttps = () =>
 export const latencyQualityMap = () =>
   isLatencyTestByHttps() ? LATENCY_QUALITY_MAP_HTTPS : LATENCY_QUALITY_MAP_HTTP
 
-const setTheme = (isDark: boolean) => {
-  if (autoSwitchTheme()) {
-    if (isDark) {
-      setCurTheme(favNightTheme())
-    } else {
-      setCurTheme(favDayTheme())
-    }
-  }
-}
-
-export const applyThemeByMode = () =>
-  setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches)
-
 export const useAutoSwitchTheme = () => {
-  applyThemeByMode()
+  const prefersDark = usePrefersDark()
 
-  window
+  createEffect(() => {
-    .matchMedia('(prefers-color-scheme: dark)')
+    if (autoSwitchTheme()) {
-    .addEventListener('change', (event) => setTheme(event.matches))
+      setCurTheme(prefersDark() ? favNightTheme() : favDayTheme())
+    }
+  })
 }
 
 export const [backendConfig, setBackendConfig] = createSignal<Config>()