[AppBar] background-color and color styles not aligned between dark and light colorSchemes

[croraf]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/dark-theme-appbar-bug-forked-h6ymlh

Steps:

1. Notice the styles on the AppBar in light mode
   

2. switch to dark mode using the button

3. Notice the styles on the AppBar in dark mode
   

Current behavior

In light scheme the background-color is set to var(--AppBar-background) while in dark scheme it is taken from dark.palette.background.paper (you can test this by changing this property in the theme in index.tsx).

Also in light scheme the color is set to var(--AppBar-color) while in dark scheme it is taken from dark.palette.text.primary (you can test this by changing this property in the theme in index.tsx)

Expected behavior

It is expected that both schemes behave the same.

Context

No response

Your environment

npx @mui/envinfo

System:
OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
pnpm: Not Found
Browsers:
Chrome: 129.0.6668.58
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: 5.0.0-beta.58
@mui/core-downloads-tracker: 6.0.2
@mui/icons-material: ^6.0.2 => 6.0.2
@mui/lab: ^6.0.0-beta.9 => 6.0.0-beta.9
@mui/material: ^6.0.2 => 6.0.2
@mui/private-theming: 6.0.2
@mui/styled-engine: 6.0.2
@mui/styles: ^6.0.2 => 6.0.2
@mui/system: ^6.0.2 => 6.0.2
@mui/types: 7.2.16
@mui/utils: 5.16.6
@mui/x-charts: ^7.16.0 => 7.16.0
@mui/x-charts-vendor: 7.16.0
@mui/x-date-pickers: ^7.18.0 => 7.18.0
@mui/x-internals: 7.16.0
@mui/x-tree-view: ^7.16.0 => 7.16.0
@types/react: ^18.3.5 => 18.3.5
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.5.4 => 5.5.4

Search keywords: AppBar background dark light colorScheme

[jonesmac]

I think the problem with appbar might be more widespread. You can see in my screenshot, even though my theme is set to light mode, the app bar is still using styles as if my perferred color scheme is dark?

[jonesmac]

@croraf I think I solved it. It looks like this issue is caused by differences in extendTheme vs createTheme

If you use extendTheme, you will see the incorrect behavior where AppBar (and other paper backed components?) incorrectly use prefers-color-scheme: dark even though the theme provider is set to light mode.

Checkout the code sandbox here to see the issue. When in light mode, the app bar still has the grey background present in dark mode. However, if you switch from extendTheme to createTheme in lines 44-46 in the theme.tsx file, you will see the background of the appbar change correctly when switching themes.

@siriwatknp @zannager what is the correct behavior here? Should extendTheme behave differently than createTheme theme wrt paper-backed components?

[siriwatknp]

@jonesmac please use createTheme in favor of extendTheme starting from v6.

I see that from your code, the styles is using @media (prefers-color-scheme). If you want the users to be able to toggle the modes from a control, you should add a colorSchemeSelector:

createTheme({
  cssVariables: {
+    colorSchemeSelector: 'class',
  }
})

[siriwatknp]

@croraf Please provide a reproducible sandbox that we can take a look.

[croraf]

@siriwatknp updated

[jonesmac]

@siriwatknp

@jonesmac please use createTheme in favor of extendTheme starting from v6.

I see that from your code, the styles is using @media (prefers-color-scheme). If you want the users to be able to toggle the modes from a control, you should add a colorSchemeSelector:

createTheme({
  cssVariables: {
+    colorSchemeSelector: 'class',
  }
})

@siriwatknp I've seen that note in the docs, however, it appears adding the colorSchemeSelector: 'class', property is NOT required to have the user switch the light/dark theme. See my codepen. Is this more of a suggestion for future compatability?

[siriwatknp]

@croraf Have you checked this? https://mui.com/material-ui/react-app-bar/#enable-color-on-dark