How to Change Light and Dark Theme Colors for Material-UI AppBar?

Question

I'm not very deep into React yet...

The AppBar is styled like a button which i don't like.

So I want to change it's colors but also have it working switching light and dark scheme.

[Edit] I want to define own colors for AppBar (without changing present colors) und add them to light/dark theme respectively so it's changing automatically to light/dark when i switch themes. [/Edit]

Changing colors with ThemeProvider is already not working:

const theme = createMuiTheme({
    palette: {
        // type: 'dark'
    },
    overrides: {
        MuiTypography: {
            h1: {
                fontSize: 24,
                fontWeight: "normal"
            },
            h2: {
                fontSize: 22,
                fontWeight: "normal"
            },
        },
        MuiAppBar: {
            background: 'white',
            borderBottom: "1px solid lightGray",
        }
    },

MuiTypography works, though. (As I see here https://material-ui.com/customization/default-theme/ there's no AppBar only Typography.)

How can I tell AppBar to use other colors than primary/secondary while staying synced with the built-in light-dark-theme mechanic?

Giovanni Esposito Giovanni Esposito · Accepted Answer · 2020-08-22T12:24:11

Ciao, if you want to switch theme (from dark theme to light theme for example) you could use primary and secondary colors (previously defined in theme object).

So lets take this codesandbox example I made:

I defined 2 colors in theme:

const Theme = {
  palette: {
    primary: {
      main: "#000000"
    },
    secondary: {
      main: "#FFFFFF"
    }
  }
};

In this case, primary is our dark theme and secondary is the light theme.

I created MUI theme:
```
const theme = createMuiTheme(Theme);
```

I wrapped the AppBar component into a ThemeProvider with the theme created:

<ThemeProvider theme={theme}>
  <AppBar position="static" color={themeSelected}>
  ....
  </AppBar>
</ThemeProvider>

As you can see on AppBar component, I putted a state variable in color props (themeSelected).

Well now I created just a simple IconButton with an SwapHoriz icon , and on click I change my state variable themeSelected:

...

const [themeSelected, setThemeSelected] = useState("primary"); // init as primary color

...

const changeTheme = () => {  // function to set state
   if (themeSelected === "primary") setThemeSelected("secondary");
   else setThemeSelected("primary");
};

...

<IconButton   //icon button with onClick handler
   className={classes.menuButton}
   color="inherit"
   aria-label="open drawer"
   onClick={() => {
      changeTheme();
   }}
>
   <SwapHoriz />
</IconButton>

Thats it. Now if you click SwapHoriz you can change your color theme:

Primary color theme

Secondary color theme

EDIT

After you explanation, I understood that you want distinct colors for AppBar and, when you change theme, AppBar should take that colors.

In this case the only way I know is to override the classes of AppBar in this way:

<AppBar
   position="static"
   color={themeSelected}
   classes={{
      colorPrimary: classes.appbarpalette,
      colorSecondary: classes.appbarpalette
   }}
>

Then in your makeStyles:

...
appbarpalette: {
    "&.MuiAppBar-colorPrimary": {
      backgroundColor: purple[600] // instead of #000000 for primary now you have purple
    },
    "&.MuiAppBar-colorSecondary": {
      backgroundColor: green[600] // instead of #FFFFFF for secondary now you have green
    }
  }

I updated my codesandbox example.

How to Change Light and Dark Theme Colors for Material-UI AppBar?

1 Answers