Material-UI - AppBar backgroundColor doesn't change when set type: 'dark' in createMuiTheme

Question

When I switch theme by changing the value of theme.palette.type to 'dark' , all white components changed its color to dark, but it's not the case for component like AppBar which has primary color of #3f51b5 as the default.

I thought by setting the theme.palette.type to 'dark' would change its color to the dark variant theme.palette.primary.dark ( #303f9f ) or maybe real dark color ( #212121 ), but it doesn't. How to apply the dark theme to this component too?

const theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      light: "#7986cb",
      main: "#3f51b5",
      dark: "#303f9f",
      contrastText: "#fff",
    },
});

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <AppBar />
    </MuiThemeProvider>
  );
}

Answer 1

Use color as default .

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <AppBar color="default" />
    </MuiThemeProvider>
  );
}

Note : If you change your background paper color then you can use inherit color property.

const darkTheme = createTheme({
    palette: {
        primary: {
            main: '#01bf71'
        },
        secondary: {
            main: '#fffff'
        },
        background: {
            default: '#000',
            paper: '#000'
        },
        type: 'dark',
        text: {
            primary: '#fff',
            secondary: '#fff'
        }
    }
});

Now use <AppBar color="inherit" /> this will make appbar background color as #000