Use dark mode if user has set it as preferred

Author: paazmaya

src/App.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { SnackbarProvider } from "notistack";
-import { Box } from "@mui/material";
+import { Box, useMediaQuery } from "@mui/material";
 import {
   ThemeProvider,
   StyledEngineProvider,
@@ -18,15 +18,20 @@ import {
 } from "./contexts";
 import Router from "./Router";
 
-// https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes
-const theme = createTheme({
-  palette: {
-    primary: indigo,
-    secondary: purple,
-  },
-});
-
 function App() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  // Update the theme only if the mode changes
+  // https://mui.com/material-ui/customization/color/#2014-material-design-color-palettes
+  const theme = React.useMemo(() => createTheme({
+    palette: {
+      primary: indigo,
+      secondary: purple,
+      mode: prefersDarkMode ? 'dark' : 'light',
+    },
+  }
+  ), [prefersDarkMode]);
+
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>