Feat(Theme): Support dark mode

src/assets/css/pages/sign/index.style.ts

@@ -0,0 +1,82 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ cx, css, token }) => {
+    const cover = cx(css`
+        position: absolute;
+        height: 100%;
+        width: 50%;
+        background-color: ${token.colorBgLayout};
+        transition: all 0.8s ease;
+    `)
+
+    const ball = cx(css`
+        position: absolute;
+        width: ${token.sizeXL * 4}px;
+        height: ${token.sizeXL * 4}px;
+        background-color: ${token.colorPrimary};
+        border-radius: 50%;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(50%);
+    `)
+
+    return {
+        root: {
+            backgroundColor: token.colorBorderSecondary,
+            userSelect: 'none',
+
+            a: {
+                fontWeight: 'bold'
+            }
+        },
+
+        signBox: {
+            position: 'relative',
+            backgroundColor: token.colorBgContainer,
+            width: 900,
+            height: 600,
+            overflow: 'hidden',
+            borderRadius: token.borderRadiusLG
+        },
+
+        switch: css`
+            .${cover} {
+                transform: translateX(100%);
+                transition: all 0.8s ease;
+            }
+        `,
+
+        side: {
+            opacity: 1,
+            transition: 'all 1s ease',
+
+            '> *': {
+                width: '100%',
+                height: '100%'
+            }
+        },
+
+        hidden: {
+            opacity: 0
+        },
+
+        cover,
+
+        ballBox: {
+            position: 'relative',
+            overflow: 'hidden'
+        },
+
+        ball,
+
+        mask: css`
+            transform: rotateZ(180deg);
+            filter: blur(${token.sizeSM}px);
+
+            .${ball} {
+                width: 140px;
+                height: 140px;
+            }
+        `
+    }
+})