[website] Fix home page dark mode flicker

[siriwatknp]

Before: https://master--material-ui.netlify.app/
After: https://deploy-preview-33545--material-ui.netlify.app/

Changes

• Most of the changes are refactoring existing styles to support CSS variables

  // example
  // From
  backgroundColor:
    theme.palette.mode === 'dark'
      ? alpha(theme.palette.primaryDark[900], 0.72)
      : 'rgba(255,255,255,0.72)',
      
  // to
  backgroundColor: 'rgba(255,255,255,0.72)',
  ...theme.applyDarkStyles({
    backgroundColor: alpha(theme.palette.primaryDark[900], 0.72)
  })

• Add theme.applyDarkStyles() to docs theme: A utility for creating styles for dark mode. It will check the theme CSS variables and apply the proper styles for dark mode.

  e.g.

  theme.applyDarkStyles({
    color: '#fff'
  })
  
  // Result
  // when there are no CSS variables, fallback to object spread
  ...theme.palette.mode === 'dark' && {
    color: '#fff',
  }
  
  // For CSS variables, it uses data attribute
  ':where([data-muidocs-color-scheme="dark"]) &': {
    color: '#fff',
  }

  use :where() so that it does not create CSS specificity

  This utility is specific to our docs because there are pages that are not wrapped with CssVarsProvider. This way developers (us) don't need to write both syntaxes to apply dark mode styles.

• Wrap the home page with CssVarsProvider and set CSS variable prefix to --muidocs so that it does not interfere with Material UI demos in the future.

• Theme tokens do not change (copy from the existing implementation)

• Workaround for :where() selector. This is an existing issue in emotion (as well as styled-components)

---

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

Part of #15588