From 1ccd13c59cee197a101d05eb5249bfcbf7d9ffb4 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 4 Dec 2022 01:36:25 +0100
Subject: [PATCH 1/2] [core] Fix regression broken ad on Joy

---
 docs/src/modules/components/MarkdownDocs.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 5b2acaa07b991f..f9dc8a199378c4 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -65,9 +65,11 @@ export default function MarkdownDocs(props) {
     >
       <Provider>
         {disableAd ? null : (
-          <AdGuest>
-            <Ad />
-          </AdGuest>
+          <Wrapper>
+            <AdGuest>
+              <Ad />
+            </AdGuest>
+          </Wrapper>
         )}
         {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {

From dfaf3163b77551460ac1a0226fba08245e600810 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 4 Dec 2022 01:49:47 +0100
Subject: [PATCH 2/2] alternative solution

---
 docs/pages/_app.js                            |  11 +-
 docs/pages/about.tsx                          |  27 +-
 docs/pages/blog.tsx                           | 399 +++++++++---------
 docs/pages/careers.tsx                        |  29 +-
 docs/pages/components.tsx                     | 129 +++---
 docs/pages/core.tsx                           |  41 +-
 docs/pages/design-kits.tsx                    |  43 +-
 docs/pages/index.tsx                          |  87 ++--
 docs/pages/material-ui.tsx                    | 131 +++---
 docs/pages/pricing.tsx                        |  49 ++-
 docs/pages/templates.tsx                      |  41 +-
 docs/pages/x.tsx                              |  43 +-
 docs/src/BrandingCssVarsProvider.tsx          |   5 +-
 docs/src/BrandingProvider.tsx                 |  25 +-
 .../components/productCore/CoreHeroEnd.tsx    |   7 +-
 docs/src/components/productX/XComponents.tsx  |   8 +-
 .../components/productX/XDateRangeDemo.tsx    |   7 +-
 .../src/components/productX/XGridFullDemo.tsx |   7 +-
 docs/src/components/productX/XRoadmap.tsx     |   7 +-
 .../src/components/productX/XTreeViewDemo.tsx |   8 +-
 docs/src/modules/components/AppFrame.js       |   5 -
 docs/src/modules/components/AppLayoutDocs.js  |  61 +--
 docs/src/modules/components/Demo.js           | 149 +++----
 docs/src/modules/components/DemoSandbox.js    |   5 +-
 docs/src/modules/components/MarkdownDocs.js   |  58 ++-
 .../src/modules/components/MarkdownElement.js |   8 +-
 docs/src/modules/components/ThemeContext.js   |   8 +-
 .../modules/components/TopLayoutCareers.js    |  57 +--
 28 files changed, 735 insertions(+), 720 deletions(-)

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index a16b6291a22945..ce054d8dc98039 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -12,7 +12,6 @@ import systemPages from 'docs/data/system/pages';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
 import { CodeCopyProvider } from 'docs/src/modules/utils/CodeCopy';
-import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { CodeVariantProvider } from 'docs/src/modules/utils/codeVariant';
 import { UserLanguageProvider } from 'docs/src/modules/utils/i18n';
 import DocsStyledEngineProvider from 'docs/src/modules/utils/StyledEngineProvider';
@@ -179,12 +178,10 @@ function AppWrapper(props) {
         <CodeCopyProvider>
           <CodeVariantProvider>
             <PageContext.Provider value={pageContextValue}>
-              <ThemeProvider>
-                <DocsStyledEngineProvider cacheLtr={emotionCache}>
-                  {children}
-                  <GoogleAnalytics />
-                </DocsStyledEngineProvider>
-              </ThemeProvider>
+              <DocsStyledEngineProvider cacheLtr={emotionCache}>
+                {children}
+                <GoogleAnalytics />
+              </DocsStyledEngineProvider>
             </PageContext.Provider>
           </CodeVariantProvider>
         </CodeCopyProvider>
diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx
index 645dbde0469b86..e4546cff4bc606 100644
--- a/docs/pages/about.tsx
+++ b/docs/pages/about.tsx
@@ -25,6 +25,7 @@ import IconImage from 'docs/src/components/icon/IconImage';
 import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
 import PeopleRoundedIcon from '@mui/icons-material/PeopleRounded';
 import LocalAtmRoundedIcon from '@mui/icons-material/LocalAtmRounded';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
@@ -848,17 +849,19 @@ function AboutContent() {
 
 export default function About() {
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="About us - MUI"
-        description="Our mission is to empower anyone to build UIs, faster. We're reducing the entry barrier, making design skills accessible."
-      />
-      <AppHeaderBanner />
-      <AppHeader />
-      <main id="main-content">
-        <AboutContent />
-      </main>
-      <AppFooter />
-    </BrandingCssVarsProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="About us - MUI"
+          description="Our mission is to empower anyone to build UIs, faster. We're reducing the entry barrier, making design skills accessible."
+        />
+        <AppHeaderBanner />
+        <AppHeader />
+        <main id="main-content">
+          <AboutContent />
+        </main>
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx
index 5b0b65ad8c0e12..2697ba91158260 100644
--- a/docs/pages/blog.tsx
+++ b/docs/pages/blog.tsx
@@ -19,6 +19,7 @@ import Head from 'docs/src/modules/components/Head';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import GradientText from 'docs/src/components/typography/GradientText';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import { authors as AUTHORS } from 'docs/src/modules/components/TopLayoutBlog';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
@@ -246,209 +247,219 @@ export default function Blog(props: InferGetStaticPropsType<typeof getStaticProp
     );
   };
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="Blog - MUI"
-        description="Follow the MUI blog to learn about new product features, latest advancements in UI development, and business initiatives."
-        disableAlternateLocale
-      />
-      <AppHeader />
-      <main id="main-content">
-        <Section bg="gradient" sx={{ backgroundSize: '100% 300px', backgroundRepeat: 'no-repeat' }}>
-          <Typography variant="body2" color="primary.600" fontWeight="bold" textAlign="center">
-            Blog
-          </Typography>
-          <Typography component="h1" variant="h2" textAlign="center" sx={{ mb: { xs: 5, md: 10 } }}>
-            The <GradientText>latest</GradientText> about MUI
-          </Typography>
-          <Box
-            component="ul"
-            sx={{
-              display: 'grid',
-              m: 0,
-              p: 0,
-              gap: 2,
-              gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-            }}
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="Blog - MUI"
+          description="Follow the MUI blog to learn about new product features, latest advancements in UI development, and business initiatives."
+          disableAlternateLocale
+        />
+        <AppHeader />
+        <main id="main-content">
+          <Section
+            bg="gradient"
+            sx={{ backgroundSize: '100% 300px', backgroundRepeat: 'no-repeat' }}
           >
-            {[firstPost, secondPost].map((post) => (
-              <Paper
-                key={post.slug}
-                component="li"
-                variant="outlined"
-                sx={[
-                  {
-                    p: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                    transition: 'all ease 120ms',
-                    '&:hover, &:focus-within': {
-                      borderColor: 'grey.300',
-                      boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
-                    },
-                    '&:focus-within': {
-                      '& a': {
-                        outline: 'none',
-                      },
-                    },
-                  },
-                  (theme) =>
-                    theme.applyDarkStyles({
-                      '&:hover, &:focus-within': {
-                        borderColor: 'primary.600',
-                        boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
-                      },
-                    }),
-                ]}
-              >
-                {post.image && (
-                  <Box
-                    component="img"
-                    src={post.image}
-                    sx={{
-                      aspectRatio: '16 / 9',
-                      width: '100%',
-                      height: 'auto',
-                      objectFit: 'cover',
-                      borderRadius: '4px',
-                    }}
-                  />
-                )}
-                <PostPreview {...post} />
-              </Paper>
-            ))}
-          </Box>
-        </Section>
-        <Container
-          ref={postListRef}
-          sx={{
-            mt: -6,
-            display: 'grid',
-            gridTemplateColumns: { md: '1fr 380px' },
-            columnGap: 8,
-          }}
-        >
-          <Typography
-            component="h2"
-            color="text.primary"
-            variant="h5"
-            fontWeight="700"
-            sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
-          >
-            Posts{' '}
-            {Object.keys(selectedTags).length ? (
-              <span>
-                tagged as{' '}
-                <Typography component="span" variant="inherit" color="primary" noWrap>
-                  &quot;{Object.keys(selectedTags)[0]}&quot;
-                </Typography>
-              </span>
-            ) : (
-              ''
-            )}
-          </Typography>
-          <Box sx={{ gridRow: 'span 2' }}>
+            <Typography variant="body2" color="primary.600" fontWeight="bold" textAlign="center">
+              Blog
+            </Typography>
+            <Typography
+              component="h1"
+              variant="h2"
+              textAlign="center"
+              sx={{ mb: { xs: 5, md: 10 } }}
+            >
+              The <GradientText>latest</GradientText> about MUI
+            </Typography>
             <Box
-              sx={(theme) => ({
-                position: 'sticky',
-                top: 100,
-                alignSelf: 'start',
-                mb: 2,
-                mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view
-                p: 2,
-                borderRadius: 1,
-                border: '1px solid',
-                background: 'rgba(255, 255, 255, 0.2)',
-                borderColor: (theme.vars || theme).palette.grey[200],
-                ...theme.applyDarkStyles({
-                  background: alpha(theme.palette.primaryDark[700], 0.2),
-                  borderColor: (theme.vars || theme).palette.primaryDark[700],
-                }),
-              })}
+              component="ul"
+              sx={{
+                display: 'grid',
+                m: 0,
+                p: 0,
+                gap: 2,
+                gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+              }}
             >
-              <Typography color="text.primary" fontWeight="500" sx={{ mb: 2 }}>
-                Filter by tag
-              </Typography>
-              <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
-                {Object.keys(tagInfo).map((tag) => {
-                  const selected = !!selectedTags[tag];
-                  return (
-                    <Chip
-                      key={tag}
-                      variant={selected ? 'filled' : 'outlined'}
-                      {...(selected
-                        ? {
-                            label: tag,
-                            onDelete: () => {
-                              postListRef.current?.scrollIntoView();
-                              removeTag(tag);
-                            },
-                          }
-                        : {
-                            label: tag,
-                            onClick: () => {
-                              postListRef.current?.scrollIntoView();
-                              router.push(
-                                {
-                                  query: {
-                                    ...router.query,
-                                    tags: tag,
-                                  },
-                                },
-                                undefined,
-                                { shallow: true },
-                              );
-                            },
-                          })}
-                      size="small"
+              {[firstPost, secondPost].map((post) => (
+                <Paper
+                  key={post.slug}
+                  component="li"
+                  variant="outlined"
+                  sx={[
+                    {
+                      p: 2,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      position: 'relative',
+                      transition: 'all ease 120ms',
+                      '&:hover, &:focus-within': {
+                        borderColor: 'grey.300',
+                        boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
+                      },
+                      '&:focus-within': {
+                        '& a': {
+                          outline: 'none',
+                        },
+                      },
+                    },
+                    (theme) =>
+                      theme.applyDarkStyles({
+                        '&:hover, &:focus-within': {
+                          borderColor: 'primary.600',
+                          boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+                        },
+                      }),
+                  ]}
+                >
+                  {post.image && (
+                    <Box
+                      component="img"
+                      src={post.image}
                       sx={{
-                        py: 1.2,
+                        aspectRatio: '16 / 9',
+                        width: '100%',
+                        height: 'auto',
+                        objectFit: 'cover',
+                        borderRadius: '4px',
                       }}
                     />
-                  );
-                })}
-              </Box>
+                  )}
+                  <PostPreview {...post} />
+                </Paper>
+              ))}
             </Box>
-          </Box>
-          <Box>
-            <Box component="ul" sx={{ p: 0, m: 0 }}>
-              {displayedPosts.map((post) => (
-                <Box
-                  component="li"
-                  key={post.slug}
-                  sx={() => ({
-                    py: 2.5,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                    '&:not(:last-of-type)': {
-                      borderBottom: '1px solid',
-                      borderColor: 'divider',
-                    },
+          </Section>
+          <Container
+            ref={postListRef}
+            sx={{
+              mt: -6,
+              display: 'grid',
+              gridTemplateColumns: { md: '1fr 380px' },
+              columnGap: 8,
+            }}
+          >
+            <Typography
+              component="h2"
+              color="text.primary"
+              variant="h5"
+              fontWeight="700"
+              sx={{ mb: { xs: 1, sm: 2 }, mt: 8 }} // margin-top makes the title appear when scroll into view
+            >
+              Posts{' '}
+              {Object.keys(selectedTags).length ? (
+                <span>
+                  tagged as{' '}
+                  <Typography component="span" variant="inherit" color="primary" noWrap>
+                    &quot;{Object.keys(selectedTags)[0]}&quot;
+                  </Typography>
+                </span>
+              ) : (
+                ''
+              )}
+            </Typography>
+            <Box sx={{ gridRow: 'span 2' }}>
+              <Box
+                sx={(theme) => ({
+                  position: 'sticky',
+                  top: 100,
+                  alignSelf: 'start',
+                  mb: 2,
+                  mt: { xs: 3, sm: 2, md: 9 }, // margin-top makes the title appear when scroll into view
+                  p: 2,
+                  borderRadius: 1,
+                  border: '1px solid',
+                  background: 'rgba(255, 255, 255, 0.2)',
+                  borderColor: (theme.vars || theme).palette.grey[200],
+                  ...theme.applyDarkStyles({
+                    background: alpha(theme.palette.primaryDark[700], 0.2),
+                    borderColor: (theme.vars || theme).palette.primaryDark[700],
+                  }),
+                })}
+              >
+                <Typography color="text.primary" fontWeight="500" sx={{ mb: 2 }}>
+                  Filter by tag
+                </Typography>
+                <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                  {Object.keys(tagInfo).map((tag) => {
+                    const selected = !!selectedTags[tag];
+                    return (
+                      <Chip
+                        key={tag}
+                        variant={selected ? 'filled' : 'outlined'}
+                        {...(selected
+                          ? {
+                              label: tag,
+                              onDelete: () => {
+                                postListRef.current?.scrollIntoView();
+                                removeTag(tag);
+                              },
+                            }
+                          : {
+                              label: tag,
+                              onClick: () => {
+                                postListRef.current?.scrollIntoView();
+                                router.push(
+                                  {
+                                    query: {
+                                      ...router.query,
+                                      tags: tag,
+                                    },
+                                  },
+                                  undefined,
+                                  { shallow: true },
+                                );
+                              },
+                            })}
+                        size="small"
+                        sx={{
+                          py: 1.2,
+                        }}
+                      />
+                    );
                   })}
-                >
-                  <PostPreview {...post} />
                 </Box>
-              ))}
+              </Box>
             </Box>
-            <Pagination
-              page={page + 1}
-              count={totalPage}
-              variant="outlined"
-              shape="rounded"
-              onChange={(_, value) => {
-                setPage(value - 1);
-                postListRef.current?.scrollIntoView();
-              }}
-              sx={{ mt: 1, mb: 8 }}
-            />
-          </Box>
-        </Container>
-      </main>
-      <HeroEnd />
-      <Divider />
-      <AppFooter />
-    </BrandingCssVarsProvider>
+            <Box>
+              <Box component="ul" sx={{ p: 0, m: 0 }}>
+                {displayedPosts.map((post) => (
+                  <Box
+                    component="li"
+                    key={post.slug}
+                    sx={() => ({
+                      py: 2.5,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      position: 'relative',
+                      '&:not(:last-of-type)': {
+                        borderBottom: '1px solid',
+                        borderColor: 'divider',
+                      },
+                    })}
+                  >
+                    <PostPreview {...post} />
+                  </Box>
+                ))}
+              </Box>
+              <Pagination
+                page={page + 1}
+                count={totalPage}
+                variant="outlined"
+                shape="rounded"
+                onChange={(_, value) => {
+                  setPage(value - 1);
+                  postListRef.current?.scrollIntoView();
+                }}
+                sx={{ mt: 1, mb: 8 }}
+              />
+            </Box>
+          </Container>
+        </main>
+        <HeroEnd />
+        <Divider />
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx
index fe55bcd22575f8..a8d15cb7fb7744 100644
--- a/docs/pages/careers.tsx
+++ b/docs/pages/careers.tsx
@@ -17,6 +17,7 @@ import AppFooter from 'docs/src/layouts/AppFooter';
 import MuiStatistics from 'docs/src/components/home/MuiStatistics';
 import GradientText from 'docs/src/components/typography/GradientText';
 import IconImage from 'docs/src/components/icon/IconImage';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import MuiAccordion from '@mui/material/Accordion';
 import MuiAccordionSummary from '@mui/material/AccordionSummary';
@@ -591,18 +592,20 @@ function CareersContent() {
 
 export default function Careers() {
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="Careers - MUI"
-        description="Interested in joining MUI? Learn about the roles we're hiring for."
-      />
-      <AppHeaderBanner />
-      <AppHeader />
-      <main id="main-content">
-        <CareersContent />
-      </main>
-      <Divider />
-      <AppFooter />
-    </BrandingCssVarsProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="Careers - MUI"
+          description="Interested in joining MUI? Learn about the roles we're hiring for."
+        />
+        <AppHeaderBanner />
+        <AppHeader />
+        <main id="main-content">
+          <CareersContent />
+        </main>
+        <Divider />
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/components.tsx b/docs/pages/components.tsx
index 3e9045ae057a6a..9f9422acd7062a 100644
--- a/docs/pages/components.tsx
+++ b/docs/pages/components.tsx
@@ -9,7 +9,8 @@ import Divider from '@mui/material/Divider';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import Section from 'docs/src/layouts/Section';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
@@ -50,67 +51,69 @@ export default function Components() {
     );
   }
   return (
-    <BrandingProvider>
-      <Head
-        title="Components - MUI"
-        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster."
-      />
-      <AppHeader />
-      <main id="main-content">
-        <Section bg="gradient" sx={{ py: { xs: 2, sm: 4 } }}>
-          <Typography component="h1" variant="h2" sx={{ mb: 4, pl: 1 }}>
-            All Components
-          </Typography>
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-            }}
-          >
-            {(componentPageData?.children || []).map((page) => (
-              <Box key={page.pathname} sx={{ pb: 2 }}>
-                <Typography
-                  component="h2"
-                  variant="body2"
-                  sx={{
-                    fontWeight: 500,
-                    color: 'grey.600',
-                    px: 1,
-                  }}
-                >
-                  {pageToTitleI18n(page, t)}
-                </Typography>
-                <List>
-                  {(page.children || []).map((nestedPage) => {
-                    if (nestedPage.children) {
-                      return (
-                        <ListItem key={nestedPage.pathname} sx={{ py: 0, px: 1 }}>
-                          <Box sx={{ width: '100%', pt: 1 }}>
-                            <Typography
-                              component="div"
-                              variant="body2"
-                              sx={{
-                                fontWeight: 500,
-                                color: 'grey.600',
-                              }}
-                            >
-                              {pageToTitleI18n(nestedPage, t) || ''}
-                            </Typography>
-                            <List>{nestedPage.children.map(renderItem)}</List>
-                          </Box>
-                        </ListItem>
-                      );
-                    }
-                    return renderItem(nestedPage);
-                  })}
-                </List>
-              </Box>
-            ))}
-          </Box>
-        </Section>
-      </main>
-      <Divider />
-      <AppFooter />
-    </BrandingProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="Components - MUI"
+          description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications faster."
+        />
+        <AppHeader />
+        <main id="main-content">
+          <Section bg="gradient" sx={{ py: { xs: 2, sm: 4 } }}>
+            <Typography component="h1" variant="h2" sx={{ mb: 4, pl: 1 }}>
+              All Components
+            </Typography>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+              }}
+            >
+              {(componentPageData?.children || []).map((page) => (
+                <Box key={page.pathname} sx={{ pb: 2 }}>
+                  <Typography
+                    component="h2"
+                    variant="body2"
+                    sx={{
+                      fontWeight: 500,
+                      color: 'grey.600',
+                      px: 1,
+                    }}
+                  >
+                    {pageToTitleI18n(page, t)}
+                  </Typography>
+                  <List>
+                    {(page.children || []).map((nestedPage) => {
+                      if (nestedPage.children) {
+                        return (
+                          <ListItem key={nestedPage.pathname} sx={{ py: 0, px: 1 }}>
+                            <Box sx={{ width: '100%', pt: 1 }}>
+                              <Typography
+                                component="div"
+                                variant="body2"
+                                sx={{
+                                  fontWeight: 500,
+                                  color: 'grey.600',
+                                }}
+                              >
+                                {pageToTitleI18n(nestedPage, t) || ''}
+                              </Typography>
+                              <List>{nestedPage.children.map(renderItem)}</List>
+                            </Box>
+                          </ListItem>
+                        );
+                      }
+                      return renderItem(nestedPage);
+                    })}
+                  </List>
+                </Box>
+              ))}
+            </Box>
+          </Section>
+        </main>
+        <Divider />
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx
index 5948f0dbaef11a..0c8d309ff944dc 100644
--- a/docs/pages/core.tsx
+++ b/docs/pages/core.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import CoreHero from 'docs/src/components/productCore/CoreHero';
 import CoreComponents from 'docs/src/components/productCore/CoreComponents';
@@ -13,23 +14,25 @@ import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Core() {
   return (
-    <BrandingProvider>
-      <Head
-        title="MUI Core: Ready to use components, free forever"
-        description="Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind."
-        card="/static/social-previews/core-preview.jpg"
-      />
-      <AppHeaderBanner />
-      <AppHeader gitHubRepository="https://github.com/mui/material-ui" />
-      <main id="main-content">
-        <CoreHero />
-        <References companies={CORE_CUSTOMERS} />
-        <CoreComponents />
-        <CoreTheming />
-        <CoreStyling />
-        <CoreHeroEnd />
-      </main>
-      <AppFooter />
-    </BrandingProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="MUI Core: Ready to use components, free forever"
+          description="Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind."
+          card="/static/social-previews/core-preview.jpg"
+        />
+        <AppHeaderBanner />
+        <AppHeader gitHubRepository="https://github.com/mui/material-ui" />
+        <main id="main-content">
+          <CoreHero />
+          <References companies={CORE_CUSTOMERS} />
+          <CoreComponents />
+          <CoreTheming />
+          <CoreStyling />
+          <CoreHeroEnd />
+        </main>
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx
index 6931105d34d36b..bf505bdf52b6df 100644
--- a/docs/pages/design-kits.tsx
+++ b/docs/pages/design-kits.tsx
@@ -9,31 +9,34 @@ import DesignKitDemo from 'docs/src/components/productDesignKit/DesignKitDemo';
 import DesignKitFAQ from 'docs/src/components/productDesignKit/DesignKitFAQ';
 import Testimonials from 'docs/src/components/home/Testimonials';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import References, { DESIGNKITS_CUSTOMERS } from 'docs/src/components/home/References';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function DesignKits() {
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="MUI in your favorite design tool"
-        description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
-        card="/static/social-previews/designkits-preview.jpg"
-      />
-      <AppHeaderBanner />
-      <AppHeader gitHubRepository="https://github.com/mui/mui-design-kits" />
-      <main id="main-content">
-        <DesignKitHero />
-        <References companies={DESIGNKITS_CUSTOMERS} />
-        <DesignKitValues />
-        <DesignKitDemo />
-        <DesignKitFAQ />
-        <Testimonials />
-        <HeroEnd />
-      </main>
-      <Divider />
-      <AppFooter />
-    </BrandingCssVarsProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="MUI in your favorite design tool"
+          description="Pick your favorite design tool to enjoy and use MUI components. Boost consistency and facilitate communication when working with developers."
+          card="/static/social-previews/designkits-preview.jpg"
+        />
+        <AppHeaderBanner />
+        <AppHeader gitHubRepository="https://github.com/mui/mui-design-kits" />
+        <main id="main-content">
+          <DesignKitHero />
+          <References companies={DESIGNKITS_CUSTOMERS} />
+          <DesignKitValues />
+          <DesignKitDemo />
+          <DesignKitFAQ />
+          <Testimonials />
+          <HeroEnd />
+        </main>
+        <Divider />
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index 498cffac6346ec..45bc3cef980f25 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -12,53 +12,56 @@ import Testimonials from 'docs/src/components/home/Testimonials';
 import Sponsors from 'docs/src/components/home/Sponsors';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import NewsletterToast from 'docs/src/components/home/NewsletterToast';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Home() {
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="MUI: The React component library you always wanted"
-        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
-      >
-        <script
-          type="application/ld+json"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify({
-              '@context': 'https://schema.org',
-              '@type': 'Organization',
-              name: 'MUI',
-              url: 'https://mui.com/',
-              logo: 'https://mui.com/static/logo.png',
-              sameAs: [
-                'https://twitter.com/MUI_hq',
-                'https://github.com/mui/',
-                'https://opencollective.com/mui',
-              ],
-            }),
-          }}
-        />
-      </Head>
-      <NoSsr>
-        <NewsletterToast />
-      </NoSsr>
-      <AppHeaderBanner />
-      <AppHeader />
-      <main id="main-content">
-        <Hero />
-        <References companies={CORE_CUSTOMERS} />
-        <ProductSuite />
-        <ValueProposition />
-        <DesignSystemComponents />
-        <Testimonials />
-        <Sponsors />
-        <HeroEnd />
-        <Divider />
-      </main>
-      <AppFooter />
-    </BrandingCssVarsProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="MUI: The React component library you always wanted"
+          description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
+        >
+          <script
+            type="application/ld+json"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify({
+                '@context': 'https://schema.org',
+                '@type': 'Organization',
+                name: 'MUI',
+                url: 'https://mui.com/',
+                logo: 'https://mui.com/static/logo.png',
+                sameAs: [
+                  'https://twitter.com/MUI_hq',
+                  'https://github.com/mui/',
+                  'https://opencollective.com/mui',
+                ],
+              }),
+            }}
+          />
+        </Head>
+        <NoSsr>
+          <NewsletterToast />
+        </NoSsr>
+        <AppHeaderBanner />
+        <AppHeader />
+        <main id="main-content">
+          <Hero />
+          <References companies={CORE_CUSTOMERS} />
+          <ProductSuite />
+          <ValueProposition />
+          <DesignSystemComponents />
+          <Testimonials />
+          <Sponsors />
+          <HeroEnd />
+          <Divider />
+        </main>
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/material-ui.tsx b/docs/pages/material-ui.tsx
index ebe306fd5507b4..c74e47ab8ba697 100644
--- a/docs/pages/material-ui.tsx
+++ b/docs/pages/material-ui.tsx
@@ -9,7 +9,8 @@ import Divider from '@mui/material/Divider';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import AppFooter from 'docs/src/layouts/AppFooter';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import Section from 'docs/src/layouts/Section';
 import { pageToTitleI18n } from 'docs/src/modules/utils/helpers';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
@@ -52,68 +53,70 @@ export default function Components() {
     );
   }
   return (
-    <BrandingProvider>
-      <Head
-        title="React Components - Material UI"
-        description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
-      />
-      <AppHeader />
-      <main id="main-content">
-        <Section bg="gradient" sx={{ py: { xs: 2, sm: 4 } }}>
-          <Typography component="h1" variant="h2" sx={{ mb: 4, pl: 1 }}>
-            All Components
-          </Typography>
-          <Box
-            sx={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-            }}
-          >
-            {(componentPageData?.children || []).map((page: MuiPage) => (
-              <Box key={page.pathname} sx={{ pb: 2 }}>
-                <Typography
-                  component="h2"
-                  variant="body2"
-                  sx={{
-                    fontWeight: 500,
-                    color: 'grey.600',
-                    px: 1,
-                  }}
-                >
-                  {pageToTitleI18n(page, t)}
-                </Typography>
-                <List>
-                  {!page.children?.length && renderItem(page)}
-                  {(page.children || []).map((nestedPage) => {
-                    if (nestedPage.children) {
-                      return (
-                        <ListItem key={nestedPage.pathname} sx={{ py: 0, px: 1 }}>
-                          <Box sx={{ width: '100%', pt: 1 }}>
-                            <Typography
-                              component="div"
-                              variant="body2"
-                              sx={{
-                                fontWeight: 500,
-                                color: 'grey.600',
-                              }}
-                            >
-                              {pageToTitleI18n(nestedPage, t) || ''}
-                            </Typography>
-                            <List>{nestedPage.children.map(renderItem)}</List>
-                          </Box>
-                        </ListItem>
-                      );
-                    }
-                    return renderItem(nestedPage);
-                  })}
-                </List>
-              </Box>
-            ))}
-          </Box>
-        </Section>
-      </main>
-      <Divider />
-      <AppFooter />
-    </BrandingProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="React Components - Material UI"
+          description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
+        />
+        <AppHeader />
+        <main id="main-content">
+          <Section bg="gradient" sx={{ py: { xs: 2, sm: 4 } }}>
+            <Typography component="h1" variant="h2" sx={{ mb: 4, pl: 1 }}>
+              All Components
+            </Typography>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+              }}
+            >
+              {(componentPageData?.children || []).map((page: MuiPage) => (
+                <Box key={page.pathname} sx={{ pb: 2 }}>
+                  <Typography
+                    component="h2"
+                    variant="body2"
+                    sx={{
+                      fontWeight: 500,
+                      color: 'grey.600',
+                      px: 1,
+                    }}
+                  >
+                    {pageToTitleI18n(page, t)}
+                  </Typography>
+                  <List>
+                    {!page.children?.length && renderItem(page)}
+                    {(page.children || []).map((nestedPage) => {
+                      if (nestedPage.children) {
+                        return (
+                          <ListItem key={nestedPage.pathname} sx={{ py: 0, px: 1 }}>
+                            <Box sx={{ width: '100%', pt: 1 }}>
+                              <Typography
+                                component="div"
+                                variant="body2"
+                                sx={{
+                                  fontWeight: 500,
+                                  color: 'grey.600',
+                                }}
+                              >
+                                {pageToTitleI18n(nestedPage, t) || ''}
+                              </Typography>
+                              <List>{nestedPage.children.map(renderItem)}</List>
+                            </Box>
+                          </ListItem>
+                        );
+                      }
+                      return renderItem(nestedPage);
+                    })}
+                  </List>
+                </Box>
+              ))}
+            </Box>
+          </Section>
+        </main>
+        <Divider />
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx
index 240b7d15ef391e..09cb48d4d43f1f 100644
--- a/docs/pages/pricing.tsx
+++ b/docs/pages/pricing.tsx
@@ -12,33 +12,36 @@ import WhatToExpect from 'docs/src/components/pricing/WhatToExpect';
 import FAQ from 'docs/src/components/pricing/FAQ';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import AppFooter from 'docs/src/layouts/AppFooter';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Pricing() {
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="Pricing - MUI"
-        description="The community edition lets you get going right away. Switch to a commercial plan for more components & technical support."
-      />
-      <AppHeaderBanner />
-      <AppHeader />
-      <main id="main-content">
-        <HeroPricing />
-        <PricingList /> {/* Mobile, Tablet */}
-        <Container sx={{ display: { xs: 'none', md: 'block' } }}>
-          <PricingTable /> {/* Desktop */}
-        </Container>
-        <EarlyBird />
-        <Testimonials />
-        <WhatToExpect />
-        <Divider sx={{ mx: 'auto', maxWidth: 1200 }} />
-        <FAQ />
-        <HeroEnd />
-        <Divider />
-      </main>
-      <AppFooter />
-    </BrandingCssVarsProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="Pricing - MUI"
+          description="The community edition lets you get going right away. Switch to a commercial plan for more components & technical support."
+        />
+        <AppHeaderBanner />
+        <AppHeader />
+        <main id="main-content">
+          <HeroPricing />
+          <PricingList /> {/* Mobile, Tablet */}
+          <Container sx={{ display: { xs: 'none', md: 'block' } }}>
+            <PricingTable /> {/* Desktop */}
+          </Container>
+          <EarlyBird />
+          <Testimonials />
+          <WhatToExpect />
+          <Divider sx={{ mx: 'auto', maxWidth: 1200 }} />
+          <FAQ />
+          <HeroEnd />
+          <Divider />
+        </main>
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/templates.tsx b/docs/pages/templates.tsx
index c6e3d0543efde7..5ebd4e8d85e5f6 100644
--- a/docs/pages/templates.tsx
+++ b/docs/pages/templates.tsx
@@ -9,29 +9,32 @@ import TemplateDemo from 'docs/src/components/productTemplate/TemplateDemo';
 import Testimonials from 'docs/src/components/home/Testimonials';
 import HeroEnd from 'docs/src/components/home/HeroEnd';
 import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import References, { TEMPLATES_CUSTOMERS } from 'docs/src/components/home/References';
 import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function Templates() {
   return (
-    <BrandingCssVarsProvider>
-      <Head
-        title="Fully built templates for your app - MUI"
-        description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
-        card="/static/social-previews/templates-preview.jpg"
-      />
-      <AppHeaderBanner />
-      <AppHeader />
-      <main id="main-content">
-        <TemplateHero />
-        <References companies={TEMPLATES_CUSTOMERS} />
-        <ValueProposition />
-        <TemplateDemo />
-        <Testimonials />
-        <HeroEnd />
-      </main>
-      <Divider />
-      <AppFooter />
-    </BrandingCssVarsProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="Fully built templates for your app - MUI"
+          description="A collection of 4.5 average rating templates, selected and curated by MUI's team of maintainers to get your projects up and running today."
+          card="/static/social-previews/templates-preview.jpg"
+        />
+        <AppHeaderBanner />
+        <AppHeader />
+        <main id="main-content">
+          <TemplateHero />
+          <References companies={TEMPLATES_CUSTOMERS} />
+          <ValueProposition />
+          <TemplateDemo />
+          <Testimonials />
+          <HeroEnd />
+        </main>
+        <Divider />
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx
index 51f0a6f1334408..337dcc1bcc77cf 100644
--- a/docs/pages/x.tsx
+++ b/docs/pages/x.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Head from 'docs/src/modules/components/Head';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import AppHeader from 'docs/src/layouts/AppHeader';
 import XHero from 'docs/src/components/productX/XHero';
 import XComponents from 'docs/src/components/productX/XComponents';
@@ -14,24 +15,26 @@ import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner';
 
 export default function X() {
   return (
-    <BrandingProvider>
-      <Head
-        title="MUI X: Performant advanced components"
-        description="Build data-rich applications using a growing list of advanced React components. We're kicking it off with the most powerful Data Grid on the market."
-        card="/static/social-previews/x-preview.jpg"
-      />
-      <AppHeaderBanner />
-      <AppHeader gitHubRepository="https://github.com/mui/mui-x" />
-      <main id="main-content">
-        <XHero />
-        <References companies={ADVANCED_CUSTOMERS} />
-        <XComponents />
-        <XDataGrid />
-        <XTheming />
-        <XPlans />
-        <XRoadmap />
-      </main>
-      <AppFooter />
-    </BrandingProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <Head
+          title="MUI X: Performant advanced components"
+          description="Build data-rich applications using a growing list of advanced React components. We're kicking it off with the most powerful Data Grid on the market."
+          card="/static/social-previews/x-preview.jpg"
+        />
+        <AppHeaderBanner />
+        <AppHeader gitHubRepository="https://github.com/mui/mui-x" />
+        <main id="main-content">
+          <XHero />
+          <References companies={ADVANCED_CUSTOMERS} />
+          <XComponents />
+          <XDataGrid />
+          <XTheming />
+          <XPlans />
+          <XRoadmap />
+        </main>
+        <AppFooter />
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
index 110267144b9a58..57fb05aa1e55cf 100644
--- a/docs/src/BrandingCssVarsProvider.tsx
+++ b/docs/src/BrandingCssVarsProvider.tsx
@@ -8,6 +8,7 @@ import {
 import CssBaseline from '@mui/material/CssBaseline';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+import SkipLink from 'docs/src/modules/components/SkipLink';
 
 declare module '@mui/material/styles' {
   interface PaletteOptions {
@@ -49,11 +50,13 @@ const theme = extendTheme({
   ...getThemedComponents(),
 });
 
-export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) {
+export default function BrandingCssVarsProvider(props: { children: React.ReactNode }) {
+  const { children } = props;
   return (
     <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange>
       <NextNProgressBar />
       <CssBaseline />
+      <SkipLink />
       {children}
     </CssVarsProvider>
   );
diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
index fec67179e39338..62fe118d9ceba3 100644
--- a/docs/src/BrandingProvider.tsx
+++ b/docs/src/BrandingProvider.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
-import { brandingDarkTheme, brandingLightTheme } from 'docs/src/modules/brandingTheme';
+import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
 import SkipLink from 'docs/src/modules/components/SkipLink';
 
@@ -14,16 +14,19 @@ interface BrandingProviderProps {
 }
 
 export default function BrandingProvider(props: BrandingProviderProps) {
-  const { children, mode: modeProp } = props;
-  const upperTheme = useTheme();
-  const mode = modeProp || upperTheme.palette.mode;
-  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
+  const { children, mode } = props;
+
+  if (mode === 'dark') {
+    return <ThemeProvider theme={() => brandingDarkTheme}>{children}</ThemeProvider>;
+  }
+
+  // TODO replace this with
   return (
-    <ThemeProvider theme={modeProp ? () => theme : theme}>
-      {modeProp ? null : <NextNProgressBar />}
-      {modeProp ? null : <CssBaseline />}
-      {modeProp ? null : <SkipLink />}
+    <React.Fragment>
+      <NextNProgressBar />
+      <CssBaseline />
+      <SkipLink />
       {children}
-    </ThemeProvider>
+    </React.Fragment>
   );
 }
diff --git a/docs/src/components/productCore/CoreHeroEnd.tsx b/docs/src/components/productCore/CoreHeroEnd.tsx
index 5b357ab6595a68..4ae8f42fb7c4b5 100644
--- a/docs/src/components/productCore/CoreHeroEnd.tsx
+++ b/docs/src/components/productCore/CoreHeroEnd.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ThemeProvider } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
@@ -9,11 +8,11 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 import MuiStatistics from 'docs/src/components/home/MuiStatistics';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 export default function CoreHeroEnd() {
   return (
-    <ThemeProvider theme={brandingDarkTheme}>
+    <BrandingProvider mode="dark">
       <Section bg="dim">
         <Box>
           <Grid container spacing={2} alignItems="center">
@@ -42,6 +41,6 @@ export default function CoreHeroEnd() {
           </Grid>
         </Box>
       </Section>
-    </ThemeProvider>
+    </BrandingProvider>
   );
 }
diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx
index bb0d96379d8e77..c38edba8bd58fd 100644
--- a/docs/src/components/productX/XComponents.tsx
+++ b/docs/src/components/productX/XComponents.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shouldForwardProp } from '@mui/system';
-import { ThemeProvider, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Grid from '@mui/material/Grid';
@@ -24,7 +24,7 @@ import ROUTES from 'docs/src/route';
 import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
 import Frame from 'docs/src/components/action/Frame';
 import IconImage from 'docs/src/components/icon/IconImage';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 const DEMOS = ['Data Grid', 'Date Range Picker', 'Tree View', 'Sparkline', 'Charts'];
 const WIP = DEMOS.slice(2);
@@ -199,7 +199,7 @@ export default function XComponents() {
                       </Grid>
                     )}
                   </Frame.Demo>
-                  <ThemeProvider theme={brandingDarkTheme}>
+                  <BrandingProvider mode="dark">
                     <Frame.Info>
                       <Box
                         sx={{
@@ -225,7 +225,7 @@ export default function XComponents() {
                       </Typography>
                       <EmailSubscribe />
                     </Frame.Info>
-                  </ThemeProvider>
+                  </BrandingProvider>
                 </Frame>
               </Box>
             </Fade>
diff --git a/docs/src/components/productX/XDateRangeDemo.tsx b/docs/src/components/productX/XDateRangeDemo.tsx
index 785d655b2ff7de..8aeb2bf2cae31b 100644
--- a/docs/src/components/productX/XDateRangeDemo.tsx
+++ b/docs/src/components/productX/XDateRangeDemo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ThemeProvider } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Chip from '@mui/material/Chip';
 import Paper from '@mui/material/Paper';
@@ -10,7 +9,7 @@ import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePi
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import Frame from 'docs/src/components/action/Frame';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 const startDate = new Date();
 startDate.setDate(10);
@@ -76,7 +75,7 @@ export default function XDateRangeDemo() {
           </LocalizationProvider>
         </Paper>
       </Frame.Demo>
-      <ThemeProvider theme={brandingDarkTheme}>
+      <BrandingProvider mode="dark">
         <Frame.Info>
           <Box
             sx={{
@@ -98,7 +97,7 @@ export default function XDateRangeDemo() {
             />
           </Box>
         </Frame.Info>
-      </ThemeProvider>
+      </BrandingProvider>
     </Frame>
   );
 }
diff --git a/docs/src/components/productX/XGridFullDemo.tsx b/docs/src/components/productX/XGridFullDemo.tsx
index 6387c601833e94..b317bee5da1b22 100644
--- a/docs/src/components/productX/XGridFullDemo.tsx
+++ b/docs/src/components/productX/XGridFullDemo.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridPro, GridToolbar } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import { ThemeProvider } from '@mui/material/styles';
+import BrandingProvider from 'docs/src/BrandingProvider';
 import FormControl from '@mui/material/FormControl';
 import FormGroup from '@mui/material/FormGroup';
 import Button from '@mui/material/Button';
@@ -10,7 +10,6 @@ import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import Frame from 'docs/src/components/action/Frame';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 import XGridGlobalStyles from 'docs/src/components/home/XGridGlobalStyles';
 
 const dataGridStyleOverrides = <XGridGlobalStyles selector="#data-grid-full" pro />;
@@ -213,11 +212,11 @@ export default function XGridFullDemo() {
           />
         </Paper>
       </Frame.Demo>
-      <ThemeProvider theme={brandingDarkTheme}>
+      <BrandingProvider mode="dark">
         <Frame.Info sx={{ p: 1 }}>
           <SettingsPanel onApply={handleApplyClick} size={size} type={type} />
         </Frame.Info>
-      </ThemeProvider>
+      </BrandingProvider>
     </Frame>
   );
 }
diff --git a/docs/src/components/productX/XRoadmap.tsx b/docs/src/components/productX/XRoadmap.tsx
index 9b86fe0cb838c8..8f24f92fb2a871 100644
--- a/docs/src/components/productX/XRoadmap.tsx
+++ b/docs/src/components/productX/XRoadmap.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ThemeProvider } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
@@ -9,7 +8,7 @@ import Section from 'docs/src/layouts/Section';
 import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import BrandingProvider from 'docs/src/BrandingProvider';
 import TableChartRounded from '@mui/icons-material/TableChartRounded';
 import DateRangeRounded from '@mui/icons-material/DateRangeRounded';
 import AccountTreeRounded from '@mui/icons-material/AccountTreeRounded';
@@ -75,7 +74,7 @@ export default function XRoadmap() {
     />
   );
   return (
-    <ThemeProvider theme={brandingDarkTheme}>
+    <BrandingProvider mode="dark">
       <Section bg="dim">
         <Box>
           <Grid container spacing={2} alignItems="center" justifyContent="space-between">
@@ -184,6 +183,6 @@ export default function XRoadmap() {
           </Grid>
         </Box>
       </Section>
-    </ThemeProvider>
+    </BrandingProvider>
   );
 }
diff --git a/docs/src/components/productX/XTreeViewDemo.tsx b/docs/src/components/productX/XTreeViewDemo.tsx
index 22be41646dd823..8ab1d65ee8f5c9 100644
--- a/docs/src/components/productX/XTreeViewDemo.tsx
+++ b/docs/src/components/productX/XTreeViewDemo.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { ThemeProvider, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import TreeView from '@mui/lab/TreeView';
@@ -15,7 +15,7 @@ import PictureAsPdfOutlined from '@mui/icons-material/PictureAsPdfOutlined';
 import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
 import FourKOutlined from '@mui/icons-material/FourKOutlined';
 import Frame from 'docs/src/components/action/Frame';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
+import BrandingProvider from 'docs/src/BrandingProvider';
 import Chip from '@mui/material/Chip';
 import EmailSubscribe from 'docs/src/components/footer/EmailSubscribe';
 
@@ -271,7 +271,7 @@ export default function XDateRangeDemo() {
           </TreeView>
         </Paper>
       </Frame.Demo>
-      <ThemeProvider theme={brandingDarkTheme}>
+      <BrandingProvider mode="dark">
         <Frame.Info>
           <Box
             sx={{
@@ -297,7 +297,7 @@ export default function XDateRangeDemo() {
           </Typography>
           <EmailSubscribe />
         </Frame.Info>
-      </ThemeProvider>
+      </BrandingProvider>
     </Frame>
   );
 }
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
index 7caae7f7623a0e..627b892f3a7734 100644
--- a/docs/src/modules/components/AppFrame.js
+++ b/docs/src/modules/components/AppFrame.js
@@ -4,7 +4,6 @@ import { useRouter } from 'next/router';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import { styled, alpha } from '@mui/material/styles';
 import NProgress from 'nprogress';
-import CssBaseline from '@mui/material/CssBaseline';
 import AppBar from '@mui/material/AppBar';
 import Stack from '@mui/material/Stack';
 import Toolbar from '@mui/material/Toolbar';
@@ -19,7 +18,6 @@ import AppNavDrawer from 'docs/src/modules/components/AppNavDrawer';
 import AppSettingsDrawer from 'docs/src/modules/components/AppSettingsDrawer';
 import Notifications from 'docs/src/modules/components/Notifications';
 import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
-import SkipLink from 'docs/src/modules/components/SkipLink';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import { debounce } from '@mui/material/utils';
@@ -166,9 +164,6 @@ export default function AppFrame(props) {
 
   return (
     <RootDiv className={className}>
-      <NextNProgressBar />
-      <CssBaseline />
-      <SkipLink />
       <MarkdownLinks />
       <StyledAppBar disablePermanent={disablePermanent}>
         <GlobalStyles
diff --git a/docs/src/modules/components/AppLayoutDocs.js b/docs/src/modules/components/AppLayoutDocs.js
index e55795dccd9379..b1505fa043b60c 100644
--- a/docs/src/modules/components/AppLayoutDocs.js
+++ b/docs/src/modules/components/AppLayoutDocs.js
@@ -13,6 +13,7 @@ import AppContainer from 'docs/src/modules/components/AppContainer';
 import AppTableOfContents from 'docs/src/modules/components/AppTableOfContents';
 import AdManager from 'docs/src/modules/components/AdManager';
 import AppLayoutDocsFooter from 'docs/src/modules/components/AppLayoutDocsFooter';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import BackToTop from 'docs/src/modules/components/BackToTop';
 
 const Main = styled('main', {
@@ -100,39 +101,41 @@ function AppLayoutDocs(props) {
   }
 
   return (
-    <AppFrame>
-      <GlobalStyles
-        styles={{
-          ':root': {
-            '--MuiDocs-navDrawer-width': '300px',
-            '--MuiDocs-toc-width': '240px',
-          },
-        }}
-      />
-      <AdManager>
-        <Head
-          title={`${title} - ${productName}`}
-          description={description}
-          largeCard={false}
-          card="https://mui.com/static/logo.png"
+    <BrandingCssVarsProvider>
+      <AppFrame>
+        <GlobalStyles
+          styles={{
+            ':root': {
+              '--MuiDocs-navDrawer-width': '300px',
+              '--MuiDocs-toc-width': '240px',
+            },
+          }}
         />
-        <Main disableToc={disableToc}>
-          {/*
+        <AdManager>
+          <Head
+            title={`${title} - ${productName}`}
+            description={description}
+            largeCard={false}
+            card="https://mui.com/static/logo.png"
+          />
+          <Main disableToc={disableToc}>
+            {/*
             Render the TOCs first to avoid layout shift when the HTML is streamed.
             See https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/ for more details.
           */}
-          {disableToc ? null : <AppTableOfContents toc={toc} />}
-          <StyledAppContainer disableAd={disableAd} disableToc={disableToc}>
-            <ActionsDiv>{location && <EditPage markdownLocation={location} />}</ActionsDiv>
-            {children}
-            <NoSsr>
-              <AppLayoutDocsFooter tableOfContents={toc} />
-            </NoSsr>
-          </StyledAppContainer>
-        </Main>
-      </AdManager>
-      <BackToTop />
-    </AppFrame>
+            {disableToc ? null : <AppTableOfContents toc={toc} />}
+            <StyledAppContainer disableAd={disableAd} disableToc={disableToc}>
+              <ActionsDiv>{location && <EditPage markdownLocation={location} />}</ActionsDiv>
+              {children}
+              <NoSsr>
+                <AppLayoutDocsFooter tableOfContents={toc} />
+              </NoSsr>
+            </StyledAppContainer>
+          </Main>
+        </AdManager>
+        <BackToTop />
+      </AppFrame>
+    </BrandingCssVarsProvider>
   );
 }
 
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 2f3fcf00427a5a..68ddfd1f06cda1 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -18,7 +18,6 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
-import BrandingProvider from 'docs/src/BrandingProvider';
 import { blue, blueDark, grey } from 'docs/src/modules/brandingTheme';
 
 /**
@@ -276,13 +275,13 @@ const DemoRootJoy = joyStyled('div', {
       radial-gradient(at 80% 0%, ${blueDark[700]} 0px, transparent 50%),
       radial-gradient(at 0% 95%, ${blueDark[700]} 0px, transparent 50%),
       radial-gradient(at 0% 5%, ${blueDark[700]} 0px, transparent 25%),
-      radial-gradient(at 93% 85%, ${alpha(blueDark[500], 0.8)} 0px, transparent 50%), 
+      radial-gradient(at 93% 85%, ${alpha(blueDark[500], 0.8)} 0px, transparent 50%),
       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`
         : `radial-gradient(at 51% 52%, ${alpha(blue[50], 0.5)} 0px, transparent 50%),
       radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%),
       radial-gradient(at 0% 95%, ${alpha(blue[100], 0.3)}, transparent 40%),
-      radial-gradient(at 0% 20%, ${blue[50]} 0px, transparent 50%), 
-      radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%), 
+      radial-gradient(at 0% 20%, ${blue[50]} 0px, transparent 50%),
+      radial-gradient(at 93% 85%, ${alpha(blue[100], 0.2)} 0px, transparent 50%),
       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23003A75' fill-opacity='0.03'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
   }),
   ...(hiddenToolbar && {
@@ -317,7 +316,7 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
 }));
 
 export default function Demo(props) {
-  const { demo, demoOptions, disableAd, githubLocation, mode } = props;
+  const { demo, demoOptions, disableAd, githubLocation } = props;
 
   if (process.env.NODE_ENV !== 'production') {
     if (demoOptions.hideToolbar === false) {
@@ -386,7 +385,6 @@ export default function Demo(props) {
   const adVisibility = showAd && !disableAd && !demoOptions.disableAd;
 
   const DemoRoot = demoData.product === 'joy-ui' ? DemoRootJoy : DemoRootMaterial;
-  const Wrapper = demoData.product === 'joy-ui' ? BrandingProvider : React.Fragment;
 
   const isPreview = !codeOpen && showPreview;
   const initialEditorCode = isPreview
@@ -439,13 +437,7 @@ export default function Demo(props) {
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
       >
-        <Wrapper {...(demoData.product === 'joy-ui' && { mode })}>
-          <InitialFocus
-            aria-label={t('initialFocusLabel')}
-            action={initialFocusRef}
-            tabIndex={-1}
-          />
-        </Wrapper>
+        <InitialFocus aria-label={t('initialFocusLabel')} action={initialFocusRef} tabIndex={-1} />
         <DemoSandbox
           key={demoKey}
           style={demoSandboxedStyle}
@@ -458,74 +450,72 @@ export default function Demo(props) {
       </DemoRoot>
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
-      <Wrapper {...(demoData.product === 'joy-ui' ? { mode } : {})}>
-        {demoOptions.hideToolbar ? null : (
-          <NoSsr defer fallback={<DemoToolbarFallback />}>
-            <React.Suspense fallback={<DemoToolbarFallback />}>
-              <DemoToolbar
-                codeOpen={codeOpen}
-                codeVariant={codeVariant}
-                demo={demo}
-                demoData={demoData}
-                demoHovered={demoHovered}
-                demoId={demoId}
-                demoName={demoName}
-                demoOptions={demoOptions}
-                demoSourceId={demoSourceId}
-                initialFocusRef={initialFocusRef}
-                onCodeOpenChange={() => {
-                  setCodeOpen((open) => !open);
-                  setShowAd(true);
-                }}
-                onResetDemoClick={resetDemo}
-                openDemoSource={openDemoSource}
-                showPreview={showPreview}
-              />
-            </React.Suspense>
-          </NoSsr>
-        )}
-        <Collapse in={openDemoSource} unmountOnExit>
-          {/* A limitation from https://github.com/nihgwu/react-runner,
-            we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
-          {demoOptions.disableLiveEdit ? (
-            <DemoCodeViewer
-              code={editorCode.value}
-              id={demoSourceId}
-              language={demoData.sourceLanguage}
-              copyButtonProps={{
-                'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
-                'data-ga-event-label': demoOptions.demo,
-                'data-ga-event-action': 'copy-click',
+      {demoOptions.hideToolbar ? null : (
+        <NoSsr defer fallback={<DemoToolbarFallback />}>
+          <React.Suspense fallback={<DemoToolbarFallback />}>
+            <DemoToolbar
+              codeOpen={codeOpen}
+              codeVariant={codeVariant}
+              demo={demo}
+              demoData={demoData}
+              demoHovered={demoHovered}
+              demoId={demoId}
+              demoName={demoName}
+              demoOptions={demoOptions}
+              demoSourceId={demoSourceId}
+              initialFocusRef={initialFocusRef}
+              onCodeOpenChange={() => {
+                setCodeOpen((open) => !open);
+                setShowAd(true);
               }}
+              onResetDemoClick={resetDemo}
+              openDemoSource={openDemoSource}
+              showPreview={showPreview}
             />
-          ) : (
-            <DemoEditor
-              // Mount a new text editor when the preview mode change to reset the undo/redo history.
-              key={editorCode.isPreview}
-              value={editorCode.value}
-              onChange={(value) => {
-                setEditorCode({
-                  ...editorCode,
-                  value,
-                });
-              }}
-              onFocus={() => {
-                setLiveDemoActive(true);
-              }}
-              id={demoSourceId}
-              language={demoData.sourceLanguage}
-              copyButtonProps={{
-                'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
-                'data-ga-event-label': demoOptions.demo,
-                'data-ga-event-action': 'copy-click',
-              }}
-            >
-              <DemoEditorError>{debouncedError}</DemoEditorError>
-            </DemoEditor>
-          )}
-        </Collapse>
-        {adVisibility ? <AdCarbonInline /> : null}
-      </Wrapper>
+          </React.Suspense>
+        </NoSsr>
+      )}
+      <Collapse in={openDemoSource} unmountOnExit>
+        {/* A limitation from https://github.com/nihgwu/react-runner,
+          we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
+        {demoOptions.disableLiveEdit ? (
+          <DemoCodeViewer
+            code={editorCode.value}
+            id={demoSourceId}
+            language={demoData.sourceLanguage}
+            copyButtonProps={{
+              'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
+              'data-ga-event-label': demoOptions.demo,
+              'data-ga-event-action': 'copy-click',
+            }}
+          />
+        ) : (
+          <DemoEditor
+            // Mount a new text editor when the preview mode change to reset the undo/redo history.
+            key={editorCode.isPreview}
+            value={editorCode.value}
+            onChange={(value) => {
+              setEditorCode({
+                ...editorCode,
+                value,
+              });
+            }}
+            onFocus={() => {
+              setLiveDemoActive(true);
+            }}
+            id={demoSourceId}
+            language={demoData.sourceLanguage}
+            copyButtonProps={{
+              'data-ga-event-category': codeOpen ? 'demo-expand' : 'demo',
+              'data-ga-event-label': demoOptions.demo,
+              'data-ga-event-action': 'copy-click',
+            }}
+          >
+            <DemoEditorError>{debouncedError}</DemoEditorError>
+          </DemoEditor>
+        )}
+      </Collapse>
+      {adVisibility ? <AdCarbonInline /> : null}
     </Root>
   );
 }
@@ -535,5 +525,4 @@ Demo.propTypes = {
   demoOptions: PropTypes.object.isRequired,
   disableAd: PropTypes.bool.isRequired,
   githubLocation: PropTypes.string.isRequired,
-  mode: PropTypes.string, // temporary, just to make Joy docs work.
 };
diff --git a/docs/src/modules/components/DemoSandbox.js b/docs/src/modules/components/DemoSandbox.js
index 85648240ee2e9c..f37e13d74e7df4 100644
--- a/docs/src/modules/components/DemoSandbox.js
+++ b/docs/src/modules/components/DemoSandbox.js
@@ -11,6 +11,7 @@ import { CacheProvider } from '@emotion/react';
 import { StyleSheetManager } from 'styled-components';
 import { jssPreset, StylesProvider } from '@mui/styles';
 import { useTheme, styled, createTheme, ThemeProvider } from '@mui/material/styles';
+import { CssVarsProvider } from '@mui/joy/styles';
 import rtl from 'jss-rtl';
 import DemoErrorBoundary from 'docs/src/modules/components/DemoErrorBoundary';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
@@ -176,8 +177,8 @@ function DemoSandbox(props) {
 
   return (
     <DemoErrorBoundary name={name} onResetDemoClick={onResetDemoClick} t={t}>
-      {canonicalAs.startsWith('/joy-ui') ? (
-        children
+      {canonicalAs.startsWith('/joy-ui/') ? (
+        <CssVarsProvider>{children}</CssVarsProvider>
       ) : (
         <StylesProvider jss={jss}>
           <ThemeProvider theme={(outerTheme) => getTheme(outerTheme)}>{children}</ThemeProvider>
diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index f9dc8a199378c4..03d2173e5fd89d 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -6,11 +6,12 @@ import { useTheme } from '@mui/system';
 import Demo from 'docs/src/modules/components/Demo';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import { exactProp } from '@mui/utils';
+import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
 import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-import BrandingProvider from 'docs/src/BrandingProvider';
 import Ad from 'docs/src/modules/components/Ad';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 
 function noComponent(moduleID) {
@@ -34,7 +35,7 @@ JoyModeObserver.propTypes = {
 export default function MarkdownDocs(props) {
   const theme = useTheme();
   const router = useRouter();
-  const asPathWithoutLang = router.asPath.replace(/^\/[a-zA-Z]{2}\//, '/');
+  const { canonicalAs } = pathnameToLanguage(router.asPath);
   const {
     disableAd = false,
     disableToc = false,
@@ -50,35 +51,31 @@ export default function MarkdownDocs(props) {
   const localizedDoc = docs[userLanguage] || docs.en;
   const { description, location, rendered, title, toc } = localizedDoc;
 
-  const isJoy = asPathWithoutLang.startsWith('/joy-ui');
-  const Provider = isJoy ? CssVarsProvider : React.Fragment;
-  const Wrapper = isJoy ? BrandingProvider : React.Fragment;
+  const isJoy = canonicalAs.startsWith('/joy-ui/');
 
   return (
-    <AppLayoutDocs
-      description={description}
-      disableAd={disableAd}
-      disableToc={disableToc}
-      location={location}
-      title={title}
-      toc={toc}
-    >
-      <Provider>
+    <ThemeProvider>
+      <AppLayoutDocs
+        description={description}
+        disableAd={disableAd}
+        disableToc={disableToc}
+        location={location}
+        title={title}
+        toc={toc}
+      >
         {disableAd ? null : (
-          <Wrapper>
-            <AdGuest>
-              <Ad />
-            </AdGuest>
-          </Wrapper>
+          <AdGuest>
+            <Ad />
+          </AdGuest>
+        )}
+        {isJoy && (
+          <CssVarsProvider>
+            <JoyModeObserver mode={theme.palette.mode} />
+          </CssVarsProvider>
         )}
-        {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {
           if (typeof renderedMarkdownOrDemo === 'string') {
-            return (
-              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
-                <MarkdownElement renderedMarkdown={renderedMarkdownOrDemo} />
-              </Wrapper>
-            );
+            return <MarkdownElement renderedMarkdown={renderedMarkdownOrDemo} />;
           }
 
           if (renderedMarkdownOrDemo.component) {
@@ -89,11 +86,7 @@ export default function MarkdownDocs(props) {
               throw new Error(`No component found at the path ${path.join('docs/src', name)}`);
             }
 
-            return (
-              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
-                <Component {...renderedMarkdownOrDemo} markdown={localizedDoc} />
-              </Wrapper>
-            );
+            return <Component key={index} {...renderedMarkdownOrDemo} markdown={localizedDoc} />;
           }
 
           const name = renderedMarkdownOrDemo.demo;
@@ -132,7 +125,6 @@ export default function MarkdownDocs(props) {
           return (
             <Demo
               key={index}
-              mode={theme.palette.mode}
               demo={{
                 raw: demo.raw,
                 js: demoComponents[demo.module] ?? noComponent(demo.module),
@@ -147,8 +139,8 @@ export default function MarkdownDocs(props) {
             />
           );
         })}
-      </Provider>
-    </AppLayoutDocs>
+      </AppLayoutDocs>
+    </ThemeProvider>
   );
 }
 
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 679276018f7a24..097bf57b03b88f 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -10,15 +10,15 @@ import {
 const Root = styled('div')(
   ({ theme }) => ({
     ...lightTheme.typography.body1,
-    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    color: theme.vars.palette.text.primary,
     '& strong': {
-      color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+      color: theme.vars.palette.text.primary,
     },
     wordBreak: 'break-word',
     '& pre': {
       margin: theme.spacing(2, 'auto'),
       padding: theme.spacing(2),
-      backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`,
+      backgroundColor: theme.vars.palette.primaryDark[800],
       color: '#f8f8f2',
       colorScheme: 'dark',
       borderRadius: `var(--muidocs-shape-borderRadius, ${
@@ -236,7 +236,7 @@ const Root = styled('div')(
       margin: '20px 0',
       '& p': {
         marginTop: 10,
-        color: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`,
+        color: theme.vars.palette.primaryDark[800],
       },
     },
     '& .MuiCallout-root': {
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index fba40295138215..61f319503287cb 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@mui/material/locale';
+import { enUS, zhCN, ptBR } from '@mui/material/locale';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import { getCookie } from 'docs/src/modules/utils/helpers';
 import useLazyCSS from 'docs/src/modules/utils/useLazyCSS';
@@ -17,13 +17,7 @@ import {
 const languageMap = {
   en: enUS,
   zh: zhCN,
-  fa: faIR,
-  ru: ruRU,
   pt: ptBR,
-  es: esES,
-  fr: frFR,
-  de: deDE,
-  ja: jaJP,
 };
 
 const themeInitialOptions = {
diff --git a/docs/src/modules/components/TopLayoutCareers.js b/docs/src/modules/components/TopLayoutCareers.js
index 0964163a895dcd..dbbe49d210294c 100644
--- a/docs/src/modules/components/TopLayoutCareers.js
+++ b/docs/src/modules/components/TopLayoutCareers.js
@@ -6,7 +6,8 @@ import AppContainer from 'docs/src/modules/components/AppContainer';
 import AppFooter from 'docs/src/layouts/AppFooter';
 import Divider from '@mui/material/Divider';
 import AppHeader from 'docs/src/layouts/AppHeader';
-import BrandingProvider from 'docs/src/BrandingProvider';
+import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
+import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import Link from 'docs/src/modules/components/Link';
 
@@ -22,40 +23,40 @@ const StyledAppContainer = styled(AppContainer)(({ theme }) => ({
   },
 }));
 
-function TopLayoutCareers(props) {
+export default function TopLayoutCareers(props) {
   const { docs } = props;
   const { description, rendered, title } = docs.en;
 
   return (
-    <BrandingProvider>
-      <AppHeader />
-      <Head title={`${title} - MUI`} description={description}>
-        <meta name="robots" content="noindex,nofollow" />
-      </Head>
-      <StyledDiv>
-        <StyledAppContainer component="main" sx={{ py: { xs: 3, sm: 4, md: 8 } }}>
-          <Link
-            href="/careers/#open-roles"
-            rel="nofollow"
-            variant="body2"
-            sx={{ display: 'block', mb: 2 }}
-          >
-            {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
-            {'< Back to open roles'}
-          </Link>
-          {rendered.map((chunk, index) => {
-            return <MarkdownElement key={index} renderedMarkdown={chunk} />;
-          })}
-        </StyledAppContainer>
-        <Divider />
-        <AppFooter />
-      </StyledDiv>
-    </BrandingProvider>
+    <ThemeProvider>
+      <BrandingCssVarsProvider>
+        <AppHeader />
+        <Head title={`${title} - MUI`} description={description}>
+          <meta name="robots" content="noindex,nofollow" />
+        </Head>
+        <StyledDiv>
+          <StyledAppContainer component="main" sx={{ py: { xs: 3, sm: 4, md: 8 } }}>
+            <Link
+              href="/careers/#open-roles"
+              rel="nofollow"
+              variant="body2"
+              sx={{ display: 'block', mb: 2 }}
+            >
+              {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
+              {'< Back to open roles'}
+            </Link>
+            {rendered.map((chunk, index) => {
+              return <MarkdownElement key={index} renderedMarkdown={chunk} />;
+            })}
+          </StyledAppContainer>
+          <Divider />
+          <AppFooter />
+        </StyledDiv>
+      </BrandingCssVarsProvider>
+    </ThemeProvider>
   );
 }
 
 TopLayoutCareers.propTypes = {
   docs: PropTypes.object.isRequired,
 };
-
-export default TopLayoutCareers;