style: Increased light color contrast to prevent blurring on some displays

src/components/base/base-switch.tsx

@@ -49,7 +49,7 @@ export const Switch = styled((props: SwitchProps) => (
   },
   "& .MuiSwitch-track": {
     borderRadius: 26 / 2,
-    backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+    backgroundColor: theme.palette.mode === "light" ? "#BBBBBB" : "#39393D",
     opacity: 1,
     transition: theme.transitions.create(["background-color"], {
       duration: 500,

src/components/layout/use-custom-theme.ts

@@ -90,7 +90,7 @@ export const useCustomTheme = () => {
     }
 
     // css
-    const backgroundColor = mode === "light" ? "#f0f0f0" : "#2e303d";
+    const backgroundColor = mode === "light" ? "#ECECEC" : "#2e303d";
     const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";
     const scrollColor = mode === "light" ? "#90939980" : "#54545480";
     const dividerColor =

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

@@ -103,7 +103,10 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
             primary={t("Auto Close Connections")}
             sx={{ maxWidth: "fit-content" }}
           />
-          <TooltipIcon title={t("Auto Close Connections Info")} />
+          <TooltipIcon
+            title={t("Auto Close Connections Info")}
+            sx={{ opacity: "0.7" }}
+          />
           <Switch
             edge="end"
             checked={values.autoCloseConnection}
@@ -130,7 +133,10 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
             primary={t("Enable Builtin Enhanced")}
             sx={{ maxWidth: "fit-content" }}
           />
-          <TooltipIcon title={t("Enable Builtin Enhanced Info")} />
+          <TooltipIcon
+            title={t("Enable Builtin Enhanced Info")}
+            sx={{ opacity: "0.7" }}
+          />
           <Switch
             edge="end"
             checked={values.enableBuiltinEnhanced}
@@ -196,7 +202,10 @@ export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
             primary={t("Default Latency Test")}
             sx={{ maxWidth: "fit-content" }}
           />
-          <TooltipIcon title={t("Default Latency Test Info")} />
+          <TooltipIcon
+            title={t("Default Latency Test Info")}
+            sx={{ opacity: "0.7" }}
+          />
           <TextField
             autoComplete="new-password"
             size="small"

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

@@ -166,8 +166,8 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
                   ? t("Enabled")
                   : t("Disabled")
                 : sysproxy?.enable
-                ? t("Enabled")
-                : t("Disabled")}
+                  ? t("Enabled")
+                  : t("Disabled")}
             </Typography>
           </FlexBox>
           {!value.pac && (
@@ -202,7 +202,7 @@ export const SysproxyViewer = forwardRef<DialogRef>((props, ref) => {
             primary={t("Proxy Guard")}
             sx={{ maxWidth: "fit-content" }}
           />
-          <TooltipIcon title={t("Proxy Guard Info")} />
+          <TooltipIcon title={t("Proxy Guard Info")} sx={{ opacity: "0.7" }} />
           <Switch
             edge="end"
             disabled={!enabled}

src/components/setting/setting-clash.tsx

@@ -209,7 +209,12 @@ const SettingClash = ({ onError }: Props) => {
         <SettingItem
           onClick={invoke_uwp_tool}
           label={t("Open UWP tool")}
-          extra={<TooltipIcon title={t("Open UWP tool Info")} />}
+          extra={
+            <TooltipIcon
+              title={t("Open UWP tool Info")}
+              sx={{ opacity: "0.7" }}
+            />
+          }
         />
       )}