Make theme dynamic

2 files changed, 29 insertions, 28 deletions

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