set up custom theme for color-mode context

src/contexts/color-mode/index.tsx

@@ -1,6 +1,6 @@
 import React, {PropsWithChildren, createContext, useEffect, useState} from 'react'
 import {ThemeProvider} from '@mui/material/styles'
-import {RefineThemes} from '@refinedev/mui'
+import {CustomTheme} from './theme'
 
 type ColorModeContextType = {
   mode: string
@@ -35,12 +35,7 @@ export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({children}
         mode,
       }}
     >
-      <ThemeProvider
+      <ThemeProvider theme={mode === 'light' ? CustomTheme.Light : CustomTheme.Dark}>{children}</ThemeProvider>
-        // you can change the theme colors here. example: mode === "light" ? RefineThemes.Magenta : RefineThemes.MagentaDark
-        theme={mode === 'light' ? RefineThemes.Blue : RefineThemes.BlueDark}
-      >
-        {children}
-      </ThemeProvider>
     </ColorModeContext.Provider>
   )
 }

src/contexts/color-mode/theme.ts

@@ -0,0 +1,50 @@
+import {createTheme} from '@mui/material/styles'
+import {RefineThemes} from '@refinedev/mui'
+
+const COLORS = {
+  primary: '#7f6b58',
+  secondary: '#48989f',
+}
+
+const theme = {
+  palette: {
+    primary: {
+      main: COLORS.primary,
+    },
+    secondary: {
+      main: COLORS.secondary,
+    },
+  },
+  components: {
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: COLORS.secondary,
+        },
+      },
+    },
+  },
+}
+
+export const CustomTheme = {
+  Light: createTheme({
+    ...RefineThemes.Blue,
+    palette: {
+      ...RefineThemes.Blue.palette,
+      ...theme.palette,
+    },
+    components: {
+      ...theme.components,
+    },
+  }),
+  Dark: createTheme({
+    ...RefineThemes.BlueDark,
+    palette: {
+      ...RefineThemes.BlueDark.palette,
+      ...theme.palette,
+    },
+    components: {
+      ...theme.components,
+    },
+  }),
+}