From 1bd18fa412955a69c8560bf93af788816dab982a Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 20 Apr 2024 00:21:26 +0800
Subject: [PATCH] refactor: improve style of antd switch in new UI

---
 src/client/App.tsx           | 10 ++++------
 src/client/hooks/useTheme.ts | 12 ++++++++++++
 src/client/index.css         |  4 ++++
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/client/App.tsx b/src/client/App.tsx
index 69f9214..d1464b0 100644
--- a/src/client/App.tsx
+++ b/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 { useColorSchema } from './store/settings';
+import { ConfigProvider } from 'antd';
 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 algorithm =
-    colorScheme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm;
+  const theme = useAntdTheme();
 
   return (
     <div ref={rootRef} className="App">
       <trpc.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
           <ConfigProvider
-            theme={{ algorithm }}
+            theme={theme}
             getPopupContainer={() => rootRef.current!}
           >
             <TokenLoginContainer>
diff --git a/src/client/hooks/useTheme.ts b/src/client/hooks/useTheme.ts
index 98dcc20..8748f52 100644
--- a/src/client/hooks/useTheme.ts
+++ b/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,
+  };
+}
diff --git a/src/client/index.css b/src/client/index.css
index 00d6dfb..c590a5e 100644
--- a/src/client/index.css
+++ b/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 {