Dark mode support (fix #1129)

4 files changed, 18 insertions, 13 deletions

diff --git a/modern/src/common/attributes/useServerAttributes.js b/modern/src/common/attributes/useServerAttributes.js
index 74749991..5cce479e 100644
--- a/modern/src/common/attributes/useServerAttributes.js
+++ b/modern/src/common/attributes/useServerAttributes.js
@@ -31,6 +31,10 @@ export default (t) => useMemo(() => ({
     name: t('serverChangeDisable'),
     type: 'boolean',
   },
+  darkMode: {
+    name: t('settingsDarkMode'),
+    type: 'boolean',
+  },
   'ui.disableLoginLanguage': {
     name: t('attributeUiDisableLoginLanguage'),
     type: 'boolean',
diff --git a/modern/src/common/components/StatusCard.jsx b/modern/src/common/components/StatusCard.jsx
index 0d32eb0d..c8898b7c 100644
--- a/modern/src/common/components/StatusCard.jsx
+++ b/modern/src/common/components/StatusCard.jsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'flex-start',
   },
   mediaButton: {
-    color: theme.palette.colors.white,
+    color: theme.palette.primary.contrastText,
     mixBlendMode: 'difference',
   },
   header: {
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,
   };