set up custom theme for color-mode context

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,
+    },
+  }),
+}