[system] Introduce mode to CssVarsProvider

[siriwatknp]

Summary

This PR separates mode from colorScheme, so that the application can achieve the upcoming toggle on the Joy page (design link).

The mode will always be day | night | system. The application cannot replace or add more modes. However, they can have unlimited color schemes (light, dark is the default color scheme from the design system).

Primer design system also apply this approach

Changes

Demo: https://deploy-preview-29418--material-ui.netlify.app/joy/

• useColorScheme provide mode and colorScheme.
• developer can control the color scheme in day and night mode separately.
• system mode is implemented
• application can adjust the default mode, default color schemes

  <CssVarsProvider
    theme={{
      colorSchemes: { // light & dark is the default color schemes
        extraLight: {...},
        trueDark: {...},
      }
    }}
    defaultMode="system" // use system mode preference
    defaultColorScheme={{
      day: 'extraLight', // by default `extraLight` will be used in day mode
      night: 'trueDark', // by default `trueDark` will be used in night mode
    }}
  />

---

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

[mui-pr-bot]

Details of bundle changes

@material-ui/system: parsed: +7.36% , gzip: +4.66%

Generated by 🚫 dangerJS against 826cfc3

[siriwatknp]

need to reset the matchMedia, otherwise, it will affect some tests in the project.

[siriwatknp]

This file is for the preview demo. (will be deleted before merging).

[mnajdova]

I really think we should use dark and light instead of day and night.

[mnajdova]

Why do we need this?

[siriwatknp]

To prevent SSR className mismatch because on the server there is no mode | colorScheme. Here is the explanation https://github.com/pacocoursey/next-themes#usetheme

This page is for demo only, will be removed before merging.

[mnajdova]

LGTM 🤘