[RFC][CssVarsProvider] Ability to change shadow color on each color scheme

[rikusen0335]

What's the problem? 🤔

Current experimental_extendTheme will accpet Partial<Record<SupportedColorScheme, ColorSystemOptions>> which is:

export interface ColorSystem {
  palette: Palette & CssVarsPalette;
  opacity: Opacity;
  overlays: Overlays;
}

But we need to set each shadow color on each color scheme light and dark (or another).

What are the requirements? ❓

Nothing

What are our options? 💡

Never thought

Proposed solution 🟢

Change type of ColorSystem to:

export interface ColorSystem {
  palette: Palette & CssVarsPalette;
  opacity: Opacity;
  overlays: Overlays;
  shadows: Theme['shadows'];
}

And thus we need to make change to generate processes?

Default approach for this was, setting shadows with theme palette mode like:

shadows: mode === 'light' ? lightShadows : darkShadows // Also component's approach is same

But this approach will not work

Resources and benchmarks 🔗

No response

[siriwatknp]

Before we dive into the solution, could you share the real use cases for light and dark shadows? How does it look like between light and dark mode?

[rikusen0335]

Before we dive into the solution, could you share the real use cases for light and dark shadows? How does it look like between light and dark mode?

Thank you for the reply.

Well, my use case is when using light theme, shadows are like default one, but at the same value (meant like shadows[0]) with dark theme, it should be no shadows.

We used to used this approach like doing:

const theme = createTheme({
  components: {
    MuiPaper: {
      styleOverrides: {
        root: {
          shadow: mode === 'light' ? shadows[0] : shadows[1],
        },
      },
    },
  },
});

[shjacobs303]

I'll add another real use case that is blocking my ability to get rid of dark mode flicker, and I think it's fairly common as the values are a pattern in MUI paid templates.

createTheme({
      colorSchemes: {
        light: {
          palette: light,
          shadows: [
            'none',
            '0 3px 6px 0 rgba(140, 152, 164, 0.25)', 
            '0 12px 15px rgba(140, 152, 164, 0.1)',
            '0 6px 24px 0 rgba(140, 152, 164, 0.125)',
            ...Array(21).fill('0 10px 40px 10px rgba(140, 152, 164, 0.175)'),
          ],
        },
        dark:
        {
          palette: dark,
          shadows: [
            'none',
            '0 3px 6px 0 rgba(0, 0, 0, 0.25)', 
            '0 12px 15px rgba(0, 0, 0, 0.1)',
            '0 6px 24px 0 rgba(0, 0, 0, 0.125)',
            ...Array(21).fill('0 10px 40px 10px rgba(0, 0, 0, 0.175)'),
          ],
        },
      },
     // ...