mirror of
https://github.com/MetaCubeX/metacubexd.git
synced 2024-11-10 05:15:35 +08:00
feat: auto switch theme
This commit is contained in:
parent
28c0b1dc42
commit
0bbc661e93
@ -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')
|
||||
|
@ -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',
|
||||
}
|
||||
|
@ -40,4 +40,7 @@ export default {
|
||||
proxiesPreviewType: '节点组预览样式',
|
||||
urlForDelayTest: '测速链接',
|
||||
autoCloseConns: '切换代理时自动断开全部连接',
|
||||
autoSwitchTheme: '自动切换主题',
|
||||
favDayTheme: '浅色主题偏好',
|
||||
favNightTheme: '深色主题偏好',
|
||||
}
|
||||
|
@ -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!)}
|
||||
/>
|
||||
|
@ -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)
|
||||
})
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user