Why the theme doesn't work in Material-UI?

Question

I'm trying to add a cool theme changing (from light to dark and vice verca) feature in my web app. I'm using Material-UI framework with react to build the app. Here's the code:

const theme = createMuiTheme({
  palette : {
    primary : {
      main : '#9a30b5',
    },
    secondary : {
      main : '#1466ce',
      paper : '#fff',
    }
  },
});

const darkTheme = createMuiTheme({
  palette : {
    primary : {
      main : '#0a090a',
    },
    secondary : {
      main : '#30353c',
      paper : '#30353c',
      button : '#303ab5',
    }
  },
});

const useStyles = makeStyles((theme) => ({
  body : {
    background : theme.palette.secondary.paper,
    height : '100%',
    position : 'absolute',
    width : '100%',
  },
}));

and my component:

function App() {
  const classes = useStyles();
  const [data, setData] = useState({}); 
  const [dark, setDark] = useState(false);
  const changeTheme = () => {
    setDark(prevValue => !prevValue);
  }
  return (
    <ThemeProvider theme={dark? darkTheme : theme}>
      <Paper className={classes.body}>
      </Paper>
    </ThemeProvider>
  );
}

In the paper component, I've given a background of theme.palette.secondary.paper , but it doesn't work. Other styles like height and width are working, only the background is not getting applied. What could be the reason?

Answer 1

Your code doesn't work because you're using usesStyles hook in a root component ( App ) that is not wrapped inside ThemeProvider .

function App() {
  const classes = useStyles(); // not inside ThemeProvider, use DefaultTheme
  const [data, setData] = useState({}); 
  const [dark, setDark] = useState(false);
  const changeTheme = () => {
    setDark(prevValue => !prevValue);
  }
  return (
    <ThemeProvider theme={dark? darkTheme : theme}>
      <Paper className={classes.body}>
      </Paper>
    </ThemeProvider>
  );
}

To fix it, create a child component of ThemeProvider and put your useStyles hook there:

function Content() {
  const classes = useStyles();
  return <Paper className={classes.body}>abc</Paper>;
}

export default function DisabledTabs() {
  const classes = useStyles();
  const [data, setData] = useState({});
  const [dark, setDark] = useState(false);
  const changeTheme = () => {
    setDark((prevValue) => !prevValue);
  };

  return (
    <ThemeProvider theme={dark? darkTheme : theme}>
      <Content />
    </ThemeProvider>
  );
}

Answer 2

set dark theme by using

const theme = createMuiTheme({
  palette : {
    primary : {
      main : '#9a30b5',
      light: '#9a30b5',
    },
    secondary : {
      main : '#1466ce',
      paper : '#fff',
    }
  },
});

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

import React from 'react';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';

function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
        },
      }),
    [prefersDarkMode],
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline/>
      <Routes />
    </ThemeProvider>
  );
}

For more Dtails visit: Materialui-palette