From deaf5d68bb7c3fca86cffdeffd4c57cbeeeb27f9 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Mon, 27 Jan 2025 19:26:55 +0300
Subject: [PATCH] set up custom `theme` for `color-mode` context
---
src/contexts/color-mode/index.tsx | 9 ++----
src/contexts/color-mode/theme.ts | 50 +++++++++++++++++++++++++++++++
2 files changed, 52 insertions(+), 7 deletions(-)
create mode 100644 src/contexts/color-mode/theme.ts
diff --git a/src/contexts/color-mode/index.tsx b/src/contexts/color-mode/index.tsx
index f7c4c21..077811d 100644
--- a/src/contexts/color-mode/index.tsx
+++ b/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
- // you can change the theme colors here. example: mode === "light" ? RefineThemes.Magenta : RefineThemes.MagentaDark
- theme={mode === 'light' ? RefineThemes.Blue : RefineThemes.BlueDark}
- >
- {children}
- </ThemeProvider>
+ <ThemeProvider theme={mode === 'light' ? CustomTheme.Light : CustomTheme.Dark}>{children}</ThemeProvider>
</ColorModeContext.Provider>
)
}
diff --git a/src/contexts/color-mode/theme.ts b/src/contexts/color-mode/theme.ts
new file mode 100644
index 0000000..3a77ef3
--- /dev/null
+++ b/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,
+ },
+ }),
+}