refactor: improve style of antd switch in new UI

src/client/App.tsx

@@ -6,14 +6,14 @@ import { TokenLoginContainer } from './components/TokenLoginContainer';
 import React, { useRef } from 'react';
 import { trpc, trpcClient } from './api/trpc';
 import { useInjectWebsiteScript } from './hooks/useInjectWebsiteScript';
-import { ConfigProvider, theme } from 'antd';
+import { ConfigProvider } from 'antd';
-import { useColorSchema } from './store/settings';
 import { RouterProvider, createRouter } from '@tanstack/react-router';
 import { routeTree } from './routeTree.gen';
 import { DefaultNotFound } from './components/DefaultNotFound';
 import { TooltipProvider } from './components/ui/tooltip';
 import { Toaster } from './components/ui/sonner';
 import { DefaultError } from './components/DefaultError';
+import { useAntdTheme } from './hooks/useTheme';
 
 const router = createRouter({
   routeTree,
@@ -51,16 +51,14 @@ AppRouter.displayName = 'AppRouter';
 
 export const App: React.FC = React.memo(() => {
   const rootRef = useRef<HTMLDivElement | null>(null);
-  const colorScheme = useColorSchema();
+  const theme = useAntdTheme();
-  const algorithm =
-    colorScheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm;
 
   return (
     <div ref={rootRef} className="App">
       <trpc.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
           <ConfigProvider
-            theme={{ algorithm }}
+            theme={theme}
             getPopupContainer={() => rootRef.current!}
           >
             <TokenLoginContainer>

src/client/hooks/useTheme.ts

@@ -1,3 +1,5 @@
+import { useColorSchema } from '@/store/settings';
+import { theme, ThemeConfig } from 'antd';
 import { useEffect, useMemo } from 'react';
 import { colord } from 'colord';
 
@@ -95,3 +97,13 @@ export function useTheme() {
 
   return { theme, saveTheme, colors };
 }
+
+export function useAntdTheme(): ThemeConfig {
+  const colorScheme = useColorSchema();
+  const algorithm =
+    colorScheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm;
+
+  return {
+    algorithm,
+  };
+}

src/client/index.css

@@ -70,6 +70,10 @@ a {
 .ant-btn-primary {
   background-color: #1677ff;
 }
+.ant-switch {
+  @apply bg-muted;
+  /* background: hsl(var(--muted)); */
+}
 
 /* https://ui.shadcn.com/themes */
 @layer base {