title: material-ui : enable the dark mode automatically
body: <p>As per the <a href="https://material-ui.com/customization/palette/#user-preference" rel="nofollow noreferrer">documentation</a>:</p>
  <p>It says dark mode theme will be generated automatically and get reflected in UI, but it is not working for me.</p>
  <pre><code>Dependencies:
      &quot;@emotion/styled&quot;: &quot;^11.0.0&quot;,
      &quot;@material-ui/core&quot;: &quot;^5.0.0-alpha.16&quot;,
      &quot;@material-ui/icons&quot;: &quot;^5.0.0-alpha.15&quot;,
      &quot;@material-ui/lab&quot;: &quot;^5.0.0-alpha.16&quot;,
  </code></pre>
  <p>Code:</p>
  <pre><code>import { createMuiTheme } from &quot;@material-ui/core/styles&quot;;
  import { CssBaseline, ThemeProvider, useMediaQuery } from &quot;@material-ui/core&quot;;
  import { green, purple } from &quot;@material-ui/core/colors&quot;;
  import { useEffect, useMemo } from &quot;react&quot;;
  import { Route, Switch, useHistory } from &quot;react-router-dom&quot;;
  import SignIn from &quot;./ui/auth/SignIn.js&quot;;
  import SignUp from &quot;./ui/auth/SignUp.js&quot;;
  import Welcome from &quot;./ui/auth/Welcome.js&quot;;
  import { log } from &quot;./util/logger.js&quot;;
  
  const App = () =&gt; {
  
    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  
    const theme = useMemo(
      () =&gt; {
  
        log(prefersDarkMode, &quot;Dark Mode&quot;);
  
        const themeOptions = {
          palette: {
            type: prefersDarkMode ? 'dark' : 'light',
            primary: purple,
            secondary: green
          },
        }
  
        log(JSON.stringify(themeOptions), &quot;Theme Option&quot;)
  
        const theme = createMuiTheme(themeOptions);
  
        log(theme, &quot;Theme&quot;);
  
        return theme;
      },
      [prefersDarkMode],
    );
  
    const history = useHistory()
  
    useEffect(() =&gt; {
      const timer = setTimeout(() =&gt; {
        history.push(&quot;/signin&quot;);
      }, 3000);
  
      return function cleanup() {
        clearTimeout(timer);
      };
    });
  
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;CssBaseline /&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/&quot; component={Welcome} exact /&gt;
          &lt;Route path=&quot;/signin&quot; component={SignIn} /&gt;
          &lt;Route path=&quot;/signup&quot; component={SignUp} /&gt;
        &lt;/Switch&gt;
      &lt;/ThemeProvider&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Signup.js</p>
  <pre><code>import React, { useState } from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  import ForgotPassword from './ForgotPassword';
  import { useHistory } from 'react-router-dom';
  
  const Copyright = () =&gt; {
      return (
          &lt;Typography variant=&quot;body2&quot; color=&quot;textSecondary&quot; align=&quot;center&quot;&gt;
              {'Copyright © '}
              &lt;Link color=&quot;inherit&quot; href=&quot;https://material-ui.com/&quot;&gt;
                  Your Website
              &lt;/Link&gt;
              {' '}
              {new Date().getFullYear()}
              {'.'}
          &lt;/Typography&gt;
      );
  }
  
  const useStyles = makeStyles((theme) =&gt; ({
      paper: {
          marginTop: theme.spacing(8),
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          background: theme.palette.background.default
      },
      avatar: {
          margin: theme.spacing(1),
          backgroundColor: theme.palette.secondary.main,
      },
      form: {
          width: '100%', // Fix IE 11 issue.
          marginTop: theme.spacing(1),
      },
      submit: {
          margin: theme.spacing(3, 0, 2),
      },
  }));
  
  const SignIn = () =&gt; {
  
      const classes = useStyles();
      const history = useHistory();
  
      // Forgot Password State
      const [open, setOpen] = useState(false);
      function openForgotPassword(event) {
          event.preventDefault();
          setOpen(true);
      }
  
      function onClose() {
          setOpen(false);
      }
  
      function goToSignUp(event) {
          event.preventDefault();
          history.push('/signup');
      }
  
      return (
          &lt;Container component=&quot;main&quot; maxWidth=&quot;xs&quot;&gt;
              &lt;div className={classes.paper}&gt;
                  &lt;Avatar className={classes.avatar}&gt;
                      &lt;LockOutlinedIcon /&gt;
                  &lt;/Avatar&gt;
                  &lt;Typography component=&quot;h1&quot; variant=&quot;h5&quot;&gt;
                      Sign in
                  &lt;/Typography&gt;
                  &lt;form className={classes.form} noValidate&gt;
                      &lt;TextField
                          variant=&quot;outlined&quot;
                          margin=&quot;normal&quot;
                          required
                          fullWidth
                          id=&quot;email&quot;
                          label=&quot;Email Address&quot;
                          name=&quot;email&quot;
                          autoComplete=&quot;email&quot;
                          autoFocus
                      /&gt;
                      &lt;TextField
                          variant=&quot;outlined&quot;
                          margin=&quot;normal&quot;
                          required
                          fullWidth
                          name=&quot;password&quot;
                          label=&quot;Password&quot;
                          type=&quot;password&quot;
                          id=&quot;password&quot;
                          autoComplete=&quot;current-password&quot;
                      /&gt;
                      &lt;FormControlLabel
                          control={&lt;Checkbox value=&quot;remember&quot; color=&quot;primary&quot; /&gt;}
                          label=&quot;Remember me&quot;
                      /&gt;
                      &lt;Button
                          type=&quot;submit&quot;
                          fullWidth
                          variant=&quot;contained&quot;
                          color=&quot;primary&quot;
                          className={classes.submit}
                      &gt;
                          Sign In
                      &lt;/Button&gt;
                      &lt;Grid container&gt;
                          &lt;Grid item xs&gt;
                              &lt;Link href=&quot;#&quot; onClick={openForgotPassword} variant=&quot;body2&quot;&gt;
                                  Forgot password?
                              &lt;/Link&gt;
                          &lt;/Grid&gt;
                          &lt;Grid item&gt;
                              &lt;Link href=&quot;#&quot; onClick={goToSignUp} variant=&quot;body2&quot;&gt;
                                  {&quot;Don't have an account? Sign Up&quot;}
                              &lt;/Link&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;Box mt={8}&gt;
                  &lt;Copyright /&gt;
              &lt;/Box&gt;
              &lt;ForgotPassword open={open} onClose={onClose} /&gt;
          &lt;/Container&gt;
      );
  }
  
  export default SignIn;
  </code></pre>
  <p>Background is not getting dark with the type. Can someone help with this?</p>