[docs-infra] Use CSS vars for API pages

[alexfauquette]

Now you can reload an API page in dark mode without having the light mode blinking
🎉

I modified all the API pages at once because they are generated by a script

• now: https://deploy-preview-41911--material-ui.netlify.app/material-ui/api/accordion-actions/
• before: https://mui.com/material-ui/api/accordion-actions/

Those modification leads to an error message in the API pages but I've no idea about why

Warning: Prop `style` did not match. Server: "--Paper-shadow:var(--muidocs-shadows-4)" Client: "--Paper-shadow:var(--muidocs-shadows-4);--Paper-overlay:linear-gradient(rgba(255 255 255 / 0.092), rgba(255 255 255 / 0.092))"

Can be fixed by this diff, but not sure it's a misusage on our side or an error in the vars support

diff --git a/packages/mui-material/src/Paper/Paper.js b/packages/mui-material/src/Paper/Paper.js
index fbb7d90343..53c63403f7 100644
--- a/packages/mui-material/src/Paper/Paper.js
+++ b/packages/mui-material/src/Paper/Paper.js
@@ -117,7 +117,7 @@ const Paper = React.forwardRef(function Paper(inProps, ref) {
         ...(variant === 'elevation' && {
           '--Paper-shadow': (theme.vars || theme).shadows[elevation],
           ...(theme.vars && {
-            '--Paper-overlay': theme.overlays?.[elevation],
+            '--Paper-overlay': theme.vars.overlays?.[elevation],
           }),
           ...(!theme.vars &&
             theme.palette.mode === 'dark' && {

[mui-bot]

Netlify deploy preview

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

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 0f6ec60

[alexfauquette]

The hook requires to be in a context of a theme with vars otherwise it throws error.
That's the reason why ToggleTheme is split into 2 components:

• On for the CSS var if feasible
• ANother one without useColorScheme(); if theme.vars is not detected

[alexfauquette]

@danilo-leal I did my best to only do technical modifications, but if you can double check the colors

[siriwatknp]

@alexfauquette Have you considered dynamic routes or using getLayout() instead of importing the provider directly to each page?

I don't know much about the differences, that's why I ask.

[aarongarciah]

@alexfauquette @siriwatknp is this PR still relevant?