root/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2026-01-29 08:45:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: theme mode support follows system

Browse Source
This commit is contained in:
GyDi
2022-07-17 16:02:17 +08:00
parent 55cc83a5d4
commit 8bce2ce040
9 changed files with 97 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/setting/setting-verge.tsx
View File

@@ -19,7 +19,7 @@ import { ArrowForward } from "@mui/icons-material";
import { SettingList, SettingItem } from "./setting";
import { CmdType } from "../../services/types";
import { version } from "../../../package.json";
import PaletteSwitch from "./palette-switch";
import ThemeModeSwitch from "./theme-mode-switch";
import GuardState from "./guard-state";
import SettingTheme from "./setting-theme";
@@ -43,19 +43,31 @@ const SettingVerge = ({ onError }: Props) => {
return (
<SettingList title={t("Verge Setting")}>
<SettingItem>
<ListItemText primary={t("Language")} />
<GuardState
value={language ?? "en"}
onCatch={onError}
onFormat={(e: any) => e.target.value}
onChange={(e) => onChangeData({ language: e })}
onGuard={(e) => patchVergeConfig({ language: e })}
>
<Select size="small" sx={{ width: 100 }}>
<MenuItem value="zh">中文</MenuItem>
<MenuItem value="en">English</MenuItem>
</Select>
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText primary={t("Theme Mode")} />
<GuardState
value={theme_mode === "dark"}
valueProps="checked"
value={theme_mode}
onCatch={onError}
onFormat={onSwitchFormat}
onChange={(e) => onChangeData({ theme_mode: e ? "dark" : "light" })}
onGuard={(e) =>
patchVergeConfig({ theme_mode: e ? "dark" : "light" })
}
onChange={(e) => onChangeData({ theme_mode: e })}
onGuard={(e) => patchVergeConfig({ theme_mode: e })}
>
<PaletteSwitch edge="end" />
<ThemeModeSwitch />
</GuardState>
</SettingItem>
@@ -87,22 +99,6 @@ const SettingVerge = ({ onError }: Props) => {
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText primary={t("Language")} />
<GuardState
value={language ?? "en"}
onCatch={onError}
onFormat={(e: any) => e.target.value}
onChange={(e) => onChangeData({ language: e })}
onGuard={(e) => patchVergeConfig({ language: e })}
>
<Select size="small" sx={{ width: 100 }}>
<MenuItem value="zh">中文</MenuItem>
<MenuItem value="en">English</MenuItem>
</Select>
</GuardState>
</SettingItem>
<SettingItem>
<ListItemText primary={t("Theme Setting")} />
<IconButton
@@ -129,7 +125,7 @@ const SettingVerge = ({ onError }: Props) => {
</SettingItem>
<SettingItem>
<ListItemText primary={t("Version")} />
<ListItemText primary={t("Verge Version")} />
<Typography sx={{ py: "6px" }}>v{version}</Typography>
</SettingItem>