Merge pull request #656 from codeSafari10/theming

fix: enhance merging custom theme with basePallete
layer5io · Jun 21, 2024 · 9300866 · 9300866
2 parents 4bc0a4b + 7212454
commit 9300866
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx
@@ -22,10 +22,10 @@ function SistentThemeProvider({
   initialMode = 'light',
   customTheme
 }: SistentThemeProviderProps): JSX.Element {
-  const theme = React.useMemo<Theme>(() => createCustomTheme(initialMode), [initialMode]);
-  if (customTheme) {
-    theme.palette.background.brand = customTheme;
-  }
+  const theme = React.useMemo<Theme>(
+    () => createCustomTheme(initialMode, customTheme),
+    [initialMode, customTheme]
+  );
   return (
     <SistentThemeProviderContext.Provider value={{ emotionCache }}>
       <ThemeProvider theme={theme}>

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -1,15 +1,24 @@
-import { PaletteMode, createTheme } from '@mui/material';
+import { Interactiveness, PaletteMode, createTheme } from '@mui/material';
 import { components } from './components';
 import { darkModePalette, lightModePalette } from './palette';
 import { typography } from './typography';
 
 export const drawerWidth = 240;
 
-export const createCustomTheme = (mode: PaletteMode) => {
+export const createCustomTheme = (mode: PaletteMode, brandPalette?: Interactiveness) => {
+  const basePalette = mode == 'light' ? lightModePalette : darkModePalette;
+  const themePalette = brandPalette
+    ? Object.assign({}, basePalette, {
+        background: {
+          brand: brandPalette
+        }
+      })
+    : basePalette;
+
   return createTheme({
     palette: {
       mode,
-      ...(mode === 'light' ? lightModePalette : darkModePalette)
+      ...themePalette
     },
     components,
     typography: typography(mode),