feat: add MDYSwitch & replace all Switches with MDYSwitch

src/components/common/mdy-switch.tsx

@@ -0,0 +1,64 @@
+import { styled } from "@mui/material/styles";
+import Switch, { SwitchProps } from "@mui/material/Switch";
+
+const MDYSwitch = styled((props: SwitchProps) => <Switch {...props} />)(
+  ({ theme, checked }) => ({
+    height: "32px",
+    padding: 0,
+    margin: 0,
+    borderRadius: 24,
+    "& .MuiSwitch-track": {
+      borderRadius: 24,
+      opacity: checked
+        ? "1 !important"
+        : theme.palette.mode === "dark"
+          ? "0.3 !important"
+          : "0.7 !important",
+      backgroundColor: checked
+        ? theme.palette.primary.main
+        : theme.palette.mode === "dark"
+          ? theme.palette.grey.A700
+          : theme.palette.grey.A200,
+      "&::before": {
+        content: '""',
+        border: `solid 2px ${theme.palette.grey.A700}`,
+        width: "100%",
+        height: "100%",
+        opacity: checked ? 0 : 1,
+        position: "absolute",
+        borderRadius: "inherit",
+        boxSizing: "border-box",
+        transitionProperty: "opacity, background-color",
+        transitionTimingFunction: "linear",
+        transitionDuration: "67ms",
+      },
+    },
+    "& .MuiSwitch-switchBase": {
+      padding: "6px 9px 6px 6px",
+    },
+    "& .MuiSwitch-thumb": {
+      boxShadow: "none",
+      width: 16,
+      height: 16,
+      margin: 3,
+      color: checked
+        ? theme.palette.getContrastText(theme.palette.primary.main)
+        : theme.palette.mode === "dark"
+          ? theme.palette.grey.A200
+          : theme.palette.grey.A700,
+      opacity: checked ? 1 : 0.7,
+    },
+    "& .Mui-checked": {
+      "&.MuiSwitch-switchBase": {
+        padding: "6px 9px 6px 12px",
+      },
+      "& .MuiSwitch-thumb": {
+        width: 24,
+        height: 24,
+        margin: -2,
+      },
+    },
+  }),
+);
+
+export default MDYSwitch;

src/components/profile/profile-viewer.tsx

@@ -8,7 +8,6 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  Switch,
   TextField,
   styled,
 } from "@mui/material";
@@ -24,6 +23,7 @@ import {
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FileInput } from "./file-input";
+import MDYSwitch from "../common/mdy-switch";
 
 interface Props {
   onChange: () => void;
@@ -259,7 +259,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               render={({ field }) => (
                 <StyledBox>
                   <InputLabel>{t("Use System Proxy")}</InputLabel>
-                  <Switch checked={field.value} {...field} color="primary" />
+                  <MDYSwitch checked={field.value} {...field} color="primary" />
                 </StyledBox>
               )}
             />
@@ -270,7 +270,7 @@ export const ProfileViewer = forwardRef<ProfileViewerRef, Props>(
               render={({ field }) => (
                 <StyledBox>
                   <InputLabel>{t("Use Clash Proxy")}</InputLabel>
-                  <Switch checked={field.value} {...field} color="primary" />
+                  <MDYSwitch checked={field.value} {...field} color="primary" />
                 </StyledBox>
               )}
             />

src/components/setting/mods/layout-viewer.tsx

@@ -2,11 +2,12 @@ import { BaseDialog, DialogRef } from "@/components/base";
 import { pageTransitionVariants } from "@/components/layout/page-transition";
 import { NotificationType, useNotification } from "@/hooks/use-notification";
 import { useVerge } from "@/hooks/use-verge";
-import { List, MenuItem, Select, Switch } from "@mui/material";
+import { List, MenuItem, Select } from "@mui/material";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GuardState } from "./guard-state";
 import { SettingItem } from "./setting-comp";
+import MDYSwitch from "@/components/common/mdy-switch";
 
 export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
@@ -51,7 +52,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
             onChange={(e) => onChangeData({ theme_blur: e })}
             onGuard={(e) => patchVerge({ theme_blur: e })}
           >
-            <Switch edge="end" />
+            <MDYSwitch edge="end" />
           </GuardState>
         </SettingItem>
 
@@ -64,7 +65,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
             onChange={(e) => onChangeData({ traffic_graph: e })}
             onGuard={(e) => patchVerge({ traffic_graph: e })}
           >
-            <Switch edge="end" />
+            <MDYSwitch edge="end" />
           </GuardState>
         </SettingItem>
 
@@ -77,7 +78,7 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
             onChange={(e) => onChangeData({ enable_memory_usage: e })}
             onGuard={(e) => patchVerge({ enable_memory_usage: e })}
           >
-            <Switch edge="end" />
+            <MDYSwitch edge="end" />
           </GuardState>
         </SettingItem>
         {/* TODO: 将 select 单独开一个 Modal 以符合 Material Design 的设计 */}

src/components/setting/mods/misc-viewer.tsx

@@ -1,4 +1,5 @@
 import { BaseDialog, DialogRef } from "@/components/base";
+import MDYSwitch from "@/components/common/mdy-switch";
 import { NotificationType, useNotification } from "@/hooks/use-notification";
 import { useVerge } from "@/hooks/use-verge";
 import {
@@ -7,7 +8,6 @@ import {
   ListItemText,
   MenuItem,
   Select,
-  Switch,
   TextField,
 } from "@mui/material";
 import { useLockFn } from "ahooks";
@@ -98,7 +98,7 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
 
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Auto Close Connections")} />
-          <Switch
+          <MDYSwitch
             edge="end"
             checked={values.autoCloseConnection}
             onChange={(_, c) =>
@@ -109,7 +109,7 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
 
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Enable Clash Fields Filter")} />
-          <Switch
+          <MDYSwitch
             edge="end"
             checked={values.enableClashFields}
             onChange={(_, c) =>
@@ -120,7 +120,7 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
 
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Enable Builtin Enhanced")} />
-          <Switch
+          <MDYSwitch
             edge="end"
             checked={values.enableBuiltinEnhanced}
             onChange={(_, c) =>

src/components/setting/mods/sysproxy-viewer.tsx

@@ -1,4 +1,5 @@
 import { BaseDialog, DialogRef } from "@/components/base";
+import MDYSwitch from "@/components/common/mdy-switch";
 import { NotificationType, useNotification } from "@/hooks/use-notification";
 import { useVerge } from "@/hooks/use-verge";
 import { getSystemProxy } from "@/services/cmds";
@@ -8,7 +9,6 @@ import {
   List,
   ListItem,
   ListItemText,
-  Switch,
   TextField,
   Typography,
   styled,
@@ -101,7 +101,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
       <List>
         <ListItem sx={{ padding: "5px 2px" }}>
           <ListItemText primary={t("Proxy Guard")} />
-          <Switch
+          <MDYSwitch
             edge="end"
             disabled={!enabled}
             checked={value.guard}

src/components/setting/setting-clash.tsx

@@ -9,7 +9,6 @@ import {
   IconButton,
   MenuItem,
   Select,
-  Switch,
   TextField,
   Tooltip,
   Typography,
@@ -23,6 +22,7 @@ import { ControllerViewer } from "./mods/controller-viewer";
 import { GuardState } from "./mods/guard-state";
 import { SettingItem, SettingList } from "./mods/setting-comp";
 import { WebUIViewer } from "./mods/web-ui-viewer";
+import MDYSwitch from "../common/mdy-switch";
 
 const isWIN = getSystem() === "windows";
 
@@ -71,7 +71,7 @@ const SettingClash = ({ onError }: Props) => {
           onChange={(e) => onChangeData({ "allow-lan": e })}
           onGuard={(e) => patchClash({ "allow-lan": e })}
         >
-          <Switch edge="end" />
+          <MDYSwitch edge="end" />
         </GuardState>
       </SettingItem>
 
@@ -84,7 +84,7 @@ const SettingClash = ({ onError }: Props) => {
           onChange={(e) => onChangeData({ ipv6: e })}
           onGuard={(e) => patchClash({ ipv6: e })}
         >
-          <Switch edge="end" />
+          <MDYSwitch edge="end" />
         </GuardState>
       </SettingItem>
 

src/components/setting/setting-system.tsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import { useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { IconButton, Switch } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { ArrowForward, PrivacyTipRounded, Settings } from "@mui/icons-material";
 import { checkService } from "@/services/cmds";
 import { useVerge } from "@/hooks/use-verge";
@@ -11,6 +11,7 @@ import { GuardState } from "./mods/guard-state";
 import { ServiceViewer } from "./mods/service-viewer";
 import { SysproxyViewer } from "./mods/sysproxy-viewer";
 import getSystem from "@/utils/get-system";
+import MDYSwitch from "../common/mdy-switch";
 
 interface Props {
   onError?: (err: Error) => void;
@@ -66,7 +67,7 @@ const SettingSystem = ({ onError }: Props) => {
           onChange={(e) => onChangeData({ enable_tun_mode: e })}
           onGuard={(e) => patchVerge({ enable_tun_mode: e })}
         >
-          <Switch edge="end" />
+          <MDYSwitch edge="end" />
         </GuardState>
       </SettingItem>
 
@@ -94,7 +95,7 @@ const SettingSystem = ({ onError }: Props) => {
             onChange={(e) => onChangeData({ enable_service_mode: e })}
             onGuard={(e) => patchVerge({ enable_service_mode: e })}
           >
-            <Switch
+            <MDYSwitch
               edge="end"
               disabled={
                 serviceStatus !== "active" && serviceStatus !== "installed"
@@ -127,7 +128,7 @@ const SettingSystem = ({ onError }: Props) => {
           onChange={(e) => onChangeData({ enable_system_proxy: e })}
           onGuard={(e) => patchVerge({ enable_system_proxy: e })}
         >
-          <Switch edge="end" />
+          <MDYSwitch edge="end" />
         </GuardState>
       </SettingItem>
 
@@ -140,7 +141,7 @@ const SettingSystem = ({ onError }: Props) => {
           onChange={(e) => onChangeData({ enable_auto_launch: e })}
           onGuard={(e) => patchVerge({ enable_auto_launch: e })}
         >
-          <Switch edge="end" />
+          <MDYSwitch edge="end" />
         </GuardState>
       </SettingItem>
 
@@ -153,7 +154,7 @@ const SettingSystem = ({ onError }: Props) => {
           onChange={(e) => onChangeData({ enable_silent_start: e })}
           onGuard={(e) => patchVerge({ enable_silent_start: e })}
         >
-          <Switch edge="end" />
+          <MDYSwitch edge="end" />
         </GuardState>
       </SettingItem>
     </SettingList>