CODEWITHSUNDEEP
reactjsmaterial-ui
Extelliqent
Extelliqent

Reputation: 1856

Material UI v4 AppBar Won't Change Theme

I have Appbar (in MUI v4)

<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")
);

enter image description here

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"
}

Upvotes: 6

Views: 7750

Answers (4)

Ryan Cogswell
Ryan Cogswell

Reputation: 81136

Note: This answer is for MUI v4

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

Upvotes: 23

Reo Jefton
Reo Jefton

Reputation: 1

const matteBlackTheme = createMuiTheme({
    overrides: {
      MuiAppBar: {
        colorPrimary: {
      backgroundColor: '#000000' // Override primary color for AppBar
    },
    colorDefault: {
      backgroundColor: '#000000' // Override default color for AppBar
    }
      }
    },
    palette: {
      type: 'dark',
      background: {
        paper: '#18191A' // Override color for paper surfaces
      }
    }
  });

Upvotes: 0

Abhik Banerjee
Abhik Banerjee

Reputation: 377

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

Upvotes: 5

shandude
shandude

Reputation: 41

Well , if you can add color as default to AppBar and then you can try to switch dark mode , it will works but AppBar will loose default blue color :

<AppBar position="static" color="default">
      <Toolbar>
        <Typography >Shanti Lal</Typography>
        <Switch checked={darkMode} onChange={() => setDarkMode(!darkMode)} />
      </Toolbar>
    </AppBar>

Upvotes: 0

Related Questions