Material UI AppBar Won't Change Theme

Question

I have Appbar

<AppBar position="fixed" className={classes.appBar}>
  <Toolbar style={{ padding: 0 }}>
    <... />
  </Toolbar>
</AppBar>

on my page when I change the MUI Theme to Light, it's not changing from it's default color

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
  palette: {
    type: "dark"
  }
});

ReactDOM.render(
  <MuiThemeProvider theme={theme}>
    <Index />
  </MuiThemeProvider>,
  document.getElementById("root")
);

If I add this to the palette, then I get background black... I thought I could change overall palette when I change type from light to dark..?

primary: {
  main: "#000000"
}

Answer 1

On https://material-ui.com/ if you change the theme from light to dark (using the lightbulb icon in the AppBar), you'll notice that the AppBar is unchanged.

The AppBar uses the primary color as the background color by default and the primary color doesn't change when switching from light to dark.

If you have an AppBar with color="default", then it will change when switching from light to dark. You can see this on the Simple App Bar demo: https://material-ui.com/demos/app-bar/#simple-app-bar

Answer 2

Starting from MUI v5, to change the AppBar colour in dark mode, you need to use the enableColorOnDark prop. Also, if color="default" is used in v5, then the color won't change. It needs to be a value specified here.

Ref: https://mui.com/components/app-bar/#api