[AppBar] Fix background color on dark mode

[siriwatknp]

Breaking changes

• The color prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the Material Design guidelines. Use enableColorOnDark to restore the behavior of v4.

  <AppBar enableColorOnDark />

---

closes #18308

Preview https://deploy-preview-26545--material-ui.netlify.app/components/app-bar/

The case of AppBar is special because the specified color should be enabled only in light mode. I propose the fix by adding another flag (naming can be discussed) to neglect the color prop in dark mode. This approach works great because AppBar inherit Paper which support elevation already. The flag is true by default (consider breaking change) due to the material design spec

Even bottom appbar also use elevation https://material.io/design/color/dark-theme.html#custom-application

Default Behavior

<AppBar color="primary" /> // color has no effect in dark mode

Enable for specific component (opt out via prop)

<AppBar color="primary" enableColorOnDark />

Enable globally (opt out via theme)

createTheme({
  components: {
    MuiAppBar: {
      defaultProps: {
        enableColorOnDark: true,
      }
    }
  }
})

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 103b5cb

[oliviertassinari]

A quick review. Could we also remove the custom CSS we apply for the app bar of the documentation?

[oliviertassinari]

Our heading capitalization convention:

Suggested change

	## Enable Color on Dark
	## Enable color on dark

[oliviertassinari]

We might want to explain what "on dark" mean

Suggested change

	## Enable Color on Dark
	## Enable color on dark mode

[oliviertassinari]

Prefer breaking lines between sentences, makes reviewing easier:

Suggested change

	From v5 onward, `color` prop has no effect on dark mode according to [material design spec](https://material.io/design/color/dark-theme.html). You can opt out by passing `enableColorOnDark` prop.
	From v5 onward, `color` prop has no effect on dark mode according to [material design spec](https://material.io/design/color/dark-theme.html).
	You can opt out by passing `enableColorOnDark` prop.

[oliviertassinari]

We usually don't mention previous versions:

Suggested change

	From v5 onward, `color` prop has no effect on dark mode according to [material design spec](https://material.io/design/color/dark-theme.html). You can opt out by passing `enableColorOnDark` prop.
	The `color` prop has no effect on dark mode according to [material design spec](https://material.io/design/color/dark-theme.html).
	You can opt out by passing `enableColorOnDark` prop.

[oliviertassinari]

@mbrookes Are you OK to settle on this terminology?

Suggested change

	From v5 onward, `color` prop has no effect on dark mode according to [material design spec](https://material.io/design/color/dark-theme.html). You can opt out by passing `enableColorOnDark` prop.
	The `color` prop has no effect on dark mode according to [Material Design guidelines](https://material.io/design/color/dark-theme.html).
	You can opt out by passing `enableColorOnDark` prop.

[mbrookes]

@mbrookes Are you OK to settle on this terminology?

No, but it seems that it was merged before you asked 🙂.

A gentle reminder to @mui-org/maintainers to tag me on any PRs with new or significantly changed language or terminology.

[oliviertassinari]

@mbrookes You have another shoot at it in #26628.

[oliviertassinari]

I have updated the PR description to include the breaking changes. We will use it for the changelog of the next version.

[JakeRuth]

Hi @siriwatknp
I am an engineer using this lib for a project, it's seriously a life saver really appreciate it immensely thank you all so much!

I started using material ui at "@material-ui/core": "^5.0.0-alpha.28", at that point the app bar was always the primary theme color regardless of light/dark mode.
When I updated to "@material-ui/core": "^5.0.0-alpha.36" that changed. I read/see above this was clearly intention/I understand why the change was made.

However, it did take me like 15/20 minutes of confusion with the old color not easily coming back from setting the color prop, I thought I was going crazy. But then I did some deep digging and found this.

One thing that could be helpful is if the sites documentation was updated to include the enableColorOnDark color. I'm kinda game to make a commit if someone can point me in the direction?

Again, seriously killer lib, and I'm unblocked/fixed this relatively easily.

Best,
Jake

[oliviertassinari]

@JakeRuth Use the documentation of the version you are using 😁 https://next.material-ui.com/api/app-bar/

[JakeRuth]

@JakeRuth Use the documentation of the version you are using 😁 https://next.material-ui.com/api/app-bar/

I have embarrassingly using the wrong version of the libs my entire time using this lib!
I am very happy to know this, lol. Cheers!