Merge pull request #623 from zilliztech/attu-611

feat: support dark mode

client/package.json

@@ -14,6 +14,7 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.28.6",
     "@date-io/dayjs": "1.x",
+    "@ddietr/codemirror-themes": "^1.4.2",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@json2csv/plainjs": "^7.0.3",

client/src/App.tsx

@@ -1,33 +1,30 @@
-import { ThemeProvider, StyledEngineProvider } from '@mui/material';
+import { StyledEngineProvider } from '@mui/material';
 import Router from './router/Router';
 import {
   RootProvider,
   NavProvider,
   AuthProvider,
   DataProvider,
-  PrometheusProvider,
   SystemProvider,
+  ColorModeProvider,
 } from './context';
-import { theme } from './styles/theme';
 
 function App() {
   return (
     <StyledEngineProvider injectFirst>
-      <ThemeProvider theme={theme}>
+      <ColorModeProvider>
         <AuthProvider>
           <DataProvider>
             <RootProvider>
               <SystemProvider>
-                <PrometheusProvider>
-                  <NavProvider>
-                    <Router></Router>
-                  </NavProvider>
-                </PrometheusProvider>
+                <NavProvider>
+                  <Router></Router>
+                </NavProvider>
               </SystemProvider>
             </RootProvider>
           </DataProvider>
         </AuthProvider>
-      </ThemeProvider>
+      </ColorModeProvider>
     </StyledEngineProvider>
   );
 }

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',
@@ -193,11 +193,11 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   applyBtn: {
     backgroundColor: theme.palette.primary.main,
-    color: 'white',
+    color: theme.palette.text.primary,
   },
   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

@@ -6,7 +6,8 @@ import { EmptyCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
-    backgroundColor: '#fff',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
     flexDirection: 'column',
     textAlign: 'center',
   },
@@ -14,14 +15,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginTop: theme.spacing(2),
     fontSize: '36px',
     lineHeight: '42px',
-    color: theme.palette.attuGrey.dark,
     fontWeight: 'bold',
     letterSpacing: '-0.02em',
   },
   subText: {
     fontSize: '18px',
     marginTop: theme.spacing(1),
-    color: theme.palette.attuGrey.dark,
   },
 }));
 

client/src/components/code/CodeBlock.tsx

@@ -1,8 +1,8 @@
-import { Theme } from '@mui/material';
+import { Theme, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import CopyButton from '../advancedSearch/CopyButton';
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+import { vs2015, github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { FC } from 'react';
 import { CodeBlockProps } from './Types';
 import { makeStyles } from '@mui/styles';
@@ -10,8 +10,7 @@ import { makeStyles } from '@mui/styles';
 const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     position: 'relative',
-    backgroundColor: '#fff',
-    color: '#454545',
+    backgroundColor: theme.palette.background.paper,
   },
   copy: {
     position: 'absolute',
@@ -24,11 +23,7 @@ const getStyles = makeStyles((theme: Theme) => ({
 }));
 
 const CodeStyle = {
-  backgroundColor: '#f5f5f5',
-  padding: 0,
-  margin: 0,
-  marginRight: 32,
-  fontSize: 14,
+  fontSize: 12,
 };
 
 const CodeBlock: FC<CodeBlockProps> = ({
@@ -36,6 +31,7 @@ const CodeBlock: FC<CodeBlockProps> = ({
   language,
   wrapperClass = '',
 }) => {
+  const theme = useTheme();
   const classes = getStyles();
 
   const { t: commonTrans } = useTranslation();
@@ -50,7 +46,7 @@ const CodeBlock: FC<CodeBlockProps> = ({
       />
       <SyntaxHighlighter
         language={language}
-        style={githubGist}
+        style={theme.palette.mode === 'dark' ? vs2015 : github}
         customStyle={CodeStyle}
         showLineNumbers={true}
       >

client/src/components/code/CodeView.tsx

@@ -13,7 +13,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     width: '100%',
 
     padding: theme.spacing(4),
-    backgroundColor: theme.palette.attuDark.main,
+    backgroundColor: theme.palette.text.primary,
     display: 'flex',
     flexDirection: 'column',
     color: '#fff',

client/src/components/customButton/CustomButton.tsx

@@ -12,11 +12,12 @@ const buttonStyle = makeStyles((theme: Theme) => ({
     padding: theme.spacing(1),
 
     '&:hover': {
-      backgroundColor: '#f4f4f4',
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.background.paper,
     },
   },
   containedBtn: {
-    color: '#fff',
+    color: theme.palette.background.paper,
     backgroundColor: theme.palette.primary.main,
     boxShadow: 'initial',
     fontWeight: 'bold',

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

@@ -1,10 +1,9 @@
-import { DialogTitleProps, Typography } from '@mui/material';
+import { DialogTitleProps, Typography, Theme } from '@mui/material';
 import MuiDialogTitle from '@mui/material/DialogTitle';
 import icons from '../icons/Icons';
-import { theme } from '../../styles/theme';
 import { makeStyles } from '@mui/styles';
 
-const getStyles = makeStyles(() => ({
+const getStyles = makeStyles((theme: Theme) => ({
   root: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -19,7 +18,7 @@ const getStyles = makeStyles(() => ({
   },
   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/customDialog/DialogTemplate.tsx

@@ -18,7 +18,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   block: {
-    backgroundColor: '#fff',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
   },
   dialog: {
     minWidth: 540,

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/customInput/SearchInput.tsx

@@ -1,19 +1,19 @@
-import { InputAdornment, TextField } from '@mui/material';
+import { InputAdornment, TextField, Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import { useRef, FC, useState, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import Icons from '../icons/Icons';
 import { SearchType } from './Types';
 
-const useSearchStyles = makeStyles(theme => ({
+const useSearchStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     display: 'flex',
   },
   input: {
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(1),
     width: '240px',
-    border: '1px solid #e9e9ed',
+    border: `1px solid ${theme.palette.divider}`,
     fontSize: '14px',
 
     transition: 'all 0.2s',
@@ -52,7 +52,7 @@ const useSearchStyles = makeStyles(theme => ({
     },
   },
   searchIcon: {
-    color: theme.palette.attuGrey.main,
+    color: theme.palette.text.secondary,
     cursor: 'pointer',
     fontSize: '20px',
     width: (props: { searched: boolean }) => `${props.searched ? 0 : '20px'}`,

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/ActionBar.tsx

@@ -10,6 +10,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     position: 'relative',
     display: 'inline-block',
     marginRight: theme.spacing(1),
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
   },
   tip: {
     position: 'absolute',
@@ -21,19 +23,18 @@ const useStyles = makeStyles((theme: Theme) => ({
     width: '100%',
   },
   disabled: {
-    color: theme.palette.common.black,
     opacity: 0.15,
   },
   hoverType: {
     marginRight: 0,
 
     '& button': {
-      color: '#fff',
+      color: theme.palette.text.primary,
     },
   },
   link: {
     textDecoration: 'underline',
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
   },
 }));
 

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',
@@ -67,6 +67,7 @@ const userStyle = makeStyles((theme: Theme) => ({
 
   wrapper: {
     height: '100%',
+    
   },
   container: {
     flexWrap: 'nowrap',

client/src/components/grid/LoadingTable.tsx

@@ -6,11 +6,12 @@ const getStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     padding: theme.spacing(2),
     paddingTop: 0,
-    backgroundColor: '#fff',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
   },
   skeleton: {
     transform: 'scale(1)',
-    background: 'linear-gradient(90deg, #f0f4f9 0%, #f4f4f4 50%)',
+    background: `linear-gradient(90deg, ${theme.palette.divider} 0%, ${theme.palette.divider} 50%)`,
   },
   tr: {
     display: 'grid',

client/src/components/grid/Table.tsx

@@ -19,18 +19,14 @@ const useStyles = makeStyles((theme: Theme) => ({
   root: {
     width: '100%',
     flexGrow: 1,
-    // /* set flex basis to make child item height 100% work on Safari */
-    // flexBasis: 0,
-    background: '#fff',
-  },
-  box: {
-    backgroundColor: '#fff',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
   },
+  box: {},
   table: {
     minWidth: '100%',
   },
   tableCell: {
-    background: theme.palette.common.white,
     padding: theme.spacing(1, 1.5),
   },
   cellContainer: {
@@ -41,23 +37,20 @@ const useStyles = makeStyles((theme: Theme) => ({
     transition: '0.2s all',
     padding: 0,
     width: '50px',
-    backgroundColor: '#fff',
     '& span': {
       opacity: 0,
     },
   },
   checkbox: {
-    background: theme.palette.common.white,
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
   rowHover: {
     '&:hover': {
-      backgroundColor: '#f3fcfe !important',
       '& td': {
         background: 'inherit',
       },
 
       '& $hoverActionCell': {
-        backgroundColor: theme.palette.primary.main,
         '& span': {
           opacity: 1,
         },
@@ -65,13 +58,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   selected: {
-    backgroundColor: '#f3fcfe !important',
     '& td': {
       background: 'inherit',
     },
   },
   cell: {
-    borderBottom: '1px solid #e9e9ed',
+    borderBottom: `1px solid ${theme.palette.divider}`,
 
     '& p': {
       display: 'inline-block',
@@ -89,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/grid/TableEditableHead.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react';
 import { TableEditableHeadType } from './Types';
-import { TableHead, TableRow, TableCell } from '@mui/material';
+import { TableHead, TableRow, TableCell, Theme } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: Theme) => ({
   tableCell: {
     paddingLeft: theme.spacing(2),
   },

client/src/components/grid/TableHead.tsx

@@ -8,10 +8,11 @@ import {
   Checkbox,
   TableSortLabel,
   Typography,
+  Theme,
 } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles((theme: Theme) => ({
   visuallyHidden: {
     border: 0,
     clip: 'rect(0 0 0 0)',
@@ -30,7 +31,6 @@ const useStyles = makeStyles(theme => ({
   },
   tableHeader: {
     padding: theme.spacing(1.5),
-    color: 'rgba(0, 0, 0, 0.6)',
     fontWeight: 500,
     maxHeight: 45,
     overflow: 'hidden',

client/src/components/grid/TablePaginationActions.tsx

@@ -18,7 +18,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
     width: '24px',
     height: '24px',
-    backgroundColor: theme.palette.common.white,
   },
   btn: {
     paddingLeft: 8,

client/src/components/grid/ToolBar.tsx

@@ -14,7 +14,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.default,
     opacity: 0.4,
   },
   btn: {

client/src/components/icons/Types.ts

@@ -55,4 +55,6 @@ export type IconsType =
   | 'code'
   | 'reset'
   | 'link'
-  | 'cross';
+  | 'cross'
+  | 'day'
+  | 'night';

client/src/components/layout/Header.tsx

@@ -8,15 +8,17 @@ import CustomSelector from '@/components/customSelector/CustomSelector';
 import StatusIcon, { LoadingType } from '@/components/status/StatusIcon';
 import icons from '../icons/Icons';
 import { makeStyles } from '@mui/styles';
+import IconButton from '@mui/material/IconButton';
+import { ColorModeContext } from '@/context';
 
 const useStyles = makeStyles((theme: Theme) => ({
   header: {
     display: 'flex',
     alignItems: 'center',
-    color: theme.palette.common.black,
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
     paddingRight: theme.spacing(1),
-    backgroundColor: '#fff',
-    borderBottom: '1px solid #e0e0e0',
+    borderBottom: `1px solid ${theme.palette.divider}`,
     height: 48,
   },
   contentWrapper: {
@@ -46,7 +48,6 @@ const useStyles = makeStyles((theme: Theme) => ({
       '& .address': {
         fontSize: '12px',
         lineHeight: 1.3,
-        color: '#545454',
       },
 
       '& .status': {
@@ -66,11 +67,27 @@ const useStyles = makeStyles((theme: Theme) => ({
       top: '4px',
     },
   },
+  modeBtn: {
+    marginRight: theme.spacing(1),
+    '& svg': {
+      fontSize: 18,
+    },
+    color: theme.palette.text.primary,
+  },
+  extra: {
+    marginLeft: theme.spacing(0.5),
+    '& svg': {
+      fontSize: 15,
+      color: theme.palette.primary.main,
+    },
+  },
 }));
 
 const Header: FC = () => {
   const classes = useStyles();
+  // use context
   const { navInfo } = useContext(navContext);
+  const { mode, toggleColorMode } = useContext(ColorModeContext);
   const { database, databases, setDatabase, loading } = useContext(dataContext);
   const { authReq, logout } = useContext(authContext);
   const { address, username } = authReq;
@@ -139,10 +156,17 @@ const Header: FC = () => {
           >
             {navInfo.navTitle}
           </Typography>
-          {navInfo.extra}
+          <span className={classes.extra}>{navInfo.extra}</span>
         </div>
 
         <div className={classes.addressWrapper}>
+          <IconButton
+            className={classes.modeBtn}
+            onClick={toggleColorMode}
+            color="inherit"
+          >
+            {mode === 'dark' ? <icons.night /> : <icons.day />}
+          </IconButton>
           <div className="text">
             <Typography className="address">{address}</Typography>
             <Typography className="status">{statusTrans.running}</Typography>

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/menu/NavMenu.tsx

@@ -12,11 +12,12 @@ import icons from '@/components/icons/Icons';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
-    backgroundColor: '#fff',
     boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
     borderRight: `1px solid ${theme.palette.divider}`,
     width: 48,
     paddingTop: 0,
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.default,
   },
   item: {
     width: 'initial',

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/consts/Localstorage.ts

@@ -14,3 +14,4 @@ export const LAST_TIME_HEALTHY_THRESHOLD_MEMORY =
 // new local storage keys
 export const ATTU_UI_TREE_WIDTH = 'attu.ui.tree.with';
 export const ATTU_AUTH_HISTORY = 'attu.auth.history';
+export const ATTU_THEME_MODE = 'attu.theme.mode';

client/src/context/Auth.tsx

@@ -54,6 +54,8 @@ export const AuthProvider = (props: { children: React.ReactNode }) => {
       ATTU_AUTH_REQ,
       JSON.stringify({ ...authReq, password: '', token: '' })
     );
+    // set title
+    document.title = authReq.address ? `${authReq.address} - Attu` : 'Attu';
   }, [authReq]);
 
   // login API

client/src/context/ColorMode.tsx

@@ -0,0 +1,42 @@
+import React, { useState, useEffect } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { createTheme } from '@mui/material/styles';
+import getCommonThemes from '../styles/theme';
+import { ThemeProvider } from '@mui/material';
+
+export const ColorModeContext = React.createContext({
+  toggleColorMode: () => {},
+  mode: 'light',
+});
+import { ATTU_THEME_MODE } from '@/consts';
+
+const { Provider } = ColorModeContext;
+
+type theme = 'light' | 'dark';
+
+export const ColorModeProvider = (props: { children: React.ReactNode }) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const systemTheme = prefersDarkMode ? 'dark' : 'light';
+  const userThemeMode = localStorage.getItem(ATTU_THEME_MODE) || systemTheme;
+
+  const [mode, setMode] = useState<theme>(userThemeMode as theme);
+
+  const theme = React.useMemo(() => createTheme(getCommonThemes(mode)), [mode]);
+
+  const toggleColorMode = () => {
+    setMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+
+  // store the current mode in localStorage
+  useEffect(() => {
+    localStorage.setItem(ATTU_THEME_MODE, mode);
+
+  }, [mode]);
+
+  return (
+    <Provider value={{ toggleColorMode, mode }}>
+      <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+    </Provider>
+  );
+};

client/src/context/index.tsx

@@ -5,3 +5,5 @@ export * from './Prometheus';
 export * from './Root';
 export * from './Types';
 export * from './Data';
+export * from './ColorMode';
+

client/src/pages/connect/AuthForm.tsx

@@ -223,8 +223,6 @@ export const AuthForm = () => {
     setWithPass(withPass);
     // reset form
     resetValidation(formatForm(authReq));
-    // update title
-    document.title = 'Attu';
   }, [authReq.address, authReq.username, authReq.password]);
 
   return (

client/src/pages/connect/ConnectContainer.tsx

@@ -11,12 +11,14 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     width: '100%',
     height: '100vh',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.default,
   },
   box: {
     display: 'flex',
     flexDirection: 'row',
-    backgroundColor: '#fff',
-    border: '1px solid #E0E0E0',
+    backgroundColor: theme.palette.background.default,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: 8,
     boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
     minHeight: 644,
@@ -28,7 +30,6 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     display: 'block',
     color: theme.palette.primary.main,
   },
-
   links: {
     marginTop: theme.spacing(4),
     display: 'flex',
@@ -41,13 +42,12 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
       borderColor: 'transparent',
     },
   },
-
   attu: {
     width: 299,
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(0, 3),
-    backgroundColor: '#fff',
+    backgroundColor: theme.palette.background.default,
     borderRadius: 8,
   },
   form: {
@@ -55,18 +55,19 @@ const getContainerStyles = makeStyles((theme: Theme) => ({
     borderRadius: 8,
     padding: theme.spacing(5, 0),
     boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
+    backgroundColor: theme.palette.background.paper,
   },
   brand: {
     fontSize: 24,
     fontWeight: 'bold',
-    color: '#333',
+    color: theme.palette.text.primary,
     marginTop: theme.spacing(2),
     height: 24,
   },
   sub: {
     marginTop: theme.spacing(1),
     fontSize: 12,
-    color: '#666',
+    color: theme.palette.text.secondary,
     height: 12,
   },
 }));

client/src/pages/connect/style.ts

@@ -36,8 +36,8 @@ export const useStyles = makeStyles((theme: Theme) => ({
     alignItems: 'center',
     height: '32px',
     lineHeight: '32px',
-    color: '#333',
-    background: '#f1f1f1',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(0.5, 0, 0.5, 1),
     fontSize: 13,
     display: 'block',
@@ -51,10 +51,8 @@ export const useStyles = makeStyles((theme: Theme) => ({
   },
   menuBtn: {
     display: 'flex',
-
     paddingLeft: 8,
     paddingRight: 8,
-
     fontSize: 14,
     '& button': {
       width: 36,
@@ -63,7 +61,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
   },
   menu: {
     '& ul': {
-      padding: '0',
+      padding: 0,
       maxHeight: '400px',
       overflowY: 'auto',
     },
@@ -78,11 +76,10 @@ export const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '14px',
     width: 380,
     padding: `0 8px`,
+    cursor: 'pointer',
     '&:hover': {
       backgroundColor: theme.palette.action.hover,
     },
-    cursor: 'pointer',
-
     '& .address': {
       display: 'grid',
       gridTemplateColumns: '24px 1fr',
@@ -97,13 +94,11 @@ export const useStyles = makeStyles((theme: Theme) => ({
         wordWrap: 'break-word',
       },
     },
-
     '& .icon': {
       verticalAlign: '-3px',
       marginRight: 8,
       fontSize: '14px',
     },
-
     '& .time': {
       color: theme.palette.text.secondary,
       fontSize: 11,
@@ -112,7 +107,6 @@ export const useStyles = makeStyles((theme: Theme) => ({
       width: 130,
       fontStyle: 'italic',
     },
-
     '& .deleteIconBtn': {
       padding: '8px 0',
       '& svg': {

client/src/pages/databases/Databases.tsx

@@ -82,13 +82,6 @@ const useStyles = makeStyles((theme: Theme) => ({
     borderRadius: 8,
     boxShadow: '0px 6px 30px rgba(0, 0, 0, 0.1)',
   },
-  headerIcon: {
-    marginLeft: theme.spacing(0.5),
-    '& svg': {
-      fontSize: 15,
-      color: theme.palette.primary.main,
-    },
-  },
 }));
 
 // Databases page(tree and tabs)
@@ -258,13 +251,8 @@ const Databases = () => {
     databaseName,
     extra: (
       <>
-        <CopyButton
-          label=""
-          value={collectionName}
-          className={classes.headerIcon}
-        />
+        <CopyButton label="" value={collectionName} />
         <RefreshButton
-          className={classes.headerIcon}
           onClick={async () => {
             await fetchCollection(collectionName);
           }}

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/StatusAction.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     background: '#fff !important',
   },
   noIndex: {
-    border: `1px solid ${theme.palette.attuGrey.light}`,
+    border: `1px solid ${theme.palette.text.disabled}`,
     backgroundColor: '#fff',
   },
 

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

@@ -15,7 +15,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(0, 0, 1),
     gap: theme.spacing(1),
 

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

@@ -44,6 +44,7 @@ const useStyles = makeStyles((theme: Theme) => ({
       fontSize: '14px',
       lineHeight: 1.5,
     },
+    color: theme.palette.text.primary,
     paddingBottom: theme.spacing(2),
   },
   icon: {
@@ -94,13 +95,13 @@ 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),
       },
 
       '& .value': {
-        color: theme.palette.attuDark.main,
+        color: theme.palette.text.primary,
       },
     },
   },

client/src/pages/databases/collections/search/Search.tsx

@@ -410,6 +410,7 @@ const Search = (props: CollectionDataProps) => {
               onClick={genRandomVectors}
               size="small"
               disabled={false}
+              className={classes.genBtn}
             >
               {btnTrans('example')}
             </CustomButton>

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

@@ -116,7 +116,7 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     height: '124px',
     margin: '0 0 8px 0',
     overflow: 'auto',
-    backgroundColor: '#f4f4f4',
+    backgroundColor: theme.palette.background.default,
     cursor: 'text',
     boxShadow: '0 1px 0 transparent',
     transition: `box-shadow 0.3s ease`,
@@ -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: 'white',
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(0, 0, 1),
     gap: theme.spacing(1),
 
@@ -187,6 +187,10 @@ export const getQueryStyles = makeStyles((theme: Theme) => ({
     },
   },
 
+  genBtn: {
+    marginBottom: 8,
+  },
+
   btn: {
     height: 56,
     width: 80,

client/src/pages/databases/collections/search/VectorInputBox.tsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState } from 'react';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Compartment } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { insertTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
@@ -11,6 +11,9 @@ import { DataTypeStringEnum } from '@/consts';
 import { SearchSingleParams } from '../../types';
 import { isSparseVector, transformObjStrToJSONStr } from '@/utils';
 import { getQueryStyles } from './Styles';
+import { useTheme } from '@mui/material';
+import { githubLight } from '@ddietr/codemirror-themes/github-light';
+import { githubDark } from '@ddietr/codemirror-themes/github-dark';
 
 const floatVectorValidator = (text: string, field: FieldObject) => {
   try {
@@ -106,6 +109,8 @@ export type VectorInputBoxProps = {
 };
 
 export default function VectorInputBox(props: VectorInputBoxProps) {
+  const theme = useTheme();
+
   // props
   const { searchParams, onChange } = props;
   const { field, data } = searchParams;
@@ -123,6 +128,8 @@ export default function VectorInputBox(props: VectorInputBoxProps) {
   const dataRef = useRef(data);
   const fieldRef = useRef(field);
 
+  const themeCompartment = new Compartment();
+
   // get validator
   const validator = Validator[field.data_type as keyof typeof Validator];
 
@@ -197,30 +204,12 @@ export default function VectorInputBox(props: VectorInputBoxProps) {
               },
             },
             '.cm-content': {
-              color: '#484D52',
               fontSize: '12px',
+              minHeight: '124px',
             },
             '.cm-gutters': {
               display: 'none',
             },
-            '.cm-activeLine': {
-              backgroundColor: '#f4f4f4',
-            },
-            '.cm-tooltip-lint': {
-              width: '80%',
-            },
-          }),
-          EditorView.baseTheme({
-            '&light .cm-selectionBackground': {
-              backgroundColor: '#f4f4f4',
-            },
-            '&light.cm-focused .cm-selectionBackground': {
-              backgroundColor: '#f4f4f4',
-            },
-            '&light .cm-activeLineGutter': {
-              backgroundColor: 'transparent',
-              fontWeight: 'bold',
-            },
           }),
           EditorView.lineWrapping,
           EditorView.updateListener.of(update => {
@@ -252,6 +241,17 @@ export default function VectorInputBox(props: VectorInputBoxProps) {
     }
   }, [JSON.stringify(field)]);
 
+  useEffect(() => {
+    // dispatch dark mode change to editor
+    if (editor.current) {
+      editor.current.dispatch({
+        effects: themeCompartment.reconfigure(
+          themeCompartment.of(theme.palette.mode === 'light' ? githubLight : githubDark)
+        ),
+      });
+    }
+  }, [theme.palette.mode]);
+
   return (
     <div
       className={`${classes.vectorInputBox} ${isFocused ? 'focused' : ''}`}

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

@@ -42,6 +42,8 @@ const getExpanded = (nodes: DatabaseTreeItem[]) => {
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     fontSize: '15px',
+    color: theme.palette.text.primary,
+    backgroundColor: theme.palette.background.default,
     '& .MuiTreeItem-iconContainer': {
       width: 'auto',
     },
@@ -107,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: {
@@ -133,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/CodeDialog.tsx

@@ -1,5 +1,5 @@
 import { FC, useContext, useState } from 'react';
-import { Theme } from '@mui/material';
+import { Theme, SelectChangeEvent } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { rootContext } from '@/context';
 import DialogTemplate from '@/components/customDialog/DialogTemplate';
@@ -9,11 +9,9 @@ import { makeStyles } from '@mui/styles';
 
 const useStyles = makeStyles((theme: Theme) => ({
   code: {
-    backgroundColor: '#f5f5f5',
-    padding: 8,
-    width: '40vw',
-    minHeight: '40vh',
-    maxHeight: '40vh',
+    backgroundColor: theme.palette.background.default,
+    width: 800,
+    height: '40vh',
     overflow: 'auto',
   },
 }));
@@ -53,7 +51,7 @@ const CodeDialog: FC<CodeDialogProps> = props => {
           <CustomSelector
             label="Language"
             value={langauge}
-            onChange={(event: React.ChangeEvent<{ value: unknown }>) => {
+            onChange={(event: SelectChangeEvent<unknown>) => {
               setLanguage(event.target.value as string);
             }}
             options={options}

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/EditEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { FC, useContext, useEffect, useRef, useState } from 'react';
-import { Theme } from '@mui/material';
-import { EditorState } from '@codemirror/state';
+import { Theme, useTheme } from '@mui/material';
+import { EditorState, Compartment } from '@codemirror/state';
 import { EditorView, keymap, ViewUpdate } from '@codemirror/view';
 import { insertTab } from '@codemirror/commands';
 import { indentUnit } from '@codemirror/language';
@@ -14,11 +14,12 @@ import { CollectionFullObject } from '@server/types';
 import { DataService } from '@/http';
 import { DYNAMIC_FIELD } from '@/consts';
 import { makeStyles } from '@mui/styles';
+import { githubLight } from '@ddietr/codemirror-themes/github-light';
+import { githubDark } from '@ddietr/codemirror-themes/github-dark';
 
 const useStyles = makeStyles((theme: Theme) => ({
   code: {
-    backgroundColor: '#f5f5f5',
-    padding: 4,
+    border: `1px solid ${theme.palette.divider}`,
     overflow: 'auto',
   },
   tip: {
@@ -37,6 +38,9 @@ type EditEntityDialogProps = {
 const linterExtension = linter(jsonParseLinter());
 
 const EditEntityDialog: FC<EditEntityDialogProps> = props => {
+  const theme = useTheme();
+  const themeCompartment = new Compartment();
+
   // props
   const { data, collection } = props;
   // UI states
@@ -87,13 +91,15 @@ const EditEntityDialog: FC<EditEntityDialogProps> = props => {
               },
             },
             '.cm-content': {
-              color: '#484D52',
               fontSize: '12px',
             },
             '.cm-tooltip-lint': {
               width: '80%',
             },
           }),
+          themeCompartment.of(
+            theme.palette.mode === 'light' ? githubLight : githubDark
+          ),
           EditorView.lineWrapping,
           EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
             if (viewUpdate.docChanged) {

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),
   },
@@ -25,13 +25,13 @@ const getStyles = makeStyles((theme: Theme) => ({
       '& .selectLabel': {
         fontSize: '14px',
         lineHeight: '20px',
-        color: theme.palette.attuDark.main,
+        color: theme.palette.text.primary,
       },
 
       '& .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': {
+    '&.current': {
       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,17 +59,23 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(1),
   },
   delIcon: {
-    color: theme.palette.attuGrey.main,
+    color: theme.palette.text.secondary,
     cursor: 'pointer',
     position: 'absolute',
-    right: 4,
-    top: 4,
-    minWidth: 0,
-    minHeight: 0,
-    padding: theme.spacing(0),
+    width: 24,
+    height: 24,
+    lineHeight: 24,
+    display: 'flex',
+    top: 8,
+    right: 8,
+    minWidth: 8,
     '& svg': {
-      width: 15,
+      width: 16,
+      height: 16,
+      overflow: 'hidden',
     },
+    padding: theme.spacing(1),
+   
   },
 
   // create db
@@ -75,7 +83,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,
   },
 }));
 
@@ -162,7 +170,7 @@ const DatabaseCard: FC<DatabaseCardProps> = ({
   return (
     <section className={`${wrapperClass}`}>
       <section
-        className={`${classes.wrapper} ${isActive ? 'active' : ''}`}
+        className={`${classes.wrapper} ${isActive ? 'current' : ''}`}
         onClick={onClick}
       >
         <>

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/index.tsx

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
     '& .active': {
       '& path': {
-        fill: theme.palette.attuGrey.dark,
+        fill: 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/search/Utils.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 

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,17 +1,18 @@
 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,
+    height: '100%',
   },
 
   title: {
@@ -20,35 +21,33 @@ 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,
-    fontSize: '20px',
-    lineHeight: '24px',
+    color: theme.palette.text.secondary,
+    fontSize: 20,
   },
 
   childName: {
     color: theme.palette.primary.main,
-    fontSize: '20px',
-    lineHeight: '24px',
+    fontSize: 20,
   },
 
   ip: {
-    color: theme.palette.attuDark.main,
-    fontSize: '11px',
-    lineHeight: '24px',
+    color: theme.palette.text.primary,
+    fontSize: 11,
+    lineHeight: 2,
   },
 
   sectionRoot: {
@@ -64,7 +63,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,19 +72,18 @@ const getStyles = makeStyles(theme => ({
   },
 
   sectionCell: {
-    backgroundColor: 'white',
-    color: theme.palette.attuDark.main,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
     display: 'table-cell',
-    fontSize: '14px',
-    padding: theme.spacing(1, 1),
+    fontSize: 13,
+    padding: theme.spacing(1),
     textTransform: 'capitalize',
     verticalAlign: 'middle',
     width: '50%',
   },
   progressTitle: {
     fontSize: '14px',
-    color: theme.palette.attuDark.main,
-    lineHeight: '24px',
+    color: theme.palette.text.primary,
     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,15 +20,21 @@ 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',
   },
+  childCloseBtn: {
+    border: 0,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    width: '100%',
+  },
   gridContainer: {
     height: `calc(100vh - 120px)`,
     display: 'flex',
@@ -194,7 +200,7 @@ const NodeListView: FC<NodeListViewProps> = props => {
         className={classes.childCloseBtnContainer}
         onClick={() => setShowChildView(false)}
       >
-        <KeyboardArrowDown />
+        <KeyboardArrowDown className={classes.childCloseBtn} />
       </button>
       <div className={classes.gridContainer}>
         <div className={classes.leftContainer}>

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.disabled}
         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,12 @@ 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,
+    boxShadow: '0 0 10px 0 rgba(0,0,0,0.1)',
+  },
   right: { width: '30%', borderRadius: 8 },
   childView: {
     height: '100%',
@@ -41,7 +46,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     transition: 'all .25s',
     position: 'absolute',
     // zIndex: 1000,
-    backgroundColor: 'white',
+    backgroundColor: theme.palette.background.paper,
     borderRadius: 8,
   },
   showChildView: {
@@ -52,11 +57,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     top: 1600,
     opacity: 0,
   },
-  childCloseBtn: {
-    border: 0,
-    backgroundColor: 'white',
-    width: '100%',
-  },
 }));
 
 const SystemView: any = () => {

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/pages/user/Users.tsx

@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     padding: theme.spacing(0.5, 2),
     boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.1)',
     borderRadius: 8,
-    border: '1px solid #e5e5e5',
+    border: `1px solid ${theme.palette.divider}`,
   },
   card: {
     boxShadow: 'none',

client/src/styles/theme.ts

@@ -1,17 +1,6 @@
-import { createTheme } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material';
 
-declare module '@mui/material/styles/createPalette' {
-  interface Palette {
-    attuGrey: Palette['primary'];
-    attuDark: Palette['primary'];
-  }
-  interface PaletteOptions {
-    attuGrey: PaletteOptions['primary'];
-    attuDark: PaletteOptions['primary'];
-  }
-}
-
-const commonThemes = {
+const getCommonThemes = (mode: PaletteMode) => ({
   typography: {
     fontFamily: [
       'Inter',
@@ -27,175 +16,168 @@ const commonThemes = {
     ].join(','),
   },
   palette: {
+    mode,
     primary: {
       main: '#0ACE82',
-      light: '#65BA74',
-      dark: '#08a568',
+      light: mode === 'light' ? '#65BA74' : '#4caf9f',
+      dark: mode === 'light' ? '#08a568' : '#078b63',
     },
     secondary: {
-      light: '#82d3ba',
-      main: '#0ACE82',
-      dark: '#279371',
+      light: mode === 'light' ? '#7EE3D0' : '#4DBB9C',
+      main: '#10C998',
+      dark: mode === 'light' ? '#0BA978' : '#08845B',
     },
     error: {
       main: '#ff4605',
-      light: '#ff8f68',
-      dark: '#cd3804',
-    },
-    attuGrey: {
-      main: '#aeaebb',
-      light: '#dcdce3',
-      dark: '#82838e',
-      contrastText: '#f8f8fc',
-    },
-    attuDark: {
-      main: '#010e29',
+      light: mode === 'light' ? '#ff8f68' : '#ff6a3a',
+      dark: mode === 'light' ? '#cd3804' : '#b33900',
     },
     background: {
-      default: '#f5f5f5',
+      default: mode === 'light' ? '#f5f5f5' : '#121212',
+      paper: mode === 'light' ? '#ffffff' : '#1e1e1e',
     },
   },
   spacing: (factor: number) => `${8 * factor}px`,
-};
+});
 
-export const theme = createTheme({
-  ...commonThemes,
-  components: {
-    MuiTypography: {
-      styleOverrides: {
-        button: {
-          textTransform: 'initial',
-          lineHeight: '16px',
-          fontWeight: 'bold',
-        },
-        h1: {
-          fontSize: '36px',
-          lineHeight: '42px',
-          fontWeight: 'bold',
-          letterSpacing: '-0.02em',
-        },
-        h2: {
-          lineHeight: '24px',
-          fontSize: '28px',
-          fontWeight: 'bold',
-        },
-        h3: {
-          lineHeight: '20px',
-          fontSize: '24px',
-          fontWeight: 'bold',
-        },
-        h4: {
-          fontWeight: 500,
-          lineHeight: '23px',
-          fontSize: '20px',
-          letterSpacing: '-0.02em',
-        },
-        h5: {
-          fontWeight: 'bold',
-          fontSize: '16px',
-          lineHeight: '24px',
-        },
-        h6: {
-          fontWeight: 'normal',
-          fontSize: '16px',
-          lineHeight: '24px',
-          letterSpacing: '-0.01em',
-        },
-        body1: {
-          fontSize: '14px',
-          lineHeight: 1.5,
-        },
-        body2: {
-          fontSize: '12px',
-          lineHeight: '16px',
-        },
-        caption: {
-          fontSize: '10px',
-          lineHeight: '12px',
-        },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: 'initial',
-          fontWeight: 'bold',
-        },
-        text: {
-          '&:hover': {
-            backgroundColor: commonThemes.palette.primary.light,
+export const getAttuTheme = (mode: PaletteMode) => {
+  const commonThemes = getCommonThemes(mode);
+
+  return {
+    ...commonThemes,
+    components: {
+      MuiTypography: {
+        styleOverrides: {
+          button: {
+            textTransform: 'initial',
+            lineHeight: '16px',
+            fontWeight: 'bold',
+            variants: [],
+          },
+          h1: {
+            fontSize: '36px',
+            lineHeight: '42px',
+            fontWeight: 'bold',
+            letterSpacing: '-0.02em',
+          },
+          h2: {
+            lineHeight: '24px',
+            fontSize: '28px',
+            fontWeight: 'bold',
+          },
+          h3: {
+            lineHeight: '20px',
+            fontSize: '24px',
+            fontWeight: 'bold',
+          },
+          h4: {
+            fontWeight: 500,
+            lineHeight: '23px',
+            fontSize: '20px',
+            letterSpacing: '-0.02em',
+          },
+          h5: {
+            fontWeight: 'bold',
+            fontSize: '16px',
+            lineHeight: '24px',
+          },
+          h6: {
+            fontWeight: 'normal',
+            fontSize: '16px',
+            lineHeight: '24px',
+            letterSpacing: '-0.01em',
+          },
+          body1: {
+            fontSize: '14px',
+            lineHeight: 1.5,
+          },
+          body2: {
+            fontSize: '12px',
+            lineHeight: '16px',
+          },
+          caption: {
+            fontSize: '10px',
+            lineHeight: '12px',
           },
         },
       },
-    },
-    MuiDialog: {
-      styleOverrides: {
-        paper: {
-          borderRadius: 8,
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: 'initial',
+            fontWeight: 'bold',
+            variants: [],
+          },
+          text: {
+            '&:hover': {
+              backgroundColor: commonThemes.palette.primary.light,
+            },
+          },
         },
       },
-    },
-    MuiDialogActions: {
-      styleOverrides: {
-        spacing: {
-          padding: commonThemes.spacing(4),
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            borderRadius: 8,
+          },
         },
       },
-    },
-    MuiDialogContent: {
-      styleOverrides: {
-        root: {
-          padding: `${commonThemes.spacing(1)} ${commonThemes.spacing(4)}`,
+      MuiDialogActions: {
+        styleOverrides: {
+          spacing: {
+            padding: commonThemes.spacing(4),
+          },
         },
       },
-    },
-    MuiDialogTitle: {
-      styleOverrides: {
-        root: {
-          padding: commonThemes.spacing(4),
-          paddingBottom: commonThemes.spacing(1),
+      MuiDialogContent: {
+        styleOverrides: {
+          root: {
+            padding: `${commonThemes.spacing(1)} ${commonThemes.spacing(4)}`,
+          },
         },
       },
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        contained: {
-          marginLeft: 0,
+      MuiDialogTitle: {
+        styleOverrides: {
+          root: {
+            padding: commonThemes.spacing(4),
+            paddingBottom: commonThemes.spacing(1),
+          },
         },
       },
-    },
-    MuiTextField: {
-      styleOverrides: {},
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#f4f4f4',
-          '&:hover': {
-            backgroundColor: '#f4f4f4',
+      MuiFormHelperText: {
+        styleOverrides: {
+          contained: {
+            marginLeft: 0,
           },
         },
-        underline: {
-          '&:before': {
-            borderBottom: 'none',
+      },
+      MuiTextField: {
+        styleOverrides: {},
+      },
+      MuiFilledInput: {
+        styleOverrides: {
+          underline: {
+            '&:before': {
+              borderBottom: 'none',
+            },
+            borderWidth: 1,
+            borderColor: 'transparent',
           },
-          borderWidth: 1,
-          borderColor: 'transparent',
         },
       },
-    },
-    MuiInput: {
-      styleOverrides: {
-        underline: {
-          '&:hover:not(.Mui-disabled):before': {
+      MuiInput: {
+        styleOverrides: {
+          underline: {
+            '&:hover:not(.Mui-disabled):before': {
+              borderWidth: 1,
+            },
             borderWidth: 1,
+            borderColor: 'transparent',
           },
-          borderWidth: 1,
-          borderColor: 'transparent',
         },
       },
     },
-  },
-});
+  };
+};
 
-export default theme;
+export default getAttuTheme;

client/yarn.lock

@@ -333,6 +333,16 @@
   dependencies:
     "@date-io/core" "^1.3.13"
 
+"@ddietr/codemirror-themes@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@ddietr/codemirror-themes/-/codemirror-themes-1.4.2.tgz#5f3ca219ec3b9889ef6d7b6e19860483f4fd6616"
+  integrity sha512-8U3H3lmtmSWLD5VRlt7jf2HW62URnwgPxjZZDYjBX5EtMpgZ2QnqiIYrNzdQPPjJngT9D43gls3+JlekCBmrfw==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
 "@emotion/babel-plugin@^11.12.0":
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"