Fix theme hooks usage

3 files changed, 28 insertions, 30 deletions

diff --git a/modern/src/AppThemeProvider.jsx b/modern/src/AppThemeProvider.jsx
index 0f1c5479..109d25c4 100644
--- a/modern/src/AppThemeProvider.jsx
+++ b/modern/src/AppThemeProvider.jsx
@@ -1,11 +1,16 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { ThemeProvider } from '@mui/material';
+import { ThemeProvider, useMediaQuery } from '@mui/material';
 import theme from './common/theme';
 
 const AppThemeProvider = ({ children }) => {
   const server = useSelector((state) => state.session.server);
-  const themeInstance = theme(server);
+
+  const serverDarkMode = server?.attributes?.darkMode;
+  const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode;
+
+  const themeInstance = theme(server, darkMode);
 
   return (
     <ThemeProvider theme={themeInstance}>
diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js
index 0f163e7e..e8ce698b 100644
--- a/modern/src/common/theme/index.js
+++ b/modern/src/common/theme/index.js
@@ -4,8 +4,8 @@ import palette from './palette';
 import dimensions from './dimensions';
 import components from './components';
 
-export default (server) => useMemo(() => createTheme({
-  palette: palette(server),
+export default (server, darkMode) => useMemo(() => createTheme({
+  palette: palette(server, darkMode),
   dimensions,
   components,
-}), [server]);
+}), [server, darkMode]);
diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js
index 7bd63dac..f32ed93e 100644
--- a/modern/src/common/theme/palette.js
+++ b/modern/src/common/theme/palette.js
@@ -1,29 +1,22 @@
-import { useMediaQuery } from '@mui/material';
 import { grey, green, indigo } from '@mui/material/colors';
 
 const validatedColor = (color) => (/^#([0-9A-Fa-f]{3}){1,2}$/.test(color) ? color : null);
 
-export default (server) => {
-  const preferDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const serverDarkMode = server?.attributes?.darkMode;
-  const darkMode = serverDarkMode !== undefined ? serverDarkMode : preferDarkMode;
-
-  return {
-    mode: darkMode ? 'dark' : 'light',
-    background: {
-      default: darkMode ? grey[900] : grey[50],
-    },
-    primary: {
-      main: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]),
-    },
-    secondary: {
-      main: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]),
-    },
-    neutral: {
-      main: grey[500],
-    },
-    geometry: {
-      main: '#3bb2d0',
-    },
-  };
-};
+export default (server, darkMode) => ({
+  mode: darkMode ? 'dark' : 'light',
+  background: {
+    default: darkMode ? grey[900] : grey[50],
+  },
+  primary: {
+    main: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]),
+  },
+  secondary: {
+    main: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]),
+  },
+  neutral: {
+    main: grey[500],
+  },
+  geometry: {
+    main: '#3bb2d0',
+  },
+});