fix(style): global theme settings in login

2025-04-28 18:22:05 +08:00
parent bcfa80a2d5
commit beb395ce32
17 changed files with 165 additions and 188 deletions
@@ -0,0 +1,42 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { createStyles } from 'antd-style';
+import React from 'react';
+
+const useStyles = createStyles(({ token, css }) => ({
+  wrapper: css`
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: ${token.colorText};
+    font-size: var(--font-size-base);
+    padding: 0 8px;
+    gap: 8px;
+    &:hover {
+      color: ${token.colorTextTertiary};
+    }
+    .anticon {
+      font-size: 16px;
+    }
+  `
+}));
+
+const ThemeToggle: React.FC = () => {
+  const { setTheme, userSettings } = useUserSettings();
+  const { styles } = useStyles();
+
+  const handleChangeTheme = () => {
+    const currentTheme =
+      userSettings.theme === 'realDark' ? 'light' : 'realDark';
+    setTheme(currentTheme);
+  };
+
+  return (
+    <div className={styles.wrapper} onClick={handleChangeTheme}>
+      {userSettings.theme === 'realDark' ? <MoonOutlined /> : <SunOutlined />}
+    </div>
+  );
+};
+
+export default ThemeToggle;