dark mode part2

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

client/src/components/advancedSearch/Condition.tsx

@@ -161,7 +161,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     minWidth: '466px',
     minHeight: '62px',
-    background: '#FFFFFF',
+    background:  theme.palette.background.paper,
     padding: theme.spacing(1.5, 2),
     display: 'flex',
     flexDirection: 'row',

client/src/components/advancedSearch/ConditionGroup.tsx

@@ -204,27 +204,26 @@ const useStyles = makeStyles((theme: Theme) => ({
   addBtn: {},
   binaryLogicOp: {
     width: '100%',
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
     '& .op-split': {
       height: '1px',
-      backgroundColor: '#E9E9ED',
+      backgroundColor: theme.palette.divider,
       width: '100%',
     },
     '& button': {
       width: '42px',
       height: '32px',
-      color: theme.palette.attuDark.main,
     },
     '& button.Mui-selected': {
-      backgroundColor: theme.palette.primary.main,
-      color: '#FFFFFF',
+      backgroundColor: theme.palette.background.default,
+      color:  theme.palette.text.primary
     },
     '& button.Mui-selected:hover': {
-      backgroundColor: theme.palette.primary.main,
-      color: '#FFFFFF',
+      backgroundColor: theme.palette.background.default,
+      color:  theme.palette.text.primary
     },
   },
 }));

client/src/components/advancedSearch/Dialog.tsx

@@ -173,11 +173,11 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     '& .disable-exp': {
       userSelect: 'none',
-      color: theme.palette.attuGrey.main,
+      color: theme.palette.text.primary,
     },
   },
   closeButton: {
-    color: 'black',
+    color: theme.palette.text.primary,
   },
   dialogTitle: {
     display: 'flex',
@@ -197,7 +197,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   copyButton: {},
   expResult: {
-    background: '#f4f4f4',
+    background: theme.palette.background.paper,
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -210,7 +210,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     lineHeight: '24px',
   },
   expWrapper: {
-    background: '#f4f4f4',
+    background: theme.palette.background.default,
     minWidth: '480px',
     minHeight: '104px',
     padding: theme.spacing(1.5),

client/src/components/advancedSearch/Filter.tsx

@@ -344,6 +344,11 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {},
   afBtn: {
     color: theme.palette.primary.main,
+    minWidth: 32,
+    padding: '8px 0',
+    '& .MuiButton-endIcon': {
+      marginLeft: 0,
+    },
   },
 }));
 

client/src/components/cards/EmptyCard.tsx

@@ -7,7 +7,7 @@ import { EmptyCardProps } from './Types';
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     color: theme.palette.text.primary,
-    backgroundColor: theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     flexDirection: 'column',
     textAlign: 'center',
   },

client/src/components/customDialog/CustomDialog.tsx

@@ -13,7 +13,9 @@ import CustomDialogTitle from './CustomDialogTitle';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  paper: {},
+  paper: {
+    border: `1px solid ${theme.palette.divider}`,
+  },
   noticePaper: {},
   paperSm: {
     maxWidth: '80%',

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -18,7 +18,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   icon: {
     fontSize: '18px',
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.primary,
     cursor: 'pointer',
   },
 }));

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -18,10 +18,11 @@ import { makeStyles } from '@mui/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     maxWidth: 540,
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.background.paper,
   },
   info: {
     marginBottom: theme.spacing(0.5),
+    color: theme.palette.text.secondary,
   },
   mb: {
     marginBottom: theme.spacing(2.5),
@@ -39,7 +40,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: '10px 12px',
   },
   cancelBtn: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
   checkBox: {},
 }));

client/src/components/customInput/CustomInput.tsx

@@ -9,6 +9,7 @@ import {
   InputLabel,
   StandardTextFieldProps,
   TextField,
+  Theme,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import Icons from '../icons/Icons';
@@ -70,9 +71,9 @@ const handleOnChange = (param: IChangeParam) => {
   }
 };
 
-const getAdornmentStyles = makeStyles(theme => ({
+const getAdornmentStyles = makeStyles((theme: Theme) => ({
   icon: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
 }));
 
@@ -131,7 +132,8 @@ const getAdornmentInput = (
               onClick={onIconClick || (() => {})}
               edge="end"
               role="icon-button"
-              size="large">
+              size="large"
+            >
               {isPasswordType
                 ? showPassword
                   ? Icons.visible({ classes: { root: classes.icon } })
@@ -255,7 +257,7 @@ const getTextfield = (
   );
 };
 
-const getStyles = makeStyles(theme => ({
+const getStyles = makeStyles((theme: Theme) => ({
   errWrapper: {
     display: 'flex',
     alignItems: 'flex-start',

client/src/components/customSelector/CustomGroupedSelect.tsx

@@ -21,7 +21,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     lineHeight: '32px',
-    color: 'rgba(0, 0, 0, 0.33)',
+    color: theme.palette.text.primary,
     fontWeight: 'bold',
     fontSize: '12.8px',
   },

client/src/components/customTabList/style.ts

@@ -15,10 +15,9 @@ export const useStyles = makeStyles((theme: Theme) => ({
   },
   tab: {
     height: theme.spacing(0.5),
-    backgroundColor: theme.palette.primary.main,
   },
   tabContainer: {
-    borderBottom: '1px solid #e0e0e0',
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   tabContent: {
     minWidth: 0,

client/src/components/grid/Grid.tsx

@@ -28,7 +28,7 @@ const userStyle = makeStyles((theme: Theme) => ({
   },
   noData: {
     pointerEvents: 'none',
-    color: '#999',
+    color:  theme.palette.text.secondary,
     textAlign: 'center',
     height: '50vh',
     display: 'grid',

client/src/components/grid/Table.tsx

@@ -41,16 +41,16 @@ const useStyles = makeStyles((theme: Theme) => ({
       opacity: 0,
     },
   },
-  checkbox: {},
+  checkbox: {
+    borderBottom: `1px solid ${theme.palette.divider}`,
+  },
   rowHover: {
     '&:hover': {
-      backgroundColor: `${theme.palette.secondary.main} !important`,
       '& td': {
         background: 'inherit',
       },
 
       '& $hoverActionCell': {
-        backgroundColor: theme.palette.secondary.main,
         '& span': {
           opacity: 1,
         },
@@ -58,7 +58,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   selected: {
-    backgroundColor: `#f3fcfe !important`,
     '& td': {
       background: 'inherit',
     },
@@ -82,7 +81,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     paddingTop: theme.spacing(6),
     textAlign: 'center',
     letterSpacing: '0.5px',
-    color: 'rgba(0, 0, 0, 0.6)',
+    color: theme.palette.text.secondary,
   },
   copyBtn: {
     '& svg': {

client/src/components/menu/CommunityBtn.tsx

@@ -82,7 +82,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   contentDesc: {
     fontSize: theme.spacing(1.5),
     lineHeight: theme.spacing(2.5),
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     marginBottom: theme.spacing(1),
   },
   contentLink: {

client/src/components/status/Status.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
   },
   label: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     textTransform: 'capitalize',
   },
   circle: {

client/src/pages/databases/collections/Collections.tsx

@@ -48,7 +48,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '16px',
   },
   link: {
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
     display: 'inline-block',
     wordBreak: 'break-all',
     whiteSpace: 'nowrap',
@@ -56,6 +56,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     height: '20px',
+    textDecoration: 'none',
   },
   highlight: {
     color: theme.palette.primary.main,

client/src/pages/databases/collections/overview/CreateForm.tsx

@@ -19,7 +19,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   paramTitle: {
     margin: theme.spacing(2, 0),
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     lineHeight: '20px',
     fontSize: '14px',
   },

client/src/pages/databases/collections/overview/IndexTypeElement.tsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   btnDisabled: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     pointerEvents: 'none',
 
     '&:hover': {

client/src/pages/databases/collections/overview/Overview.tsx

@@ -94,7 +94,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       marginRight: theme.spacing(2),
 
       '& .key': {
-        color: theme.palette.attuGrey.dark,
+        color: theme.palette.text.secondary,
         display: 'inline-block',
         marginRight: theme.spacing(0.5),
       },

client/src/pages/databases/collections/search/Styles.ts

@@ -152,7 +152,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    padding: '0 8px',
+    paddingLeft: 8,
     overflow: 'auto',
   },
 
@@ -160,7 +160,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    backgroundColor:  theme.palette.background.default,
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(0, 0, 1),
     gap: theme.spacing(1),
 

client/src/pages/databases/tree/index.tsx

@@ -109,7 +109,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '13px',
     fontWeight: 500,
     marginLeft: theme.spacing(0.5),
-    color: theme.palette.attuGrey.main,
+    color: theme.palette.text.secondary,
     pointerEvents: 'none',
   },
   dot: {
@@ -135,8 +135,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     backgroundColor: `${theme.palette.primary.light} !important`,
   },
   noIndex: {
-    border: `1px solid ${theme.palette.attuGrey.light}`,
-    backgroundColor: theme.palette.attuGrey.light,
+    border: `1px solid ${theme.palette.text.disabled}`,
+    backgroundColor: theme.palette.text.disabled,
   },
 }));
 

client/src/pages/dialogs/CreateCollectionDialog.tsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
     '& legend': {
       marginBottom: theme.spacing(1),
-      color: theme.palette.attuGrey.dark,
+      color: theme.palette.text.secondary,
       lineHeight: '20px',
       fontSize: '14px',
     },

client/src/pages/dialogs/DuplicateCollectionDialog.tsx

@@ -16,6 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   desc: {
     margin: '8px 0 16px 0',
+    color: theme.palette.text.secondary,
   },
 }));
 

client/src/pages/dialogs/ImportSampleDialog.tsx

@@ -33,11 +33,11 @@ const getStyles = makeStyles((theme: Theme) => {
           fontSize: '14px',
           lineHeight: '20px',
 
-          color: theme.palette.attuDark.main,
+          color: theme.palette.text.secondary,
         },
 
         '& .description': {
-          color: theme.palette.attuGrey.dark,
+          color: theme.palette.text.secondary,
           marginBottom: theme.spacing(2),
           fontSize: 13,
           lineHeight: 1.5,

client/src/pages/dialogs/ReleaseCollectionDialog.tsx

@@ -10,6 +10,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   desc: {
     margin: '8px 0 16px 0',
     maxWidth: 480,
+    color: theme.palette.text.secondary,
   },
 }));
 

client/src/pages/dialogs/RenameCollectionDialog.tsx

@@ -13,6 +13,7 @@ import { makeStyles } from '@mui/styles';
 const useStyles = makeStyles((theme: Theme) => ({
   desc: {
     margin: '8px 0 16px 0',
+    color: theme.palette.text.secondary,
   },
 }));
 

client/src/pages/dialogs/insert/Import.tsx

@@ -10,7 +10,7 @@ import { makeStyles } from '@mui/styles';
 
 const getStyles = makeStyles((theme: Theme) => ({
   tip: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.primary,
     fontWeight: 500,
     marginBottom: theme.spacing(1),
   },
@@ -31,7 +31,7 @@ const getStyles = makeStyles((theme: Theme) => ({
       '& .divider': {
         width: '20px',
         margin: theme.spacing(0, 4),
-        backgroundColor: theme.palette.attuGrey.dark,
+        backgroundcolor: theme.palette.text.secondary,
       },
     },
 
@@ -44,10 +44,10 @@ const getStyles = makeStyles((theme: Theme) => ({
   uploadWrapper: {
     marginTop: theme.spacing(3),
     padding: theme.spacing(1),
-    backgroundColor: '#f4f4f4',
+    backgroundColor: theme.palette.background.default,
 
     '& .text': {
-      color: theme.palette.attuGrey.dark,
+      color: theme.palette.text.secondary,
     },
 
     '& .file': {
@@ -58,10 +58,10 @@ const getStyles = makeStyles((theme: Theme) => ({
       display: 'flex',
       alignItems: 'center',
 
-      border: '1px solid #e9e9ed',
+      border: `1px solid ${theme.palette.divider}`,
       padding: theme.spacing(1),
 
-      backgroundColor: '#fff',
+      backgroundColor: theme.palette.background.paper,
 
       '& .uploader': {
         marginRight: theme.spacing(1),
@@ -70,7 +70,7 @@ const getStyles = makeStyles((theme: Theme) => ({
 
     '& .sampleWrapper': {
       '& .sample': {
-        backgroundColor: '#fff',
+        backgroundColor: theme.palette.background.paper,
         padding: theme.spacing(2),
         margin: theme.spacing(1, 0),
       },

client/src/pages/dialogs/insert/Preview.tsx

@@ -16,7 +16,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     width: '75vw',
   },
   selectorTip: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     fontWeight: 500,
     marginBottom: theme.spacing(1),
   },
@@ -43,7 +43,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(1),
 
     '& .text': {
-      color: theme.palette.attuGrey.dark,
+      color: theme.palette.text.secondary,
       fontWeight: 500,
     },
   },
@@ -52,7 +52,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     justifyContent: 'space-between',
     minWidth: '160px',
 
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     backgroundColor: '#fff',
 
     '&:hover': {
@@ -61,13 +61,13 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
 
   menuIcon: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
   menuItem: {
     fontWeight: 500,
     fontSize: '12px',
     lineHeight: '16px',
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
   menuActive: {
     color: theme.palette.primary.main,

client/src/pages/home/DatabaseCard.tsx

@@ -19,18 +19,21 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: `flex`,
     flexDirection: `column`,
     gap: theme.spacing(1),
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
     padding: theme.spacing(2),
-    border: '1px solid #E0E0E0',
+    border: `1px solid ${theme.palette.divider}`,
     minWidth: '168px',
     minHeight: '168px',
     cursor: 'pointer',
     borderRadius: 8,
     '&:hover': {
       boxShadow: '0px 0px 4px 0px #00000029',
+      borderColor: theme.palette.primary.main,
     },
     '&.active': {
       boxShadow: '0px 0px 4px 0px #00000029',
+      borderColor: theme.palette.primary.main,
     },
   },
   dbTitle: {
@@ -38,7 +41,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     lineHeight: '24px',
     fontWeight: 'bold',
     marginBottom: theme.spacing(1),
-    color: theme.palette.attuDark.main,
     '& svg': {
       verticalAlign: '-3px',
     },
@@ -48,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   label: {
     fontSize: '12px',
     lineHeight: '16px',
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.secondary,
   },
   value: {
     fontSize: '24px',
@@ -57,7 +59,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(1),
   },
   delIcon: {
-    color: theme.palette.attuGrey.main,
+    color: theme.palette.text.primary,
     cursor: 'pointer',
     position: 'absolute',
     right: 4,
@@ -75,7 +77,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     border: `1px dashed ${theme.palette.primary.main}`,
     justifyContent: 'center',
     alignItems: 'center',
-    color: theme.palette.primary.main,
+    color: theme.palette.text.primary,
   },
 }));
 

client/src/pages/home/Home.tsx

@@ -12,11 +12,12 @@ import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
-  overviewContainer: {
+  homeWrapper: {
     gap: theme.spacing(2),
     '& h4': {
       marginBottom: theme.spacing(2),
     },
+    color: theme.palette.text.primary,
   },
 
   section: {
@@ -87,7 +88,7 @@ const Home = () => {
     (collections.length > 0 && collections.every(c => !c.schema));
 
   return (
-    <section className={`page-wrapper  ${classes.overviewContainer}`}>
+    <section className={`page-wrapper  ${classes.homeWrapper}`}>
       <section className={classes.section}>
         <Typography variant="h4">{databaseTrans('databases')}</Typography>
         {isLoading ? (

client/src/pages/home/SysCard.tsx

@@ -6,9 +6,9 @@ const useStyles = makeStyles((theme: Theme) => ({
   sysCard: {
     minWidth: 'auto',
     gap: theme.spacing(1),
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(2),
-    border: '1px solid #E0E0E0',
+    border: `1px solid ${theme.palette.divider}`,
     cursor: 'pointer',
     borderRadius: 8,
     '&:hover': {
@@ -23,11 +23,11 @@ const useStyles = makeStyles((theme: Theme) => ({
       margin: 0,
       fontSize: '14px',
       lineHeight: 1.5,
-      color: theme.palette.attuGrey.dark,
+      color: theme.palette.text.secondary,
     },
     '& a': {
       textDecoration: 'none',
-      color: '#000',
+      color: theme.palette.text.primary,
     },
   },
 }));

client/src/pages/search/Styles.ts

@@ -13,11 +13,11 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     gap: theme.spacing(0),
     width: 360,
     flexShrink: 0,
-    backgroundColor: '#fff',
-    border: '1px solid #e0e0e0',
+    backgroundColor: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.divider}`,
 
     '& textarea': {
-      border: `1px solid ${theme.palette.attuGrey.main}`,
+      border: `1px solid ${theme.palette.divider}`,
       marginTop: theme.spacing(0),
       marginBottom: theme.spacing(1),
       overflow: 'scroll',
@@ -62,7 +62,7 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
   },
 
   resultsWrapper: {
-    border: '1px solid #e0e0e0',
+    border: `1px solid ${theme.palette.divider}`,
     background: '#fff',
     display: 'flex',
     flexDirection: 'column',
@@ -97,14 +97,14 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(0, 1),
     margin: theme.spacing(0, 1),
 
-    backgroundColor: '#fff',
-    color: theme.palette.attuGrey.dark,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.secondary,
   },
   menuItem: {
     fontWeight: 500,
     fontSize: '12px',
     lineHeight: '16px',
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
   },
   error: {
     display: 'block',

client/src/pages/system/BaseCard.tsx

@@ -1,30 +1,30 @@
 import { FC } from 'react';
-import { SvgIcon } from '@mui/material';
+import { SvgIcon, Theme } from '@mui/material';
 import { BaseCardProps } from './Types';
 import pic from '../../assets/imgs/pic.svg?react';
 import { makeStyles } from '@mui/styles';
 
-const getStyles = makeStyles(theme => ({
+const getStyles = makeStyles((theme: Theme) => ({
   root: {
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     boxSizing: 'border-box',
     height: '150px',
     padding: theme.spacing(2),
   },
   title: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     fontSize: '14px',
     marginBottom: '5px',
     textTransform: 'capitalize',
   },
   content: {
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.primary,
     fontSize: '20px',
     fontWeight: 600,
     lineHeight: '36px',
   },
   desc: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     fontSize: '14px',
     lineHeight: '36px',
     marginLeft: theme.spacing(1),
@@ -47,7 +47,7 @@ const getStyles = makeStyles(theme => ({
   },
   emptyDesc: {
     fontSize: '10px',
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     marginTop: theme.spacing(1),
   },
 }));

client/src/pages/system/DataCard.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useTheme } from '@mui/material';
+import { useTheme, Theme } from '@mui/material';
 import Progress from './Progress';
 import { formatByteSize, formatSystemTime, getByteString } from '@/utils';
 import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
 import { makeStyles } from '@mui/styles';
 
-const getStyles = makeStyles(theme => ({
+const getStyles = makeStyles((theme: Theme) => ({
   root: {
-    backgroundColor: '#F6F6F6',
+    backgroundColor: theme.palette.background.default,
     padding: theme.spacing(1.5, 2),
     boxSizing: 'border-box',
     flexGrow: 1,
@@ -20,21 +20,21 @@ const getStyles = makeStyles(theme => ({
   },
 
   content: {
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.primary,
     fontSize: '20px',
     fontWeight: 600,
     lineHeight: '36px',
   },
 
   desc: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     fontSize: '14px',
     lineHeight: '36px',
     marginLeft: theme.spacing(1),
   },
 
   rootName: {
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     fontSize: '20px',
     lineHeight: '24px',
   },
@@ -46,7 +46,7 @@ const getStyles = makeStyles(theme => ({
   },
 
   ip: {
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.primary,
     fontSize: '11px',
     lineHeight: '24px',
   },
@@ -64,7 +64,7 @@ const getStyles = makeStyles(theme => ({
 
   sectionHeaderCell: {
     display: 'table-cell',
-    color: theme.palette.attuGrey.dark,
+    color: theme.palette.text.secondary,
     fontSize: '12px',
     lineHeight: '24px',
     padding: theme.spacing(0.5, 1),
@@ -73,8 +73,8 @@ const getStyles = makeStyles(theme => ({
   },
 
   sectionCell: {
-    backgroundColor: 'white',
-    color: theme.palette.attuDark.main,
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
     display: 'table-cell',
     fontSize: '14px',
     padding: theme.spacing(1, 1),
@@ -84,7 +84,7 @@ const getStyles = makeStyles(theme => ({
   },
   progressTitle: {
     fontSize: '14px',
-    color: theme.palette.attuDark.main,
+    color: theme.palette.text.primary,
     lineHeight: '24px',
     display: 'flex',
     justifyContent: 'space-between',

client/src/pages/system/LineChartCard.tsx

@@ -1,10 +1,10 @@
 import { FC, useState, useEffect, useRef } from 'react';
-import { useTheme } from '@mui/material';
+import { useTheme, Theme } from '@mui/material';
 import BaseCard from './BaseCard';
 import { LineChartCardProps, LinceChartNode } from './Types';
 import { makeStyles } from '@mui/styles';
 
-const getStyles = makeStyles(theme => ({
+const getStyles = makeStyles((theme: Theme) => ({
   root: {
     transform: 'scaleY(-1)',
     maxWidth: '90%',
@@ -102,7 +102,7 @@ const LineChartCard: FC<LineChartCardProps> = props => {
         width={FULL_WIDTH}
         height={FULL_HEIGHT}
         viewBox={`0 5 ${FULL_WIDTH} ${FULL_HEIGHT}`}
-        fill="white"
+        fill={theme.palette.background.paper}
         xmlns="http://www.w3.org/2000/svg"
       >
         {displayNodes.map((node, index) => {
@@ -136,7 +136,7 @@ const LineChartCard: FC<LineChartCardProps> = props => {
                   cx={x1}
                   cy={y1}
                   r={ROUND}
-                  fill="white"
+                  fill={theme.palette.background.paper}
                   stroke={theme.palette.primary.main}
                 />
                 <rect

client/src/pages/system/MiniTopology.tsx

@@ -28,7 +28,7 @@ const getStyles = makeStyles((theme: Theme) => ({
       outline: 'none',
 
       '& svg path': {
-        fill: 'white',
+        fill: theme.palette.background.paper,
       },
 
       '& circle': {
@@ -37,7 +37,7 @@ const getStyles = makeStyles((theme: Theme) => ({
       },
 
       '& text': {
-        fill: 'white',
+        fill: theme.palette.background.paper,
       },
     },
   },
@@ -72,7 +72,7 @@ const MiniTopo: FC<MiniTopoProps> = props => {
       viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect width="100%" height="100%" fill="white" />
+      <rect width="100%" height="100%" fill={theme.palette.background.paper} />
       <line
         x1={`${WIDTH / 3}`}
         y1={`${HEIGHT / 3}`}
@@ -90,7 +90,7 @@ const MiniTopo: FC<MiniTopoProps> = props => {
           cx={`${WIDTH / 3}`}
           cy={`${HEIGHT / 3}`}
           r={R1}
-          fill="white"
+          fill={theme.palette.background.paper}
           stroke={theme.palette.primary.main}
         />
         <text
@@ -117,8 +117,8 @@ const MiniTopo: FC<MiniTopoProps> = props => {
             cx={R2}
             cy={R2}
             r={R2}
-            fill={theme.palette.primary.main}
-            stroke="white"
+            fill={theme.palette.background.paper}
+            stroke={theme.palette.primary.main}
           />
           <rect
             className="selected"
@@ -126,12 +126,12 @@ const MiniTopo: FC<MiniTopoProps> = props => {
             y={R2 - W3 / 2}
             width={W3}
             height={W3}
-            fill="white"
+            fill={theme.palette.primary.main}
           />
         </svg>
         <text
           textAnchor="middle"
-          fill={theme.palette.attuGrey.dark}
+          fill={theme.palette.text.primary}
           fontSize="12"
           x={childNodeCenterX}
           y={childNodeCenterY + 50}

client/src/pages/system/NodeListView.tsx

@@ -20,11 +20,11 @@ const getStyles = makeStyles((theme: Theme) => ({
     padding: '0 16px',
     display: 'flex',
     flexDirection: 'column',
-    border: '1px solid #e9e9ed',
+    border: `1px solid ${theme.palette.divider}`,
   },
   childCloseBtnContainer: {
     border: 0,
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     cursor: 'pointer',
     width: '100%',
     height: '28px',

client/src/pages/system/Progress.tsx

@@ -36,7 +36,7 @@ const Progress: FC<ProgressProps> = props => {
         y2={15}
         vectorEffect="non-scaling-stroke"
         strokeWidth="12"
-        stroke={theme.palette.attuGrey.main}
+        stroke={theme.palette.text.primary}
         strokeLinecap="round"
       />
       <line

client/src/pages/system/SystemView.tsx

@@ -19,7 +19,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     height: 'calc(100vh - 80px)',
     overflow: 'hidden',
-    border: '1px solid #e5e5e5',
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: 8,
     boxShadow: '0 0 10px 0 rgba(0,0,0,0.1)',
   },
@@ -33,7 +33,11 @@ const getStyles = makeStyles((theme: Theme) => ({
     gap: 8,
     width: '100%',
   },
-  left: { width: '70%', background: '#fff', borderRadius: 8 },
+  left: {
+    width: '70%',
+    background: theme.palette.background.paper,
+    borderRadius: 8,
+  },
   right: { width: '30%', borderRadius: 8 },
   childView: {
     height: '100%',
@@ -41,7 +45,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     transition: 'all .25s',
     position: 'absolute',
     // zIndex: 1000,
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     borderRadius: 8,
   },
   showChildView: {
@@ -54,7 +58,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   childCloseBtn: {
     border: 0,
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     width: '100%',
   },
 }));

client/src/pages/systemHealthy/Topology.tsx

@@ -18,7 +18,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     borderTopLeftRadius: '8px',
     borderBottomLeftRadius: '8px',
     overflow: 'auto',
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     position: 'relative',
   },
   svg: {
@@ -72,7 +72,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   selected: {
     '& svg path': {
-      fill: 'white',
+      fill: theme.palette.background.paper,
     },
 
     '& circle': {
@@ -81,7 +81,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     },
 
     '& text': {
-      fill: 'white',
+      fill: theme.palette.background.paper,
     },
   },
 }));
@@ -209,7 +209,7 @@ const Topology = ({
 
                   <text
                     textAnchor="middle"
-                    fill={theme.palette.attuGrey.dark}
+                    fill={theme.palette.text.primary}
                     fontSize="12"
                     x={subChildPos[0]}
                     y={subChildPos[1] + 50}

client/src/styles/theme.ts

@@ -176,12 +176,6 @@ export const getAttuTheme = (mode: PaletteMode) => {
       },
       MuiFilledInput: {
         styleOverrides: {
-          root: {
-            backgroundColor: mode === 'light' ? '#f4f4f4' : '#303030',
-            '&:hover': {
-              backgroundColor: mode === 'light' ? '#f4f4f4' : '#404040',
-            },
-          },
           underline: {
             '&:before': {
               borderBottom: 'none',