2 files changed, 13 insertions, 12 deletions
diff --git a/modern/src/common/theme/components.js b/modern/src/common/theme/components.js
index 572f876e..56a2ac75 100644
--- a/modern/src/common/theme/components.js
+++ b/modern/src/common/theme/components.js
@@ -1,5 +1,3 @@
-import { grey } from '@mui/material/colors';
-
 export default {
   MuiUseMediaQuery: {
     defaultProps: {
@@ -8,9 +6,9 @@ export default {
   },
   MuiOutlinedInput: {
     styleOverrides: {
-      root: {
-        backgroundColor: grey[50],
-      },
+      root: ({ theme }) => ({
+        backgroundColor: theme.palette.background.default,
+      }),
     },
   },
   MuiButton: {
diff --git a/modern/src/common/theme/palette.js b/modern/src/common/theme/palette.js
index 51a01c69..99288aee 100644
--- a/modern/src/common/theme/palette.js
+++ b/modern/src/common/theme/palette.js
@@ -1,15 +1,18 @@
+import { useMediaQuery } from '@mui/material';
 import {
-  amber, grey, green, indigo, red, common,
+  amber, grey, green, indigo, red,
 } 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;
+
   const colors = {
-    white: common.white,
-    background: grey[50],
-    primary: validatedColor(server?.attributes?.colorPrimary) || indigo[900],
-    secondary: validatedColor(server?.attributes?.colorSecondary) || green[800],
+    primary: validatedColor(server?.attributes?.colorPrimary) || (darkMode ? indigo[200] : indigo[900]),
+    secondary: validatedColor(server?.attributes?.colorSecondary) || (darkMode ? green[200] : green[800]),
     positive: green[500],
     medium: amber[700],
     negative: red[500],
@@ -18,15 +21,15 @@ export default (server) => {
   };
 
   return {
+    mode: darkMode ? 'dark' : 'light',
     background: {
-      default: colors.background,
+      default: darkMode ? grey[900] : grey[50],
     },
     primary: {
       main: colors.primary,
     },
     secondary: {
       main: colors.secondary,
-      contrastText: colors.white,
     },
     colors,
   };