Make theme dynamic

6 files changed, 59 insertions, 40 deletions

diff --git a/modern/src/App.js b/modern/src/App.js
index baa2c3f2..89785cfa 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Outlet, useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { LinearProgress, useMediaQuery } from '@mui/material';
+import { LinearProgress, useMediaQuery, useTheme } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
-import theme from './common/theme';
 import BottomMenu from './common/components/BottomMenu';
 import SocketController from './SocketController';
 import CachingController from './CachingController';
@@ -22,6 +21,7 @@ const useStyles = makeStyles(() => ({
 
 const App = () => {
   const classes = useStyles();
+  const theme = useTheme();
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
diff --git a/modern/src/AppThemeProvider.js b/modern/src/AppThemeProvider.js
new file mode 100644
index 00000000..0f1c5479
--- /dev/null
+++ b/modern/src/AppThemeProvider.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { ThemeProvider } from '@mui/material';
+import theme from './common/theme';
+
+const AppThemeProvider = ({ children }) => {
+  const server = useSelector((state) => state.session.server);
+  const themeInstance = theme(server);
+
+  return (
+    <ThemeProvider theme={themeInstance}>
+      {children}
+    </ThemeProvider>
+  );
+};
+
+export default AppThemeProvider;
diff --git a/modern/src/common/theme/index.js b/modern/src/common/theme/index.js
index 0cc999ad..0f163e7e 100644
--- a/modern/src/common/theme/index.js
+++ b/modern/src/common/theme/index.js
@@ -1,12 +1,11 @@
+import { useMemo } from 'react';
 import { createTheme } from '@mui/material/styles';
 import palette from './palette';
 import dimensions from './dimensions';
 import components from './components';
 
-const theme = createTheme({
-  palette,
+export default (server) => useMemo(() => createTheme({
+  palette: palette(server),
   dimensions,
   components,
-});
-
-export default theme;
+}), [server]);
diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js
index c6cb00d9..dfc8b9dd 100644
--- a/modern/src/common/theme/palette.js
+++ b/modern/src/common/theme/palette.js
@@ -2,28 +2,30 @@ import {
   amber, grey, green, indigo, red, common,
 } from '@mui/material/colors';
 
-const colors = {
-  white: common.white,
-  background: grey[50],
-  primary: indigo[900],
-  secondary: green[800],
-  positive: green[500],
-  medium: amber[700],
-  negative: red[500],
-  neutral: grey[500],
-  geometry: '#3bb2d0',
-};
+export default (server) => {
+  const colors = {
+    white: common.white,
+    background: grey[50],
+    primary: server?.attributes?.colorPrimary || indigo[900],
+    secondary: server?.attributes?.colorSecondary || green[800],
+    positive: green[500],
+    medium: amber[700],
+    negative: red[500],
+    neutral: grey[500],
+    geometry: '#3bb2d0',
+  };
 
-export default {
-  background: {
-    default: colors.background,
-  },
-  primary: {
-    main: colors.primary,
-  },
-  secondary: {
-    main: colors.secondary,
-    contrastText: colors.white,
-  },
-  colors,
+  return {
+    background: {
+      default: colors.background,
+    },
+    primary: {
+      main: colors.primary,
+    },
+    secondary: {
+      main: colors.secondary,
+      contrastText: colors.white,
+    },
+    colors,
+  };
 };
diff --git a/modern/src/index.js b/modern/src/index.js
index e5457789..936fe7c1 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -3,17 +3,17 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import { CssBaseline, ThemeProvider, StyledEngineProvider } from '@mui/material';
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
 import store from './store';
 import { LocalizationProvider } from './common/components/LocalizationProvider';
 import ErrorHandler from './common/components/ErrorHandler';
-import theme from './common/theme';
 import Navigation from './Navigation';
 import preloadImages from './map/core/preloadImages';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import NativeInterface from './common/components/NativeInterface';
 import ServerProvider from './ServerProvider';
 import ErrorBoundary from './ErrorBoundary';
+import AppThemeProvider from './AppThemeProvider';
 
 preloadImages();
 
@@ -23,16 +23,17 @@ root.render(
     <Provider store={store}>
       <LocalizationProvider>
         <StyledEngineProvider injectFirst>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <ServerProvider>
+          <CssBaseline />
+          <ServerProvider>
+            <AppThemeProvider>
+              <CssBaseline />
               <BrowserRouter>
                 <Navigation />
               </BrowserRouter>
-            </ServerProvider>
-            <ErrorHandler />
-            <NativeInterface />
-          </ThemeProvider>
+              <ErrorHandler />
+              <NativeInterface />
+            </AppThemeProvider>
+          </ServerProvider>
         </StyledEngineProvider>
       </LocalizationProvider>
     </Provider>
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index 770c1c57..0634251b 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -61,7 +61,7 @@ export default async () => {
     const results = [];
     ['primary', 'positive', 'negative', 'neutral'].forEach((color) => {
       results.push(loadImage(mapIcons[category]).then((icon) => {
-        mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette.colors[color]);
+        mapImages[`${category}-${color}`] = prepareIcon(background, icon, palette().colors[color]);
       }));
     });
     await Promise.all(results);