From e53e9a831e2d4f352021ac9ca9f4255618515839 Mon Sep 17 00:00:00 2001
From: mjkl-gh <9350991+mjkl-gh@users.noreply.github.com>
Date: Sun, 10 Jul 2022 21:36:32 +0200
Subject: [PATCH 1/2] Add dark mode, but remove backgroundcolor

---
 interface/src/CustomTheme.tsx | 67 +++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/interface/src/CustomTheme.tsx b/interface/src/CustomTheme.tsx
index a8856b0b..fbf4e140 100644
--- a/interface/src/CustomTheme.tsx
+++ b/interface/src/CustomTheme.tsx
@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, useMemo } from 'react';
+import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
@@ -6,35 +7,41 @@ import { indigo, blueGrey, orange, red, green } from '@mui/material/colors';
 
 import { RequiredChildrenProps } from './utils';
 
-const theme = responsiveFontSizes(
-  createTheme({
-    palette: {
-      background: {
-        default: "#fafafa"
-      },
-      primary: indigo,
-      secondary: blueGrey,
-      info: {
-        main: indigo[500]
-      },
-      warning: {
-        main: orange[500]
-      },
-      error: {
-        main: red[500]
-      },
-      success: {
-        main: green[500]
-      }
-    }
-  })
-);
+const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
-const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => (
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
-    {children}
-  </ThemeProvider>
-);
+  const theme = useMemo(
+      () =>
+      responsiveFontSizes(
+        createTheme({
+          palette: {
+            mode: prefersDarkMode ? 'dark' : 'light',
+            primary: indigo,
+            secondary: blueGrey,
+            info: {
+              main: indigo[500]
+            },
+            warning: {
+              main: orange[500]
+            },
+            error: {
+              main: red[500]
+            },
+            success: {
+              main: green[500]
+            }
+          }
+        }),
+      ),
+    [prefersDarkMode],
+    );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      {children}
+    </ThemeProvider>
+  );
+};
 
 export default CustomTheme;

From 5116c079ff687587734a169f4ce4a304ac8cec21 Mon Sep 17 00:00:00 2001
From: mjkl-gh <9350991+mjkl-gh@users.noreply.github.com>
Date: Sun, 10 Jul 2022 21:54:35 +0200
Subject: [PATCH 2/2] Re-incorporate custom background color for light mode

---
 interface/src/CustomTheme.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/interface/src/CustomTheme.tsx b/interface/src/CustomTheme.tsx
index fbf4e140..5ecd0a93 100644
--- a/interface/src/CustomTheme.tsx
+++ b/interface/src/CustomTheme.tsx
@@ -3,7 +3,7 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 
 import { CssBaseline } from '@mui/material';
 import { createTheme, responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
-import { indigo, blueGrey, orange, red, green } from '@mui/material/colors';
+import { indigo, blueGrey, orange, red, green} from '@mui/material/colors';
 
 import { RequiredChildrenProps } from './utils';
 
@@ -16,6 +16,16 @@ const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => {
         createTheme({
           palette: {
             mode: prefersDarkMode ? 'dark' : 'light',
+            ...(prefersDarkMode
+              ? {
+                // palette values for dark mode
+              }
+              : {
+                  // palette values for light mode
+                  background: {
+                    default: "#fafafa",
+                  },
+                }),
             primary: indigo,
             secondary: blueGrey,
             info: {