[system] Fix color-scheme implementation

[siriwatknp]

https://deploy-preview-34639--material-ui.netlify.app/

Breaking changes

The enableColorScheme prop has been removed from CssVarsProvider and getInitColorScheme (both Material UI and Joy UI). Migration:

• Material UI: you can enable the CSS color scheme via <CssBaseline enableColorScheme />.

 import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles';

 function App() {
   return (
-    <CssVarsProvider enableColorScheme>
+    <CssVarsProvider>
-      <CssBaseline />
+      <CssBaseline enableColorScheme />
     </CssVarsProvider>
   );
 }

• Joy UI: it is enabled automatically if you use <CssBaseline />, see the docs.

---

Preview:

• Joy: https://codesandbox.io/s/joy-cra-typescript-forked-vhukxn?file=/src/App.tsx
• Material: https://codesandbox.io/s/create-react-app-with-typescript-forked-9wcemh?file=/src/App.tsx
• Material Scoped: https://codesandbox.io/s/create-react-app-with-typescript-forked-0m6fgn?file=/src/App.tsx

Docs:

• https://deploy-preview-34639--material-ui.netlify.app/joy-ui/react-css-baseline/

Motivation

From @oliviertassinari's comment, applying inline color-scheme: light | dark to the html tag creates a global effect for complex application (our website is one of the examples where some pages use CssVarsProvider but some are not).

With the current implementation (inline style), the homepage improvement requires several workarounds to override the inline color-scheme.

To fix this, the color-scheme should be moved to CssBaseline so that

Changes

• Delegate the enableColorScheme flag to CssBaseline.
• Add CssBaseline and ScopedCssBaseline to Joy UI because the enableColorScheme is removed from the CssVarsProvider.

⚠️ Note: This is considered a BREAKING CHANGE for the experimental CssVarsProvider

How it works

The logic lives in CssBaseline which generates style sheets for each color scheme (to prevent flashing) when enabled:

// CssBaseline.tsx
  const colorSchemeStyles = {};
  if (enableColorScheme && theme.colorSchemes) {
    Object.entries(theme.colorSchemes).forEach(([key, scheme]) => {
      colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = {
        colorScheme: scheme.palette?.mode, // each palette must contain the `mode`
      };
    });
  }

For example, if the theme has three color schemes: light, dark, and orange(custom). Each color scheme must contain the mode to be used (either light or dark). Material UI already contains the mode in the default light and dark palette, so this PR does the same for Joy UI.

Developers can configure the mode like this:

extendTheme({
  colorSchemes: {
    light: {
      palette: {
        mode: 'light', // this is `light` by default
      }
    },
    dark: {
      palette: {
        mode: 'dark', // this is `dark` by default
      }
    },
    orange: {
      palette: {
        mode: 'dark', // it could be `light` if the palette has high contrast.
      }
    },
  }
})

Benefits

• Works perfectly with the current Material UI CssBaseline. The existing projects will automatically get the benefits of this.
• Also works with Material UI ScopedCssBaseline.
• More dynamic because the color-scheme is not attached as an inline style anymore, it is in the stylesheet. This work with any element that data-color-scheme="..."

  <div data-joy-color-scheme="dark"> /* the scrollbar color-scheme is dark */

• Reduce the complexity of CssVarsProvider and getInitColorSchemeScript.

Tested that it works well in #33545

Test

Added visual regression to make sure that CssBaseline works for both Material UI and Joy UI. https://app.argos-ci.com/mui/material-ui/builds/5852

---

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

[mui-bot]

Details of bundle changes

@material-ui/system: parsed: -0.54% 😍, gzip: -0.47% 😍
@mui/material-next: parsed: -0.12% 😍, gzip: -0.14% 😍
@mui/joy: parsed: +0.61% , gzip: +0.55%

Generated by 🚫 dangerJS against 1bfdb50

[oliviertassinari]

👍 for the isolation of different React trees that this change brings. From what I understand, we can now natively nest light and dark themes inside the same React tree with Joy UI, as we can with Material UI. I can't think of a better alternative, for example, if we had CssVarsProviders create a div to host the style, then it wouldn't work with the portaled components.

[mnajdova]

Great, I left few small comments. I was missing something like this in my preview for MD3 to be able to see at the same time light & dark mode :)

[mnajdova]

We probably should specify that it is used, this is why we are mentioning it :)

[siriwatknp]

I think it is mentioned to give the reader a clue that it is a similar purpose. I checked normalize.css and we are not using the same global reset.

[mnajdova]

Can you clarify what is this doing?

theme.getColorSchemeSelector(key).replace(/\s*&/, '')

We have it in many places, maybe we should extract the logic?

[siriwatknp]

theme.getColorSchemeSelector(key) returns a string, [data-joy-color-scheme="$key"] &, with an & at the end so that developers can use it to write custom styles in styled or sx like this:

styled('div')(({ theme }) => ({
  [theme.getColorSchemeSelector('dark')]: { ... }
  // easier than writing
  // [`${theme.getColorSchemeSelector('dark')} &`]: { ... }
}))

---

However, the CssBaseline define the selector as global so the .replace(/\s*&/, '') is required to remove & at the end:

theme.getColorSchemeSelector(key).replace(/\s*&/, '') // '[data-joy-color-scheme="dark"]'

I think this case would be rare but I could provide the attribute from the theme to be used like:

[`[${theme.attribute}="dark"]`]: { ... }

[siriwatknp]

Thinking again, I rather go with theme.getColorSchemeSelector(key).replace(/\s*&/, '') for now because I don't want to add a new property to the theme. Let's wait to see how the community would like to use the API.