[material-ui][Paper] Wrong background color shading when elevation=0 and using dark theme with cssVariables

[viliket]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-tucwch?file=src%2FApp.tsx

Steps:

1. Use ThemeProvider with a theme created using createTheme which has cssVariables: true, colorSchemes: { dark: true } and defaultColorScheme: 'dark'.
2. Use Paper component with elevation={0} and try nesting it with another Paper component with a higher elevation, e.g. elevation={24}.

Current behavior

The Paper component with elevation={0} has wrong background color shading which it inherits from the parent Paper component. This happens because due to a bug the Paper component:

https://github.com/mui/material-ui/blob/64aaf564c82cd8bd709116ad38123dbcab8d3bfb/packages/mui-material/src/Paper/Paper.js#L121C54-L121C63

where the --Paper-overlay CSS variable value is set as theme.vars.overlays?.[elevation]. The issue is the that the theme.vars.overlays object has no entry for the 0 elevation so this CSS variable ends up undefined. Therefore the Paper component has no --Paper-overlay CSS variable defined so it wrongly inherits it from the closest parent (if exists) and therefore the background-image property has wrong value leading to wrong shading.

Expected behavior

The Paper component with elevation={0} should have correct background color shade when using dark color scheme and CSS variables.

Context

This problem occurs e.g. if one tries to use an AppBar / Paper component with elevation={0} within a Dialog component with a theme with CSS variables and dark color scheme. This causes the AppBar / Paper component to display with wrong background color as it inherits it wrongly from the Dialog component.

Your environment

npx @mui/envinfo

Using Stackblitz for the bug reproduction so just listing the dependencies as is.

"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@mui/material": "^6.0.2",
"@mui/material-pigment-css": "^6.0.2",
"@types/react": "18.3.5",
"@types/react-dom": "18.3.0",
"react": "18.3.1",
"react-dom": "18.3.1"

Search keywords: paper cssvariables elevation background color

[siriwatknp]

Thanks for reporting the issue. The workaround is to use the theme:

const theme = createTheme({
  cssVariables: true,
  colorSchemes: {
    dark: true,
  },
  defaultColorScheme: 'dark',
  components: {
    MuiPaper: {
      variants: [
        { props: { elevation: 0 }, style: { '--Paper-overlay': 'none'} },
      ]
    }
  }
});

[ZeeshanTamboli]

Created PR to fix it: #43723

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @viliket! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

[mauro-ni]

Good morning,
I have an issue with Dialogs with MUI 6.1.3, in dark theme background seems to be too light.

Steps:

1. Use ThemeProvider with a theme created using createTheme which has cssVariables: true, colorSchemes: { dark: true } and defaultColorScheme: 'dark'.

2. Declare a Dialog and make it open

On dialog paper I get:

 style="
      --Paper-shadow: var(--mui-shadows-24);
      --Paper-overlay: var(--mui-overlays-24);
"

More detailed code:

<div
  class="MuiDialog-container MuiDialog-scrollPaper css-8azq84"
  role="presentation"
  tabindex="-1"
  style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1)"
>
  <div
    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthXl MuiDialog-paperFullWidth css-1e4g5ku"
    role="dialog"
    aria-describedby="dialog-content"
    aria-labelledby="dialog-title"
    style="
      --Paper-shadow: var(--mui-shadows-24);
      --Paper-overlay: var(--mui-overlays-24);
    "
  >
     
  </div>
</div>

Many thanks,
Mauro

[carlospisarello]

Hi @mauro-ni, I faced the same issue while trying to customize the Drawer in a dark theme.

As referenced in this documentation,

In dark mode, increasing the elevation also makes the background color lighter. This is done by applying a semi-transparent gradient with the background-image CSS property.

So the solution is to set the background-image CSS property of the paper element of the Dialog to "none".

This is how i did it with the styleOverrides functionality:

export const themeDark = createTheme({
  palette: {
    mode: 'dark',
  },
  components: {
    MuiDialog:{
      styleOverrides: {
        paper: {
          backgroundImage: "none"
        }
      },
    }
  },
});

[mauro-ni]

@carlospisarello many thanks for the reply.

I am aware of this possibility, which is used to restore the mode present in MUI 4.
MUI 5 and MUI 6, however, use another approach, which perhaps should be adopted.

Mauro