darkmode part1

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

client/src/App.tsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import Router from './router/Router';
 import {
   RootProvider,
@@ -8,9 +10,19 @@ import {
   PrometheusProvider,
   SystemProvider,
 } from './context';
-import { theme } from './styles/theme';
+import { createTheme } from '@mui/material/styles';
+import getCommonThemes from './styles/theme';
+
+const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
 
 function App() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const theme = React.useMemo(
+    () => createTheme(getCommonThemes(prefersDarkMode ? 'dark' : 'dark')),
+    [true]
+  );
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>

client/src/components/advancedSearch/Dialog.tsx

@@ -193,7 +193,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   applyBtn: {
     backgroundColor: theme.palette.primary.main,
-    color: 'white',
+    color: theme.palette.text.primary,
   },
   copyButton: {},
   expResult: {

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.default,
     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/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',

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/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',

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

@@ -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,
-  },
+  checkbox: {},
   rowHover: {
     '&:hover': {
-      backgroundColor: '#f3fcfe !important',
+      backgroundColor: `${theme.palette.secondary.main} !important`,
       '& td': {
         background: 'inherit',
       },
 
       '& $hoverActionCell': {
-        backgroundColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.secondary.main,
         '& span': {
           opacity: 1,
         },
@@ -65,13 +58,13 @@ const useStyles = makeStyles((theme: Theme) => ({
     },
   },
   selected: {
-    backgroundColor: '#f3fcfe !important',
+    backgroundColor: `#f3fcfe !important`,
     '& td': {
       background: 'inherit',
     },
   },
   cell: {
-    borderBottom: '1px solid #e9e9ed',
+    borderBottom: `1px solid ${theme.palette.divider}`,
 
     '& p': {
       display: 'inline-block',

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/layout/Header.tsx

@@ -13,10 +13,10 @@ 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 +46,6 @@ const useStyles = makeStyles((theme: Theme) => ({
       '& .address': {
         fontSize: '12px',
         lineHeight: 1.3,
-        color: '#545454',
       },
 
       '& .status': {

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/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/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/search/Styles.ts

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

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',
     },

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/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,5 +1,6 @@
-import { createTheme } from '@mui/material/styles';
+import { PaletteMode } from '@mui/material';
 
+// define types for the common theme
 declare module '@mui/material/styles/createPalette' {
   interface Palette {
     attuGrey: Palette['primary'];
@@ -11,7 +12,7 @@ declare module '@mui/material/styles/createPalette' {
   }
 }
 
-const commonThemes = {
+const getCommonThemes = (mode: PaletteMode) => ({
   typography: {
     fontFamily: [
       'Inter',
@@ -27,10 +28,11 @@ 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',
@@ -39,163 +41,169 @@ const commonThemes = {
     },
     error: {
       main: '#ff4605',
-      light: '#ff8f68',
-      dark: '#cd3804',
+      light: mode === 'light' ? '#ff8f68' : '#ff6a3a',
+      dark: mode === 'light' ? '#cd3804' : '#b33900',
     },
     attuGrey: {
-      main: '#aeaebb',
-      light: '#dcdce3',
-      dark: '#82838e',
-      contrastText: '#f8f8fc',
+      main: mode === 'light' ? '#aeaebb' : '#565665',
+      light: mode === 'light' ? '#dcdce3' : '#838394',
+      dark: mode === 'light' ? '#82838e' : '#34343f',
+      contrastText: mode === 'light' ? '#f8f8fc' : '#e0e0e5',
     },
     attuDark: {
-      main: '#010e29',
+      main: mode === 'light' ? '#010e29' : '#0d1b34',
     },
     background: {
-      default: '#f5f5f5',
+      default: mode === 'light' ? '#f5f5f5' : '#121212',
     },
   },
   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',
+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',
+          },
         },
       },
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: 'initial',
-          fontWeight: 'bold',
-        },
-        text: {
-          '&:hover': {
-            backgroundColor: commonThemes.palette.primary.light,
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            textTransform: 'initial',
+            fontWeight: 'bold',
+            variants: [],
+          },
+          text: {
+            '&:hover': {
+              backgroundColor: commonThemes.palette.primary.light,
+            },
           },
         },
       },
-    },
-    MuiDialog: {
-      styleOverrides: {
-        paper: {
-          borderRadius: 8,
+      MuiDialog: {
+        styleOverrides: {
+          paper: {
+            borderRadius: 8,
+          },
         },
       },
-    },
-    MuiDialogActions: {
-      styleOverrides: {
-        spacing: {
-          padding: commonThemes.spacing(4),
+      MuiDialogActions: {
+        styleOverrides: {
+          spacing: {
+            padding: commonThemes.spacing(4),
+          },
         },
       },
-    },
-    MuiDialogContent: {
-      styleOverrides: {
-        root: {
-          padding: `${commonThemes.spacing(1)} ${commonThemes.spacing(4)}`,
+      MuiDialogContent: {
+        styleOverrides: {
+          root: {
+            padding: `${commonThemes.spacing(1)} ${commonThemes.spacing(4)}`,
+          },
         },
       },
-    },
-    MuiDialogTitle: {
-      styleOverrides: {
-        root: {
-          padding: commonThemes.spacing(4),
-          paddingBottom: commonThemes.spacing(1),
+      MuiDialogTitle: {
+        styleOverrides: {
+          root: {
+            padding: commonThemes.spacing(4),
+            paddingBottom: commonThemes.spacing(1),
+          },
         },
       },
-    },
-    MuiFormHelperText: {
-      styleOverrides: {
-        contained: {
-          marginLeft: 0,
+      MuiFormHelperText: {
+        styleOverrides: {
+          contained: {
+            marginLeft: 0,
+          },
         },
       },
-    },
-    MuiTextField: {
-      styleOverrides: {},
-    },
-    MuiFilledInput: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#f4f4f4',
-          '&:hover': {
-            backgroundColor: '#f4f4f4',
+      MuiTextField: {
+        styleOverrides: {},
+      },
+      MuiFilledInput: {
+        styleOverrides: {
+          root: {
+            backgroundColor: mode === 'light' ? '#f4f4f4' : '#303030',
+            '&:hover': {
+              backgroundColor: mode === 'light' ? '#f4f4f4' : '#404040',
+            },
           },
-        },
-        underline: {
-          '&:before': {
-            borderBottom: 'none',
+          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;