feat: auto switch theme

src/App.tsx

@@ -3,6 +3,7 @@ import { Show, lazy, onMount } from 'solid-js'
 import { Header } from '~/components/Header'
 import { curTheme, selectedEndpoint } from '~/signals'
 import { ROUTE } from './config/enum'
+import { useAutoSwitchTheme } from './signals/config'
 
 const Setup = lazy(() => import('~/pages/Setup'))
 const Overview = lazy(() => import('~/pages/Overview'))
@@ -16,6 +17,8 @@ const Config = lazy(() => import('~/pages/Config'))
 export const App = () => {
   const navigate = useNavigate()
 
+  useAutoSwitchTheme()
+
   onMount(async () => {
     if (!selectedEndpoint()) {
       navigate('/setup')

src/i18n/en.ts

@@ -40,4 +40,7 @@ export default {
   proxiesPreviewType: 'Proxies preview type',
   urlForDelayTest: 'Url for delay test',
   autoCloseConns: 'Automatically close all connections',
+  autoSwitchTheme: 'Automatically switch theme',
+  favDayTheme: 'Favorite light theme',
+  favNightTheme: 'Favorite dark theme',
 }

src/i18n/zh.ts

@@ -40,4 +40,7 @@ export default {
   proxiesPreviewType: '节点组预览样式',
   urlForDelayTest: '测速链接',
   autoCloseConns: '切换代理时自动断开全部连接',
+  autoSwitchTheme: '自动切换主题',
+  favDayTheme: '浅色主题偏好',
+  favNightTheme: '深色主题偏好',
 }

src/pages/Config.tsx

@@ -4,11 +4,19 @@ import { useI18n } from '@solid-primitives/i18n'
 import { For, Show, createSignal, onMount } from 'solid-js'
 import { z } from 'zod'
 import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
+import { themes } from '~/constants'
 import { useRequest } from '~/signals'
 import {
+  applyThemeByMode,
   autoCloseConns,
+  autoSwitchTheme,
+  favDayTheme,
+  favNightTheme,
   proxiesPreviewType,
   setAutoCloseConns,
+  setAutoSwitchTheme,
+  setFavDayTheme,
+  setFavNightTheme,
   setProxiesPreviewType,
   setUrlForDelayTest,
   urlForDelayTest,
@@ -142,10 +150,59 @@ const ConfigForXd = () => {
   const [t] = useI18n()
 
   return (
-    <div class="flex flex-col gap-4">
+    <div class="grid gap-4">
+      <div class="flex flex-col">
+        <div class="pb-4">{t('autoSwitchTheme')}</div>
+        <input
+          type="checkbox"
+          class="toggle"
+          checked={autoSwitchTheme()}
+          onChange={(e) => {
+            setAutoSwitchTheme(e.target.checked)
+            applyThemeByMode()
+          }}
+        />
+      </div>
+      <Show when={autoSwitchTheme()}>
+        <div class="flex flex-col">
+          <div class="pb-4">{t('favDayTheme')}</div>
+          <select
+            class="select select-bordered w-full max-w-xs"
+            onChange={(e) => {
+              setFavDayTheme(e.target.value)
+              applyThemeByMode()
+            }}
+          >
+            <For each={themes}>
+              {(theme) => (
+                <option selected={favDayTheme() === theme} value={theme}>
+                  {theme}
+                </option>
+              )}
+            </For>
+          </select>
+        </div>
+        <div class="flex flex-col">
+          <div class="pb-4">{t('favNightTheme')}</div>
+          <select
+            class="select select-bordered w-full max-w-xs"
+            onChange={(e) => {
+              setFavNightTheme(e.target.value)
+              applyThemeByMode()
+            }}
+          >
+            <For each={themes}>
+              {(theme) => (
+                <option selected={favNightTheme() === theme} value={theme}>
+                  {theme}
+                </option>
+              )}
+            </For>
+          </select>
+        </div>
+      </Show>
       <div>
         <div class="pb-4">{t('proxiesPreviewType')}</div>
-
         <div class="flex items-center gap-4">
           <For each={Object.values(PROXIES_PREVIEW_TYPE)}>
             {(value) => (
@@ -176,11 +233,11 @@ const ConfigForXd = () => {
         />
       </div>
 
-      <div>
+      <div class="flex flex-col">
         <div class="pb-4">{t('urlForDelayTest')}</div>
 
         <input
-          class="input input-bordered w-96"
+          class="w-100 input input-bordered max-w-md"
           value={urlForDelayTest()}
           onChange={(e) => setUrlForDelayTest(e.target?.value!)}
         />

src/signals/config.ts

@@ -1,6 +1,7 @@
 import { makePersisted } from '@solid-primitives/storage'
 import { createSignal } from 'solid-js'
 import { PROXIES_PREVIEW_TYPE } from '~/config/enum'
+import { setCurTheme } from '~/signals'
 
 export const [proxiesPreviewType, setProxiesPreviewType] = makePersisted(
   createSignal(PROXIES_PREVIEW_TYPE.BAR),
@@ -14,3 +15,38 @@ export const [autoCloseConns, setAutoCloseConns] = makePersisted(
   createSignal(false),
   { name: 'autoCloseConns', storage: localStorage },
 )
+export const [autoSwitchTheme, setAutoSwitchTheme] = makePersisted(
+  createSignal(false),
+  { name: 'autoSwitchTheme', storage: localStorage },
+)
+export const [favDayTheme, setFavDayTheme] = makePersisted(
+  createSignal('light'),
+  { name: 'favDayTheme', storage: localStorage },
+)
+export const [favNightTheme, setFavNightTheme] = makePersisted(
+  createSignal('night'),
+  { name: 'favNightTheme', storage: localStorage },
+)
+
+const setTheme = (isDark: boolean) => {
+  if (autoSwitchTheme()) {
+    if (isDark) {
+      setCurTheme(favNightTheme())
+    } else {
+      setCurTheme(favDayTheme())
+    }
+  }
+}
+
+export function applyThemeByMode() {
+  setTheme(window.matchMedia('(prefers-color-scheme: dark)').matches)
+}
+
+export function useAutoSwitchTheme() {
+  applyThemeByMode()
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener('change', (event) => {
+      setTheme(event.matches)
+    })
+}