fix(style): global theme settings in login

src/components/footer/index.tsx

@@ -4,10 +4,28 @@ import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/constants/external-links';
 import { useIntl } from '@umijs/max';
 import { Button, Modal, Space } from 'antd';
-import './index.less';
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ token, css }) => ({
+  footer: css`
+    bottom: 0;
+    width: 100%;
+    background-color: transparent;
+    padding: 20px 0;
+    text-align: center;
+    font-size: var(--font-size-middle);
+    color: ${token.colorTextTertiary};
+  `,
+  'footer-content-left-text': {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+}));
 
 const Footer: React.FC = () => {
   const intl = useIntl();
+  const { styles } = useStyles();
 
   const showVersion = () => {
     Modal.info({
@@ -18,10 +36,10 @@ const Footer: React.FC = () => {
   };
 
   return (
-    <div className="footer">
+    <div className={styles.footer}>
       <div className="footer-content">
         <div className="footer-content-left">
-          <div className="footer-content-left-text">
+          <div className={styles['footer-content-left-text']}>
             <Space size={4}>
               <span>&copy;</span>
               <span> {new Date().getFullYear()}</span>

src/components/theme-toggle/index.tsx

@@ -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;