feat: add dark mode switch on the login page (#906)

Signed-off-by: ryjiang <jiangruiyi@gmail.com>

client/src/pages/connect/ConnectContainer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 import Icons from '@/components/icons/Icons';
@@ -7,11 +7,14 @@ import CustomButton from '@/components/customButton/CustomButton';
 import { MilvusService } from '@/http';
 import Box from '@mui/material/Box';
 import type { Theme } from '@mui/material/styles';
+import { ColorModeContext } from '@/context';
+import { IconButton } from '@mui/material';
 
 const ConnectContainer = () => {
   const [version, setVersion] = useState('loading');
   const { t: commonTrans } = useTranslation();
   const { t: btnTrans } = useTranslation('btn');
+  const { mode, toggleColorMode } = useContext(ColorModeContext);
 
   useEffect(() => {
     MilvusService.getVersion().then((res: any) => {
@@ -46,10 +49,27 @@ const ConnectContainer = () => {
             display: 'flex',
             flexDirection: 'column',
             padding: (theme: Theme) => theme.spacing(4, 3),
-            backgroundColor: (theme: Theme) => theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.neutral[50],
+            backgroundColor: (theme: Theme) =>
+              theme.palette.mode === 'dark'
+                ? theme.palette.background.default
+                : theme.palette.neutral[50],
             borderRadius: '12px 0 0 12px',
+            position: 'relative',
           }}
         >
+          <IconButton
+            onClick={toggleColorMode}
+            color="inherit"
+            size="small"
+            sx={{
+              position: 'absolute',
+              top: 16,
+              right: 16,
+              '& svg': { fontSize: 14 },
+            }}
+          >
+            {mode === 'dark' ? <Icons.night /> : <Icons.day />}
+          </IconButton>
           <Icons.attu
             sx={{
               width: 72,
@@ -63,7 +83,10 @@ const ConnectContainer = () => {
             variant="h5"
             sx={{
               fontWeight: 600,
-              color: (theme: Theme) => theme.palette.mode === 'dark' ? theme.palette.common.white : 'primary.contrastText',
+              color: (theme: Theme) =>
+                theme.palette.mode === 'dark'
+                  ? theme.palette.common.white
+                  : 'primary.contrastText',
               marginTop: (theme: Theme) => theme.spacing(2),
               height: 32,
             }}
@@ -76,7 +99,10 @@ const ConnectContainer = () => {
               sx={{
                 marginTop: (theme: Theme) => theme.spacing(1),
                 fontSize: 13,
-                color: (theme: Theme) => theme.palette.mode === 'dark' ? theme.palette.common.white : 'primary.contrastText',
+                color: (theme: Theme) =>
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.common.white
+                    : 'primary.contrastText',
                 opacity: 0.8,
                 height: 16,
               }}
@@ -95,8 +121,14 @@ const ConnectContainer = () => {
               width: '100%',
               gap: (theme: Theme) => theme.spacing(2),
               '& button': {
-                borderColor: (theme: Theme) => theme.palette.mode === 'dark' ? theme.palette.common.white : 'primary.contrastText',
-                color: (theme: Theme) => theme.palette.mode === 'dark' ? theme.palette.common.white : 'primary.contrastText',
+                borderColor: (theme: Theme) =>
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.common.white
+                    : 'primary.contrastText',
+                color: (theme: Theme) =>
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.common.white
+                    : 'primary.contrastText',
                 height: 40,
                 fontSize: 14,
                 '&:hover': {