[docs-infra] Restructure docs theme context to CSS variables

[siriwatknp]

Part of #44534

Preview: https://deploy-preview-45386--material-ui.netlify.app/

This PR aims to fix 2 things:

• The dark mode flicker on component pages
• The toggle speed when switching between light and dark modes

Not possible to split the PR because they are dependent (the _app.js ThemeProvider has to be removed)

Root cause

Dark mode flicker

This is because component (demo) pages are not using CSS variables

Toggle speed

Switching between light and dark mode cause the whole page to rerender.
This is not only about using CSS variables as you can see in the recording below.

The homepage, using CSS variables, still rerender all components because the theme values changes between light and dark modes (the theme.palette.mode value).

This cause component to rerender because all Material UI is built with styled which subscribe to the ThemeContext.

Screen.Recording.2568-02-25.at.16.04.19.mov

Solution

The main changes of this PR are:

• Remove the _app.js ThemeProvider that causes the change between modes and migrate to CSS theme variables within each page.
• Freeze the theme between modes so that most component does not rerender. This is possible with CSS theme variables because both light and dark tokens/styles are created initially without runtime change.

Screen.Recording.2568-02-25.at.16.03.36.mov

Side benefits

• Creating new pages, e.g. a playground, no longer include branding theme.
• Reduced complexity of the docs because Joy UI Wrapper is not needed, thanks to the theme scoping.

---

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

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 459d515

[mnajdova]

Are we sure there are no other styles added on this element? Would id be better to create a style tag with specific id and remove it instead?

[siriwatknp]

Yep, it's a quick approach to test if it works.

[mnajdova]

Have you checked if there are other places where this needs to be done? This AppFrame as far as I know is used only on subset of the pages. (I may be wrong with this assumption)

[siriwatknp]

Yes, I checked. AppFrame only used on demo pages.

[mnajdova]

So it's the plan to add this on the other pages as well directly?

[siriwatknp]

They are all added. Marketing, blog, and API pages already contain BrandingCssVarsProvider.

Might need to adjust the API pages a bit because it's also using AppFrame.