Fix: Optimize the style of the personal center sidebar component #9869 (#10723)

### What problem does this PR solve?

fix: Optimize the style of the personal center sidebar component

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/components/theme-toggle.tsx

@@ -0,0 +1,48 @@
+import { ThemeEnum } from '@/constants/common';
+import { Moon, Sun } from 'lucide-react';
+import { FC, useCallback } from 'react';
+import { useIsDarkTheme, useTheme } from './theme-provider';
+import { Button } from './ui/button';
+
+const ThemeToggle: FC = () => {
+  const { setTheme } = useTheme();
+  const isDarkTheme = useIsDarkTheme();
+  const handleThemeChange = useCallback(
+    (checked: boolean) => {
+      setTheme(checked ? ThemeEnum.Dark : ThemeEnum.Light);
+    },
+    [setTheme],
+  );
+  return (
+    <Button
+      type="button"
+      onClick={() => handleThemeChange(!isDarkTheme)}
+      className="relative inline-flex h-6 w-14 items-center rounded-full  transition-colors p-0.5 border-none focus:border-none bg-bg-card hover:bg-bg-card"
+      //   aria-label={isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
+    >
+      <div className="inline-flex h-full w-full items-center">
+        <div
+          className={`inline-flex transform items-center justify-center rounded-full  transition-transform ${
+            isDarkTheme
+              ? '  text-text-disabled h-4 w-5'
+              : '  text-text-primary bg-bg-base h-full w-8 flex-1'
+          }`}
+        >
+          <Sun />
+        </div>
+
+        <div
+          className={`inline-flex  transform items-center justify-center rounded-full  transition-transform ${
+            isDarkTheme
+              ? ' text-text-primary bg-bg-base h-full w-8 flex-1'
+              : 'text-text-disabled h-4 w-5'
+          }`}
+        >
+          <Moon />
+        </div>
+      </div>
+    </Button>
+  );
+};
+
+export default ThemeToggle;