Browse Source

调整主题切换按钮,放到右侧居中,圆形

dengdx 2 months ago
parent
commit
abcd198f6f
1 changed files with 28 additions and 5 deletions
  1. 28 5
      src/app.tsx

+ 28 - 5
src/app.tsx

@@ -35,12 +35,35 @@ function App({ children }: PropsWithChildren<React.ReactNode>) {
           }}
         >
           {children}
-          <div className="fixed bottom-4 right-4">
-            <Button type="primary" onClick={() => changeTheme(darkTheme)}>
-              Switch to Dark Theme
+          <div
+            style={{
+              position: 'fixed',
+              top: '50%',
+              right: 16,
+              transform: 'translateY(-50%)',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 8, // 按钮间距
+              zIndex: 1000,
+            }}
+          >
+            <Button
+              type="primary"
+              shape="circle"
+              size="large"
+              onClick={() => changeTheme(darkTheme)}
+              title="Switch to Dark Theme"
+            >
+              🌙
             </Button>
-            <Button type="primary" onClick={() => changeTheme(lightTheme)}>
-              Switch to Light Theme
+            <Button
+              type="primary"
+              shape="circle"
+              size="large"
+              onClick={() => changeTheme(lightTheme)}
+              title="Switch to Light Theme"
+            >
+              ☀️
             </Button>
           </div>
         </div>