From 0e637c1e8832a00e57162488877bdab7480ae199 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Tue, 18 Oct 2022 10:05:50 +0700
Subject: [PATCH] [website] Fix home page dark mode flicker (#33545)

---
 docs/pages/_document.js                       |   4 +-
 docs/pages/index.tsx                          |   6 +-
 docs/src/BrandingCssVarsProvider.tsx          |  60 ++
 docs/src/BrandingProvider.tsx                 |  15 +-
 docs/src/components/action/ArrowButton.tsx    |  46 +-
 docs/src/components/action/Highlighter.tsx    |  79 +-
 docs/src/components/action/StylingInfo.tsx    |  87 +-
 docs/src/components/footer/EmailSubscribe.tsx | 151 ++--
 docs/src/components/header/HeaderNavBar.tsx   | 194 +++--
 .../components/header/HeaderNavDropdown.tsx   | 103 +--
 .../src/components/header/ThemeModeToggle.tsx |  49 +-
 docs/src/components/home/CoreShowcase.tsx     |  69 +-
 .../home/DesignSystemComponents.tsx           |   9 +-
 docs/src/components/home/DiamondSponsors.tsx  |  31 +-
 docs/src/components/home/GoldSponsors.tsx     |  32 +-
 docs/src/components/home/Hero.tsx             |  15 +-
 docs/src/components/home/HeroEnd.tsx          |  16 +-
 .../home/MaterialDesignComponents.tsx         |  23 +-
 docs/src/components/home/MuiStatistics.tsx    |  24 +-
 docs/src/components/home/ProductSuite.tsx     |  24 +-
 docs/src/components/home/References.tsx       |   9 +-
 docs/src/components/home/Testimonials.tsx     |  37 +-
 docs/src/components/icon/IconImage.tsx        |  25 +-
 docs/src/components/showcase/FolderTable.tsx  | 212 ++---
 .../components/showcase/NotificationCard.tsx  | 220 +----
 docs/src/components/showcase/PlayerCard.tsx   | 225 ++---
 docs/src/components/showcase/TaskCard.tsx     | 216 ++---
 .../components/showcase/ThemeAccordion.tsx    | 251 ++----
 docs/src/components/showcase/ThemeChip.tsx    | 131 ++-
 .../components/showcase/ThemeDatePicker.tsx   | 234 ++---
 docs/src/components/showcase/ThemeSlider.tsx  | 230 ++---
 docs/src/components/showcase/ThemeSwitch.tsx  | 111 +--
 docs/src/components/showcase/ThemeTabs.tsx    | 139 +--
 .../src/components/showcase/ThemeTimeline.tsx | 288 +++----
 .../components/showcase/ThemeToggleButton.tsx | 143 +--
 .../components/showcase/ViewToggleButton.tsx  | 143 +--
 .../components/typography/GradientText.tsx    |  11 +-
 .../components/typography/SectionHeadline.tsx |  40 +-
 docs/src/createEmotionCache.ts                |  19 +-
 docs/src/layouts/AppFooter.tsx                |  14 +-
 docs/src/layouts/AppHeader.tsx                |  39 +-
 docs/src/layouts/HeroContainer.tsx            |  30 +-
 docs/src/modules/brandingTheme.ts             | 813 ++++++++++--------
 .../modules/components/AppSettingsDrawer.js   |  14 +-
 docs/src/modules/components/ThemeContext.js   |   6 +-
 45 files changed, 2078 insertions(+), 2559 deletions(-)
 create mode 100644 docs/src/BrandingCssVarsProvider.tsx
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index f632beba10c11d..70b4b089f02f6d 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -7,7 +7,7 @@ import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
 import { getMetaThemeColor } from 'docs/src/modules/brandingTheme';
 import GlobalStyles from '@mui/material/GlobalStyles';
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles';
 
 // You can find a benchmark of the available CSS minifiers under
 // https://github.com/GoalSmashers/css-minification-benchmark
@@ -143,7 +143,7 @@ export default class MyDocument extends Document {
           />
         </Head>
         <body>
-          {getInitColorSchemeScript({ enableSystem: true })}
+          {getMuiInitColorSchemeScript()}
           <Main />
           <script
             // eslint-disable-next-line react/no-danger
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index 9b348fee2930e0..0953203fc77241 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -12,13 +12,13 @@ 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 BrandingProvider from 'docs/src/BrandingProvider';
+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 (
-    <BrandingProvider>
+    <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."
@@ -60,6 +60,6 @@ export default function Home() {
           `,
         }}
       />
-    </BrandingProvider>
+    </BrandingCssVarsProvider>
   );
 }
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
new file mode 100644
index 00000000000000..c223b5e9039cbb
--- /dev/null
+++ b/docs/src/BrandingCssVarsProvider.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { deepmerge } from '@mui/utils';
+import {
+  Experimental_CssVarsProvider as CssVarsProvider,
+  experimental_extendTheme as extendTheme,
+  PaletteColorOptions,
+} from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { NextNProgressBar } from 'docs/src/modules/components/AppFrame';
+import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
+
+declare module '@mui/material/styles' {
+  interface PaletteOptions {
+    primaryDark?: PaletteColorOptions;
+  }
+}
+
+const { palette: lightPalette, typography, ...designTokens } = getDesignTokens('light');
+const { palette: darkPalette } = getDesignTokens('dark');
+
+const theme = extendTheme({
+  cssVarPrefix: 'muidocs',
+  colorSchemes: {
+    light: {
+      palette: lightPalette,
+    },
+    dark: {
+      palette: darkPalette,
+    },
+  },
+  ...designTokens,
+  typography: deepmerge(typography, {
+    h1: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'initial',
+      },
+    },
+    h2: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-grey-100)',
+      },
+    },
+    h5: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-primary-300)',
+      },
+    },
+  }),
+  ...getThemedComponents(),
+});
+
+export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <CssVarsProvider theme={theme} disableTransitionOnChange>
+      <NextNProgressBar />
+      <CssBaseline />
+      {children}
+    </CssVarsProvider>
+  );
+}
diff --git a/docs/src/BrandingProvider.tsx b/docs/src/BrandingProvider.tsx
index 51176eacd2270e..872f0658357cb9 100644
--- a/docs/src/BrandingProvider.tsx
+++ b/docs/src/BrandingProvider.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { deepmerge } from '@mui/utils';
 import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
@@ -18,12 +17,14 @@ export default function BrandingProvider(props: BrandingProviderProps) {
   const { children, mode: modeProp } = props;
   const upperTheme = useTheme();
   const mode = modeProp || upperTheme.palette.mode;
-  const theme = React.useMemo(() => {
-    const designTokens = getDesignTokens(mode);
-    let newTheme = createTheme(designTokens);
-    newTheme = deepmerge(newTheme, getThemedComponents(newTheme));
-    return newTheme;
-  }, [mode]);
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        ...getDesignTokens(mode),
+        ...getThemedComponents(),
+      }),
+    [mode],
+  );
   return (
     <ThemeProvider theme={modeProp ? () => theme : theme}>
       {modeProp ? null : <NextNProgressBar />}
diff --git a/docs/src/components/action/ArrowButton.tsx b/docs/src/components/action/ArrowButton.tsx
index 8a4b7373ee10f0..acd7d904a8ff3d 100644
--- a/docs/src/components/action/ArrowButton.tsx
+++ b/docs/src/components/action/ArrowButton.tsx
@@ -16,23 +16,37 @@ export default function ArrowButton({
       size="small"
       aria-label={label[direction]}
       {...props}
-      sx={{
-        color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'primary.main'),
-        border: '1px solid',
-        borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
-        '&:hover': {
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.200' : 'grey.300'),
+      sx={[
+        {
+          border: '1px solid',
+          color: 'primary.main',
+          borderColor: 'grey.200',
+          '&:hover': {
+            borderColor: 'grey.300',
+          },
+          '&.Mui-disabled': {
+            opacity: 0.5,
+            color: 'grey.700',
+            borderColor: 'grey.300',
+          },
+          '& + .MuiIconButton-root': {
+            ml: 2,
+          },
         },
-        '&.Mui-disabled': {
-          opacity: 0.5,
-          color: (theme) => (theme.palette.mode === 'dark' ? '#fff' : 'grey.700'),
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primary.700' : 'grey.300'),
-        },
-        '& + .MuiIconButton-root': {
-          ml: 2,
-        },
-        ...props.sx,
-      }}
+        (theme) =>
+          theme.applyDarkStyles({
+            color: '#fff',
+            borderColor: 'primaryDark.300',
+            '&:hover': {
+              borderColor: 'primaryDark.200',
+            },
+            '&.Mui-disabled': {
+              color: '#fff',
+              borderColor: 'primary.700',
+            },
+          }),
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
     >
       {direction === 'left' && <KeyboardArrowLeftRounded fontSize="small" />}
       {direction === 'right' && <KeyboardArrowRightRounded fontSize="small" />}
diff --git a/docs/src/components/action/Highlighter.tsx b/docs/src/components/action/Highlighter.tsx
index a548ffc6423507..89856876d60a2b 100644
--- a/docs/src/components/action/Highlighter.tsx
+++ b/docs/src/components/action/Highlighter.tsx
@@ -5,6 +5,7 @@ export default function Highlighter({
   disableBorder = false,
   selected = false,
   selectedBg = 'white',
+  sx,
   ...props
 }: {
   disableBorder?: boolean;
@@ -36,38 +37,58 @@ export default function Highlighter({
           props.onFocusVisible(event);
         }
       }}
-      sx={{
-        justifyContent: 'flex-start',
-        textAlign: 'left',
-        alignItems: 'center',
-        borderRadius: 1,
-        height: '100%',
-        border: '1px solid transparent',
-        transitionProperty: 'all',
-        transitionDuration: '150ms',
-        color: (theme) => (theme.palette.mode === 'dark' ? 'primary.800' : 'primary.300'),
-        ...((!disableBorder || selected) && {
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
-        }),
-        ...(selected && {
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark' ? 'primaryDark.700' : lightSelectedBg[selectedBg],
-          borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
-          color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.500'),
-        }),
-        ...(!selected && {
-          '&:hover, &:focus': {
-            bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'grey.100'),
-            '@media (hover: none)': {
-              bgcolor: 'transparent',
+      sx={[
+        (theme) => ({
+          justifyContent: 'flex-start',
+          textAlign: 'left',
+          alignItems: 'center',
+          borderRadius: 1,
+          height: '100%',
+          border: '1px solid transparent',
+          transitionProperty: 'all',
+          transitionDuration: '150ms',
+          color: 'primary.300',
+          ...((!disableBorder || selected) && {
+            borderColor: 'grey.200',
+          }),
+          ...(selected && {
+            bgcolor: lightSelectedBg[selectedBg],
+            borderColor: 'grey.200',
+            color: 'primary.500',
+          }),
+          ...(!selected && {
+            '&:hover, &:focus': {
+              bgcolor: 'grey.100',
+              '@media (hover: none)': {
+                bgcolor: 'transparent',
+              },
             },
+          }),
+          ...theme.applyDarkStyles({
+            color: 'primary.800',
+            ...((!disableBorder || selected) && {
+              borderColor: 'primaryDark.500',
+            }),
+            ...(selected && {
+              bgcolor: 'primaryDark.700',
+              borderColor: 'primaryDark.300',
+              color: 'primary.300',
+            }),
+            ...(!selected && {
+              '&:hover, &:focus': {
+                bgcolor: 'primaryDark.800',
+                '@media (hover: none)': {
+                  bgcolor: 'transparent',
+                },
+              },
+            }),
+          }),
+          '&.Mui-disabled': {
+            opacity: 0.4,
           },
         }),
-        '&.Mui-disabled': {
-          opacity: 0.4,
-        },
-        ...props.sx,
-      }}
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     />
   );
 }
diff --git a/docs/src/components/action/StylingInfo.tsx b/docs/src/components/action/StylingInfo.tsx
index 1e687b83391a7c..2dbe7fb334da91 100644
--- a/docs/src/components/action/StylingInfo.tsx
+++ b/docs/src/components/action/StylingInfo.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react';
-import { ThemeProvider, alpha } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import KeyboardArrowUpRounded from '@mui/icons-material/KeyboardArrowUpRounded';
 import KeyboardArrowDownRounded from '@mui/icons-material/KeyboardArrowDownRounded';
 import Link from 'docs/src/modules/components/Link';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 import ROUTES from 'docs/src/route';
 
 export default function StylingInfo({
@@ -30,53 +29,51 @@ export default function StylingInfo({
     </React.Fragment>
   );
   return (
-    <ThemeProvider theme={brandingDarkTheme}>
-      <Box
-        {...props}
+    <Box
+      {...props}
+      sx={{
+        position: 'absolute',
+        bottom: 0,
+        transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
+        transition: '0.3s',
+        left: 0,
+        right: 0,
+        px: 2,
+        pt: 1,
+        pb: 2,
+        bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
+        backdropFilter: 'blur(8px)',
+        zIndex: 1,
+        borderTop: '1px solid',
+        borderColor: 'divider',
+        borderRadius: '0 0 10px 10px',
+        ...props.sx,
+      }}
+    >
+      <IconButton
+        aria-label={hidden ? 'show' : 'hide'}
+        onClick={() => setHidden((bool) => !bool)}
         sx={{
           position: 'absolute',
-          bottom: 0,
-          transform: hidden || !appeared ? 'translateY(100%)' : 'translateY(0)',
+          zIndex: 2,
           transition: '0.3s',
-          left: 0,
-          right: 0,
-          px: 2,
-          pt: 1,
-          pb: 2,
-          bgcolor: ({ palette }) => alpha(palette.primaryDark[700], 0.5),
-          backdropFilter: 'blur(8px)',
-          zIndex: 1,
-          borderTop: '1px solid',
-          borderColor: 'divider',
-          borderRadius: '0 0 10px 10px',
-          ...props.sx,
+          right: 10,
+          bottom: '100%',
+          transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
+          opacity: appeared ? 1 : 0,
+          bgcolor: 'primaryDark.500',
+          '&:hover, &.Mui-focused': {
+            bgcolor: 'primaryDark.600',
+          },
         }}
       >
-        <IconButton
-          aria-label={hidden ? 'show' : 'hide'}
-          onClick={() => setHidden((bool) => !bool)}
-          sx={{
-            position: 'absolute',
-            zIndex: 2,
-            transition: '0.3s',
-            right: 10,
-            bottom: '100%',
-            transform: hidden || !appeared ? 'translateY(-10px)' : 'translateY(50%)',
-            opacity: appeared ? 1 : 0,
-            bgcolor: 'primaryDark.500',
-            '&:hover, &.Mui-focused': {
-              bgcolor: 'primaryDark.600',
-            },
-          }}
-        >
-          {hidden ? (
-            <KeyboardArrowUpRounded fontSize="small" />
-          ) : (
-            <KeyboardArrowDownRounded fontSize="small" />
-          )}
-        </IconButton>
-        {content || defaultContent}
-      </Box>
-    </ThemeProvider>
+        {hidden ? (
+          <KeyboardArrowUpRounded fontSize="small" />
+        ) : (
+          <KeyboardArrowDownRounded fontSize="small" />
+        )}
+      </IconButton>
+      {content || defaultContent}
+    </Box>
   );
 }
diff --git a/docs/src/components/footer/EmailSubscribe.tsx b/docs/src/components/footer/EmailSubscribe.tsx
index cfc5778b248204..6b54854ce1e482 100644
--- a/docs/src/components/footer/EmailSubscribe.tsx
+++ b/docs/src/components/footer/EmailSubscribe.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Theme, styled, alpha } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
+import { Theme, styled, alpha } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
@@ -57,24 +57,26 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
     return (
       <Alert
         severity="success"
-        sx={{
-          maxWidth: { sm: 400 },
-          bgcolor: (theme) =>
-            theme.palette.mode === 'dark'
-              ? theme.palette.primaryDark[700]
-              : theme.palette.success[50],
-          ...sx,
-        }}
+        sx={[
+          (theme) => ({
+            maxWidth: { sm: 400 },
+            bgcolor: 'success.50',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primaryDark.700',
+            }),
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
         iconMapping={{
           success: (
             <CheckCircleRoundedIcon
               fontSize="small"
-              sx={{
-                color: (theme: Theme) =>
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.success[600]
-                    : theme.palette.success[700],
-              }}
+              sx={(theme: Theme) => ({
+                color: 'success.700',
+                ...theme.applyDarkStyles({
+                  color: 'success.600',
+                }),
+              })}
             />
           ),
         }}
@@ -111,74 +113,77 @@ export default function EmailSubscribe({ sx }: { sx?: SxProps<Theme> }) {
           value={form.email}
           onChange={(event) => setForm({ email: event.target.value, status: 'initial' })}
           inputProps={{ required: true }}
-          sx={{
-            minWidth: 220,
-            bgcolor: (theme) =>
-              theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff',
-            boxShadow: (theme) =>
-              theme.palette.mode === 'dark'
-                ? '0 1px 2px 0 rgba(0 0 0 / 1)'
-                : '0 1px 2px 0 rgba(0 0 0 / 0.1)',
-            borderRadius: 1,
-            border: '1px solid',
-            borderColor: (theme) =>
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[500]
-                : theme.palette.grey[300],
-            px: 1,
-            py: 0.5,
-            typography: 'body2',
-            '&:hover': {
-              borderColor: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[300]
-                  : theme.palette.grey[400],
-              boxShadow: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? '0 1px 2px 0 rgba(0 0 0 / 1)'
-                  : '0 1px 2px 0 rgba(0 0 0 / 0.2)',
-            },
-            [`&.${inputBaseClasses.focused}`]: {
-              borderColor: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[300]
-                  : theme.palette.primary[500],
-              outline: '3px solid',
-              outlineColor: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[500]
-                  : theme.palette.primary[200],
-            },
-          }}
+          sx={[
+            (theme) => ({
+              minWidth: 220,
+              borderRadius: 1,
+              border: '1px solid',
+              bgcolor: '#fff',
+              boxShadow: '0 1px 2px 0 rgba(0 0 0 / 0.1)',
+              borderColor: 'grey.300',
+              px: 1,
+              py: 0.5,
+              typography: 'body2',
+              '&:hover': {
+                borderColor: 'grey.400',
+                boxShadow: '0 1px 2px 0 rgba(0 0 0 / 0.2)',
+              },
+              [`&.${inputBaseClasses.focused}`]: {
+                outline: '3px solid',
+                borderColor: 'primary.500',
+                outlineColor: (theme.vars || theme).palette.primary[200],
+              },
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                bgcolor: 'primaryDark.900',
+                boxShadow: '0 1px 2px 0 rgba(0 0 0 / 1)',
+                borderColor: 'primaryDark.500',
+                '&:hover': {
+                  borderColor: 'primaryDark.300',
+                  boxShadow: '0 1px 2px 0 rgba(0 0 0 / 1)',
+                },
+                [`&.${inputBaseClasses.focused}`]: {
+                  borderColor: 'primaryDark.300',
+                  outlineColor: (theme.vars || theme).palette.primaryDark[500],
+                },
+              }),
+          ]}
         />
         <Button
           disabled={form.status === 'loading'}
           type="submit"
-          sx={{
-            bgcolor: (theme) =>
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[500]
-                : alpha(theme.palette.primary[100], 0.5),
-            color: (theme) =>
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[100]
-                : theme.palette.primary[600],
-            py: 1,
-            px: 1.5,
-            '&:hover': {
-              bgcolor: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[600]
-                  : alpha(theme.palette.primary[100], 1),
-            },
-          }}
+          sx={[
+            (theme) => ({
+              bgcolor: alpha(theme.palette.primary[100], 0.5),
+              color: 'primary.600',
+              py: 1,
+              px: 1.5,
+              '&:hover': {
+                bgcolor: alpha(theme.palette.primary[100], 1),
+              },
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                bgcolor: 'primaryDark.500',
+                color: 'primaryDark.100',
+                '&:hover': {
+                  bgcolor: 'primaryDark.600',
+                },
+              }),
+          ]}
         >
           Subscribe
         </Button>
       </Box>
       {form.status === 'failure' && (
         <FormHelperText
-          sx={{ color: (theme) => (theme.palette.mode === 'dark' ? 'warning.500' : 'warning.800') }}
+          sx={(theme) => ({
+            color: 'warning.800',
+            ...theme.applyDarkStyles({
+              color: 'warning.500',
+            }),
+          })}
         >
           Oops! something went wrong, please try again later.
         </FormHelperText>
diff --git a/docs/src/components/header/HeaderNavBar.tsx b/docs/src/components/header/HeaderNavBar.tsx
index 86265feee0246c..c7012808d55107 100644
--- a/docs/src/components/header/HeaderNavBar.tsx
+++ b/docs/src/components/header/HeaderNavBar.tsx
@@ -12,39 +12,49 @@ import ROUTES from 'docs/src/route';
 import Link from 'docs/src/modules/components/Link';
 import MuiProductSelector from 'docs/src/modules/components/MuiProductSelector';
 
-const Navigation = styled('nav')(({ theme }) => ({
-  '& ul': {
-    padding: 0,
-    margin: 0,
-    listStyle: 'none',
-    display: 'flex',
-  },
-  '& li': {
-    color: theme.palette.text.primary,
-    ...theme.typography.body2,
-    fontWeight: theme.typography.fontWeightBold,
-    '& > a, & > div': {
-      display: 'inline-block',
-      color: 'inherit',
-      textDecoration: 'none',
-      padding: theme.spacing(1),
-      borderRadius: theme.shape.borderRadius,
-      '&:hover, &:focus': {
-        backgroundColor:
-          theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[50],
-        color:
-          theme.palette.mode === 'dark' ? theme.palette.primaryDark[200] : theme.palette.grey[700],
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'initial',
+const Navigation = styled('nav')(({ theme }) => [
+  {
+    '& ul': {
+      padding: 0,
+      margin: 0,
+      listStyle: 'none',
+      display: 'flex',
+    },
+    '& li': {
+      color: (theme.vars || theme).palette.text.primary,
+      ...theme.typography.body2,
+      fontWeight: theme.typography.fontWeightBold,
+      '& > a, & > div': {
+        display: 'inline-block',
+        color: 'inherit',
+        textDecoration: 'none',
+        padding: theme.spacing(1),
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        '&:hover, &:focus': {
+          backgroundColor: (theme.vars || theme).palette.grey[50],
+          color: (theme.vars || theme).palette.grey[700],
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'initial',
+          },
         },
       },
-    },
-    '& > div': {
-      cursor: 'default',
+      '& > div': {
+        cursor: 'default',
+      },
     },
   },
-}));
+  theme.applyDarkStyles({
+    '& li': {
+      '& > a, & > div': {
+        '&:hover, &:focus': {
+          backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+          color: (theme.vars || theme).palette.primaryDark[200],
+        },
+      },
+    },
+  }),
+]);
 
 const PRODUCT_IDS = [
   'product-core',
@@ -69,35 +79,45 @@ const ProductSubMenu = React.forwardRef<HTMLAnchorElement, ProductSubMenuProps>(
         component={Link}
         href={href}
         ref={ref}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          py: 2,
-          pr: 3,
-          '&:hover, &:focus': {
-            backgroundColor: (theme) =>
-              theme.palette.mode === 'dark'
-                ? alpha(theme.palette.primaryDark[700], 0.4)
-                : theme.palette.grey[50],
-            outline: 'none',
-            '@media (hover: none)': {
-              backgroundColor: 'initial',
-              outline: 'initial',
+        sx={[
+          (theme) => ({
+            display: 'flex',
+            alignItems: 'center',
+            py: 2,
+            pr: 3,
+            '&:hover, &:focus': {
+              backgroundColor: (theme.vars || theme).palette.grey[50],
+              outline: 'none',
+              '@media (hover: none)': {
+                backgroundColor: 'initial',
+                outline: 'initial',
+              },
             },
-          },
-        }}
+          }),
+          (theme) =>
+            theme.applyDarkStyles({
+              '&:hover, &:focus': {
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+              },
+            }),
+        ]}
         {...props}
       >
         <Box
-          sx={{
-            px: 2,
-            '& circle': {
-              fill: (theme) =>
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[700]
-                  : theme.palette.grey[100],
-            },
-          }}
+          sx={[
+            (theme) => ({
+              px: 2,
+              '& circle': {
+                fill: (theme.vars || theme).palette.grey[100],
+              },
+            }),
+            (theme) =>
+              theme.applyDarkStyles({
+                '& circle': {
+                  fill: (theme.vars || theme).palette.primaryDark[700],
+                },
+              }),
+          ]}
         >
           {icon}
         </Box>
@@ -258,27 +278,36 @@ export default function HeaderNavBar() {
               <Fade {...TransitionProps} timeout={350}>
                 <Paper
                   variant="outlined"
-                  sx={(theme) => ({
-                    minWidth: 498,
-                    overflow: 'hidden',
-                    borderColor: theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.200',
-                    bgcolor: theme.palette.mode === 'dark' ? 'primaryDark.900' : 'background.paper',
-                    boxShadow: `0px 4px 20px ${
-                      theme.palette.mode === 'dark'
-                        ? alpha(theme.palette.background.paper, 0.72)
-                        : 'rgba(170, 180, 190, 0.3)'
-                    }`,
-                    '& ul': {
-                      margin: 0,
-                      padding: 0,
-                      listStyle: 'none',
-                    },
-                    '& li:not(:last-of-type)': {
-                      borderBottom: '1px solid',
-                      borderColor: theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100',
-                    },
-                    '& a': { textDecoration: 'none' },
-                  })}
+                  sx={[
+                    (theme) => ({
+                      minWidth: 498,
+                      overflow: 'hidden',
+                      borderColor: 'grey.200',
+                      bgcolor: 'background.paper',
+                      boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+                      ...theme.applyDarkStyles({
+                        borderColor: 'primaryDark.700',
+                        bgcolor: 'primaryDark.900',
+                        boxShadow: `0px 4px 20px ${alpha(theme.palette.background.paper, 0.72)}`,
+                      }),
+                      '& ul': {
+                        margin: 0,
+                        padding: 0,
+                        listStyle: 'none',
+                      },
+                      '& li:not(:last-of-type)': {
+                        borderBottom: '1px solid',
+                        borderColor: 'grey.100',
+                      },
+                      '& a': { textDecoration: 'none' },
+                    }),
+                    (theme) =>
+                      theme.applyDarkStyles({
+                        '& li:not(:last-of-type)': {
+                          borderColor: 'primaryDark.700',
+                        },
+                      }),
+                  ]}
                 >
                   <ul role="menu">
                     <li role="none">
@@ -374,13 +403,14 @@ export default function HeaderNavBar() {
                   sx={(theme) => ({
                     minWidth: 498,
                     overflow: 'hidden',
-                    borderColor: theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.200',
-                    bgcolor: theme.palette.mode === 'dark' ? 'primaryDark.900' : 'background.paper',
-                    boxShadow: `0px 4px 20px ${
-                      theme.palette.mode === 'dark'
-                        ? alpha(theme.palette.background.paper, 0.72)
-                        : 'rgba(170, 180, 190, 0.3)'
-                    }`,
+                    borderColor: 'grey.200',
+                    bgcolor: 'background.paper',
+                    boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+                    ...theme.applyDarkStyles({
+                      borderColor: 'primaryDark.700',
+                      bgcolor: 'primaryDark.900',
+                      boxShadow: `0px 4px 20px ${alpha(theme.palette.background.paper, 0.72)}`,
+                    }),
                     '& ul': {
                       margin: 0,
                       padding: 0,
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
index 58114a1237549a..12dd76003063e9 100644
--- a/docs/src/components/header/HeaderNavDropdown.tsx
+++ b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -12,29 +12,40 @@ import Link from 'docs/src/modules/components/Link';
 import ROUTES from 'docs/src/route';
 
 const Anchor = styled('a')<{ component?: React.ElementType; noLinkStyle?: boolean }>(
-  ({ theme }) => ({
-    ...theme.typography.body2,
-    fontWeight: theme.typography.fontWeightBold,
-    textDecoration: 'none',
-    border: 'none',
-    width: '100%',
-    backgroundColor: 'transparent',
-    color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.text.secondary,
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(1),
-    borderRadius: theme.spacing(1),
-    transition: theme.transitions.create('background'),
-    '&:hover, &:focus-visible': {
-      backgroundColor:
-        theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[100],
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
+  ({ theme }) => [
+    {
+      ...theme.typography.body2,
+      fontWeight: theme.typography.fontWeightBold,
+      textDecoration: 'none',
+      border: 'none',
+      width: '100%',
+      backgroundColor: 'transparent',
+      color: (theme.vars || theme).palette.text.secondary,
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      padding: theme.spacing(1),
+      borderRadius: theme.spacing(1),
+      transition: theme.transitions.create('background'),
+      '&:hover, &:focus-visible': {
+        backgroundColor: (theme.vars || theme).palette.grey[100],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
       },
     },
-  }),
+    theme.applyDarkStyles({
+      color: '#fff',
+      '&:hover, &:focus-visible': {
+        backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+    }),
+  ],
 );
 
 const UList = styled('ul')({
@@ -150,17 +161,16 @@ export default function HeaderNavDropdown() {
       >
         <Collapse
           in={open}
-          sx={{
+          sx={(theme) => ({
             position: 'fixed',
             top: 56,
             left: 0,
             right: 0,
-            boxShadow: (theme) =>
-              `0px 4px 20px ${
-                theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)'
-              }`,
-            bgcolor: 'background.paper',
-          }}
+            boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+            ...theme.applyDarkStyles({
+              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+            }),
+          })}
         >
           <Box
             sx={{
@@ -170,7 +180,20 @@ export default function HeaderNavDropdown() {
               overflow: 'auto',
             }}
           >
-            <UList>
+            <UList
+              sx={(theme) => ({
+                '& ul': {
+                  borderLeft: '1px solid',
+                  borderColor: 'grey.100',
+                  ...theme.applyDarkStyles({
+                    borderColor: 'primaryDark.700',
+                  }),
+                  pl: 1,
+                  pb: 1,
+                  ml: 1,
+                },
+              })}
+            >
               <li>
                 <Anchor
                   as="button"
@@ -187,16 +210,7 @@ export default function HeaderNavDropdown() {
                   />
                 </Anchor>
                 <Collapse in={productsOpen}>
-                  <UList
-                    sx={{
-                      borderLeft: '1px solid',
-                      borderColor: (theme) =>
-                        theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100',
-                      pl: 1,
-                      pb: 1,
-                      ml: 1,
-                    }}
-                  >
+                  <UList>
                     {PRODUCTS.map((item) => (
                       <li key={item.name}>
                         <Anchor
@@ -242,16 +256,7 @@ export default function HeaderNavDropdown() {
                   />
                 </Anchor>
                 <Collapse in={docsOpen}>
-                  <UList
-                    sx={{
-                      borderLeft: '1px solid',
-                      borderColor: (theme) =>
-                        theme.palette.mode === 'dark' ? 'primaryDark.700' : 'grey.100',
-                      pl: 1,
-                      pb: 1,
-                      ml: 1,
-                    }}
-                  >
+                  <UList>
                     {DOCS.map((item) => (
                       <li key={item.name}>
                         <Anchor
diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
index daded92a48d0c0..5b0fe564e5ab03 100644
--- a/docs/src/components/header/ThemeModeToggle.tsx
+++ b/docs/src/components/header/ThemeModeToggle.tsx
@@ -1,18 +1,57 @@
 import * as React from 'react';
+import { useColorScheme, useTheme } from '@mui/material/styles';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
 
-interface ThemeModeToggleProps {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
+function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
+  const [mounted, setMounted] = React.useState(false);
+  const { mode, systemMode, setMode } = useColorScheme();
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  return (
+    <Tooltip title={mode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
+      <IconButton
+        color="primary"
+        disableTouchRipple
+        disabled={!mode}
+        onClick={() => {
+          props.onChange(mode === 'light' || systemMode === 'light');
+          setMode(mode === 'dark' ? 'light' : 'dark');
+        }}
+      >
+        {!mode || !mounted
+          ? null
+          : {
+              light: <DarkModeOutlined fontSize="small" />,
+              system: <DarkModeOutlined fontSize="small" />,
+              dark: <LightModeOutlined fontSize="small" />,
+            }[mode]}
+      </IconButton>
+    </Tooltip>
+  );
 }
 
-export default function ThemeModeToggle(props: ThemeModeToggleProps) {
+export default function ThemeModeToggle(props: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}) {
+  const theme = useTheme();
+  if (theme.vars) {
+    // Temporaly renders conditionally because `useColorScheme` could not be used in the pages that haven't migrated to CSS theme variables.
+    return <CssVarsModeToggle {...props} />;
+  }
   return (
     <Tooltip title={props.checked ? 'Turn on the light' : 'Turn off the light'}>
-      <IconButton color="primary" disableTouchRipple onClick={() => props.onChange(!props.checked)}>
+      <IconButton
+        color="primary"
+        disableTouchRipple
+        onClick={() => {
+          props.onChange(!props.checked);
+        }}
+      >
         {props.checked ? (
           <LightModeOutlined fontSize="small" />
         ) : (
diff --git a/docs/src/components/home/CoreShowcase.tsx b/docs/src/components/home/CoreShowcase.tsx
index 9889eebb128f84..f36f6a81cec888 100644
--- a/docs/src/components/home/CoreShowcase.tsx
+++ b/docs/src/components/home/CoreShowcase.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
+import Button, { buttonClasses } from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import { getDesignTokens, getThemedComponents } from 'docs/src/modules/brandingTheme';
 import MarkdownElement from 'docs/src/components/markdown/MarkdownElement';
 import MaterialDesignDemo, { componentCode } from 'docs/src/components/home/MaterialDesignDemo';
 import ShowcaseContainer from 'docs/src/components/home/ShowcaseContainer';
@@ -13,47 +12,6 @@ import TouchAppRounded from '@mui/icons-material/TouchAppRounded';
 import StylingInfo from 'docs/src/components/action/StylingInfo';
 import FlashCode from 'docs/src/components/animation/FlashCode';
 
-const darkDesignTokens = getDesignTokens('dark');
-
-let darkBrandingTheme = createTheme(darkDesignTokens);
-
-darkBrandingTheme = createTheme(darkBrandingTheme, {
-  components: {
-    ...getThemedComponents(darkBrandingTheme).components,
-    MuiButtonBase: {
-      defaultProps: {
-        disableTouchRipple: true,
-      },
-    },
-    MuiButton: {
-      defaultProps: {
-        disableElevation: true,
-      },
-      styleOverrides: {
-        root: {
-          borderRadius: 40,
-          padding: darkBrandingTheme.spacing('2px', 1),
-        },
-        sizeSmall: {
-          fontSize: darkBrandingTheme.typography.pxToRem(12),
-          lineHeight: 18 / 12,
-        },
-        text: {
-          color: darkBrandingTheme.palette.grey[400],
-        },
-        outlined: {
-          color: '#fff',
-          backgroundColor: darkBrandingTheme.palette.primary[700],
-          borderColor: darkBrandingTheme.palette.primary[500],
-          '&:hover': {
-            backgroundColor: darkBrandingTheme.palette.primary[700],
-          },
-        },
-      },
-    },
-  },
-});
-
 const lineMapping: Record<string, number | number[]> = {
   avatar: 2,
   divider: 13,
@@ -70,7 +28,7 @@ const lineMapping: Record<string, number | number[]> = {
 };
 
 export default function CoreShowcase() {
-  const globalTheme = useTheme();
+  const { vars, ...globalTheme } = useTheme();
   const mode = globalTheme.palette.mode;
   const [element, setElement] = React.useState<Data>({ id: null, name: null, target: null });
   const [customized, setCustomized] = React.useState(false);
@@ -219,7 +177,7 @@ export default function CoreShowcase() {
         </React.Fragment>
       }
       code={
-        <ThemeProvider theme={darkBrandingTheme}>
+        <Box data-mui-color-scheme="dark">
           <Box
             sx={{
               p: { xs: 2, sm: 1 },
@@ -227,6 +185,23 @@ export default function CoreShowcase() {
               alignItems: 'center',
               right: 0,
               zIndex: 10,
+              [`& .${buttonClasses.root}`]: {
+                borderRadius: 40,
+                padding: '2px 10px',
+                fontSize: '0.75rem',
+                lineHeight: 18 / 12,
+              },
+              [`& .${buttonClasses.outlined}`]: {
+                color: '#fff',
+                backgroundColor: 'primary.700',
+                borderColor: 'primary.500',
+                '&:hover': {
+                  backgroundColor: 'primary.700',
+                },
+              },
+              [`& .${buttonClasses.text}`]: {
+                color: 'grey.400',
+              },
             }}
           >
             <Button
@@ -235,6 +210,7 @@ export default function CoreShowcase() {
               onClick={() => {
                 setCustomized(false);
               }}
+              sx={{ ml: 0 }}
             >
               Material Design
             </Button>
@@ -244,7 +220,6 @@ export default function CoreShowcase() {
               onClick={() => {
                 setCustomized(true);
               }}
-              sx={{ ml: 1 }}
             >
               Custom Theme
             </Button>
@@ -284,7 +259,7 @@ export default function CoreShowcase() {
               <StylingInfo appeared={customized} sx={{ mb: -2, mx: -2 }} />
             </Box>
           </Box>
-        </ThemeProvider>
+        </Box>
       }
     />
   );
diff --git a/docs/src/components/home/DesignSystemComponents.tsx b/docs/src/components/home/DesignSystemComponents.tsx
index f845c458839a99..337054b94ea83a 100644
--- a/docs/src/components/home/DesignSystemComponents.tsx
+++ b/docs/src/components/home/DesignSystemComponents.tsx
@@ -10,11 +10,14 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 function Placeholder() {
   return (
     <Box
-      sx={{
+      sx={(theme) => ({
         height: { xs: 1484, sm: 825, md: 605 },
-        bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.100'),
         borderRadius: 1,
-      }}
+        bgcolor: 'grey.100',
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.900',
+        }),
+      })}
     />
   );
 }
diff --git a/docs/src/components/home/DiamondSponsors.tsx b/docs/src/components/home/DiamondSponsors.tsx
index 5490b4cb382495..0fed14cbb93314 100644
--- a/docs/src/components/home/DiamondSponsors.tsx
+++ b/docs/src/components/home/DiamondSponsors.tsx
@@ -48,12 +48,12 @@ export default function DiamondSponsors() {
           component="h3"
           variant="h5"
           fontWeight="extraBold"
-          sx={{
-            color: (theme) =>
-              theme.palette.mode === 'dark'
-                ? theme.palette.primary[300]
-                : theme.palette.primary[500],
-          }}
+          sx={(theme) => ({
+            color: 'primary.500',
+            ...theme.applyDarkStyles({
+              color: 'primary.300',
+            }),
+          })}
         >
           Diamond
         </Typography>
@@ -68,15 +68,17 @@ export default function DiamondSponsors() {
           <Grid item xs={12} sm={6} md={4}>
             <Paper
               variant="outlined"
-              sx={{
+              sx={(theme) => ({
                 p: 2,
                 display: 'flex',
                 alignItems: 'center',
                 height: '100%',
                 borderStyle: 'dashed',
-                borderColor: (theme) =>
-                  theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300',
-              }}
+                borderColor: 'grey.300',
+                ...theme.applyDarkStyles({
+                  borderColor: 'primaryDark.400',
+                }),
+              })}
             >
               <IconButton
                 aria-label="Become MUI sponsor"
@@ -85,12 +87,13 @@ export default function DiamondSponsors() {
                 target="_blank"
                 rel="noopener noreferrer"
                 color="primary"
-                sx={{
+                sx={(theme) => ({
                   mr: 2,
                   border: '1px solid',
-                  borderColor: (theme) =>
-                    theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300',
-                }}
+                  ...theme.applyDarkStyles({
+                    borderColor: 'primaryDark.400',
+                  }),
+                })}
               >
                 <AddRounded />
               </IconButton>
diff --git a/docs/src/components/home/GoldSponsors.tsx b/docs/src/components/home/GoldSponsors.tsx
index 2641307c42be6c..b55b9e8848f704 100644
--- a/docs/src/components/home/GoldSponsors.tsx
+++ b/docs/src/components/home/GoldSponsors.tsx
@@ -82,12 +82,12 @@ export default function GoldSponsors() {
           component="h3"
           variant="h5"
           fontWeight="extraBold"
-          sx={{
-            color: (theme) =>
-              theme.palette.mode === 'dark'
-                ? theme.palette.warning[300]
-                : theme.palette.warning[700],
-          }}
+          sx={(theme) => ({
+            color: 'warning.700',
+            ...theme.applyDarkStyles({
+              color: 'warning.300',
+            }),
+          })}
         >
           Gold
         </Typography>
@@ -101,15 +101,17 @@ export default function GoldSponsors() {
         <Grid item xs={12} sm={6} md={4} lg={3}>
           <Paper
             variant="outlined"
-            sx={{
+            sx={(theme) => ({
               p: 2,
               display: 'flex',
               alignItems: 'center',
               height: '100%',
               borderStyle: 'dashed',
-              borderColor: (theme) =>
-                theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300',
-            }}
+              borderColor: 'grey.300',
+              ...theme.applyDarkStyles({
+                borderColor: 'primaryDark.400',
+              }),
+            })}
           >
             <IconButton
               aria-label="Sponsor MUI"
@@ -118,12 +120,14 @@ export default function GoldSponsors() {
               target="_blank"
               rel="noopener noreferrer"
               color="primary"
-              sx={{
+              sx={(theme) => ({
                 mr: 2,
                 border: '1px solid',
-                borderColor: (theme) =>
-                  theme.palette.mode === 'dark' ? 'primaryDark.400' : 'grey.300',
-              }}
+                borderColor: 'grey.300',
+                ...theme.applyDarkStyles({
+                  borderColor: 'primaryDark.400',
+                }),
+              })}
             >
               <AddRounded />
             </IconButton>
diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx
index f42b14c79f5ef0..b5e059fc18130f 100644
--- a/docs/src/components/home/Hero.tsx
+++ b/docs/src/components/home/Hero.tsx
@@ -13,11 +13,16 @@ function createLoading(sx: BoxProps['sx']) {
   return function Loading() {
     return (
       <Box
-        sx={{
-          borderRadius: 1,
-          bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'grey.100'),
-          ...sx,
-        }}
+        sx={[
+          (theme) => ({
+            borderRadius: 1,
+            bgcolor: 'grey.100',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primaryDark.800',
+            }),
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
       />
     );
   };
diff --git a/docs/src/components/home/HeroEnd.tsx b/docs/src/components/home/HeroEnd.tsx
index 0144f8356e02c1..059db1388f9135 100644
--- a/docs/src/components/home/HeroEnd.tsx
+++ b/docs/src/components/home/HeroEnd.tsx
@@ -18,12 +18,16 @@ export default function HeroEnd() {
   return (
     <Box
       ref={ref}
-      sx={{
-        background: (theme) =>
-          theme.palette.mode === 'dark'
-            ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)`
-            : `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`,
-      }}
+      sx={(theme) => ({
+        background: `linear-gradient(180deg, ${
+          (theme.vars || theme).palette.grey[50]
+        } 0%, #FFFFFF 100%)`,
+        ...theme.applyDarkStyles({
+          background: `linear-gradient(180deg, ${
+            (theme.vars || theme).palette.primaryDark[900]
+          } 0%, #001E3C 100%)`,
+        }),
+      })}
     >
       <Container sx={{ py: { xs: 4, sm: 6, md: 8 } }}>
         {inView ? <StartToday /> : <Placeholder />}
diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx
index f93b5b4ef501ae..204ad3f0e536d5 100644
--- a/docs/src/components/home/MaterialDesignComponents.tsx
+++ b/docs/src/components/home/MaterialDesignComponents.tsx
@@ -204,6 +204,8 @@ const StyledChip = styled(Chip)(({ theme }) => ({
 
 export function buildTheme(theme: Theme): ThemeOptions {
   return {
+    // @ts-ignore force `vars` to be null, so that the demo components does not use the upper theme.
+    vars: null,
     palette: {
       ...theme.palette,
       primary: {
@@ -244,6 +246,15 @@ export function buildTheme(theme: Theme): ThemeOptions {
           disableElevation: true,
         },
         styleOverrides: {
+          text:
+            theme.palette.mode === 'dark'
+              ? {
+                  color: 'rgba(255 255 255 / 0.72)',
+                  '&:hover': {
+                    color: '#fff',
+                  },
+                }
+              : {},
           root: {
             borderRadius: '99px',
             fontWeight: 500,
@@ -471,9 +482,15 @@ export default function MaterialDesignComponents() {
   const [customized, setCustomized] = React.useState(false);
   const globalTheme = useTheme();
   const mode = globalTheme.palette.mode;
-  const [theme, setTheme] = React.useState(createTheme({ palette: { mode } }));
+  const [theme, setTheme] = React.useState(
+    createTheme({ palette: { mode }, vars: null } as ThemeOptions),
+  );
   React.useEffect(() => {
-    setTheme(createTheme(customized ? buildTheme(globalTheme) : { palette: { mode } }));
+    setTheme(
+      createTheme(
+        customized ? buildTheme(globalTheme) : ({ palette: { mode }, vars: null } as ThemeOptions),
+      ),
+    );
   }, [mode, customized, globalTheme]);
   return (
     <div>
@@ -541,7 +558,7 @@ export default function MaterialDesignComponents() {
                 open={Boolean(anchor)}
                 anchorEl={anchor}
                 onClose={() => setAnchor(null)}
-                PaperProps={{ variant: 'outlined' }}
+                PaperProps={{ variant: 'outlined', elevation: 0 }}
               >
                 <MenuItem>
                   <ListItemIcon>
diff --git a/docs/src/components/home/MuiStatistics.tsx b/docs/src/components/home/MuiStatistics.tsx
index dc0c12e9971815..5af3ccae36eb6b 100644
--- a/docs/src/components/home/MuiStatistics.tsx
+++ b/docs/src/components/home/MuiStatistics.tsx
@@ -16,25 +16,37 @@ export default function MuiStatistics() {
       {data.map((item) => (
         <Grid key={item.title} item xs={6}>
           <Box
-            sx={{
+            sx={(theme) => ({
               height: '100%',
               p: 0.5,
               pl: 2,
               borderLeft: '2px solid',
-              borderColor: (theme) =>
-                theme.palette.mode === 'dark' ? 'primaryDark.600' : 'primary.100',
-            }}
+              borderColor: 'primary.100',
+              ...theme.applyDarkStyles({
+                borderColor: 'primaryDark.600',
+              }),
+            })}
           >
             <Typography
               component="div"
               variant="h4"
-              color={(theme) => (theme.palette.mode === 'dark' ? 'primary.200' : 'primary.main')}
               fontWeight="bold"
+              sx={(theme) => ({
+                color: 'primary.main',
+                ...theme.applyDarkStyles({
+                  color: 'primary.200',
+                }),
+              })}
             >
               {item.title}
             </Typography>
             <Typography
-              color={(theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800')}
+              sx={(theme) => ({
+                color: 'grey.800',
+                ...theme.applyDarkStyles({
+                  color: 'grey.300',
+                }),
+              })}
             >
               {item.metadata}
             </Typography>
diff --git a/docs/src/components/home/ProductSuite.tsx b/docs/src/components/home/ProductSuite.tsx
index b6baa4e3df56ae..2d94df2ccc14ae 100644
--- a/docs/src/components/home/ProductSuite.tsx
+++ b/docs/src/components/home/ProductSuite.tsx
@@ -15,11 +15,16 @@ function createLoading(sx: BoxProps['sx']) {
   return function Loading() {
     return (
       <Box
-        sx={{
-          borderRadius: 1,
-          bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.800' : 'grey.100'),
-          ...sx,
-        }}
+        sx={[
+          (theme) => ({
+            borderRadius: 1,
+            bgcolor: 'grey.100',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primaryDark.800',
+            }),
+          }),
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
       />
     );
   };
@@ -44,11 +49,14 @@ function ProductSuite() {
   return (
     <Box
       ref={ref}
-      sx={{
-        bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
+      sx={(theme) => ({
+        bgcolor: 'grey.50',
         py: { xs: 4, sm: 6, md: 8 },
         overflow: 'hidden',
-      }}
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.900',
+        }),
+      })}
     >
       <Container>
         <Grid container spacing={2}>
diff --git a/docs/src/components/home/References.tsx b/docs/src/components/home/References.tsx
index befaee1c386d7b..fb80972868f14f 100644
--- a/docs/src/components/home/References.tsx
+++ b/docs/src/components/home/References.tsx
@@ -34,15 +34,18 @@ function References({
         {inView && <CompaniesGrid data={companies} />}
       </Box>
       <Typography
-        color={(theme) => (theme.palette.mode === 'dark' ? 'grey.500' : 'grey.800')}
         textAlign="center"
         variant="body2"
-        sx={{
+        sx={(theme) => ({
+          color: 'grey.800',
+          ...theme.applyDarkStyles({
+            color: 'grey.500',
+          }),
           minHeight: 42, // hard-coded to reduce CLS (layout shift)
           mt: 4,
           mx: 'auto',
           maxWidth: 400,
-        }}
+        })}
       >
         The world&apos;s best product teams trust MUI to deliver an unrivaled experience for both
         developers and users.
diff --git a/docs/src/components/home/Testimonials.tsx b/docs/src/components/home/Testimonials.tsx
index fdf0d77fe3f377..87ce962a6651b9 100644
--- a/docs/src/components/home/Testimonials.tsx
+++ b/docs/src/components/home/Testimonials.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import dynamic from 'next/dynamic';
 import { useInView } from 'react-intersection-observer';
-import { ThemeProvider } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
-import { brandingDarkTheme } from 'docs/src/modules/brandingTheme';
 import MuiStatistics from 'docs/src/components/home/MuiStatistics';
 
 const UserFeedbacks = dynamic(() => import('./UserFeedbacks'));
@@ -17,24 +15,25 @@ function Testimonials() {
     rootMargin: '500px',
   });
   return (
-    <ThemeProvider theme={brandingDarkTheme}>
-      <Box
-        ref={ref}
-        sx={{
-          background: (theme) =>
-            `linear-gradient(85deg, ${theme.palette.primaryDark[700]} 0%, ${theme.palette.primaryDark[600]} 100%)`,
-        }}
-      >
-        <Container sx={{ py: { xs: 4, md: 8 } }}>
-          <Grid container spacing={3} alignItems="center">
-            <Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
-              {inView && <UserFeedbacks />}
-            </Grid>
-            <MuiStatistics />
+    <Box
+      data-mui-color-scheme="dark"
+      ref={ref}
+      sx={{
+        background: (theme) =>
+          `linear-gradient(85deg, ${(theme.vars || theme).palette.primaryDark[700]} 0%, ${
+            (theme.vars || theme).palette.primaryDark[600]
+          } 100%)`,
+      }}
+    >
+      <Container sx={{ py: { xs: 4, md: 8 } }}>
+        <Grid container spacing={3} alignItems="center">
+          <Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
+            {inView && <UserFeedbacks />}
           </Grid>
-        </Container>
-      </Box>
-    </ThemeProvider>
+          <MuiStatistics />
+        </Grid>
+      </Container>
+    </Box>
   );
 }
 
diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx
index 993f64e068f03c..7afa3fe1b1f38a 100644
--- a/docs/src/components/icon/IconImage.tsx
+++ b/docs/src/components/icon/IconImage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useTheme, styled, Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
+import Box from '@mui/material/Box';
 import Tooltip from '@mui/material/Tooltip';
 
 export type IconImageProps = {
@@ -45,24 +46,28 @@ const Img = styled('img')({ display: 'inline-block', verticalAlign: 'bottom' });
 export default function IconImage(props: IconImageProps) {
   const { name, title, ...other } = props;
   const theme = useTheme();
-  let width = '';
-  let height = '';
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  let width;
+  let height;
   let category = '';
   let mode = `-${theme.palette.mode}`;
   if (name.startsWith('product-')) {
-    width = '36';
-    height = '36';
+    width = 36;
+    height = 36;
   }
   if (name.startsWith('block-')) {
     category = 'pricing/';
     mode = '';
-    width = '13';
-    height = '15';
+    width = 13;
+    height = 15;
   }
   if (['yes', 'no', 'time'].indexOf(name) !== -1) {
     category = 'pricing/';
-    width = '18';
-    height = '18';
+    width = 18;
+    height = 18;
   }
   if (
     [
@@ -89,6 +94,10 @@ export default function IconImage(props: IconImageProps) {
   ) {
     category = 'companies/';
   }
+  if (!mounted && !!theme.vars) {
+    // Prevent hydration mismatch between the light and dark mode image source.
+    return <Box sx={{ width, height, display: 'inline-block' }} />;
+  }
   const element = (
     <Img
       src={`/static/branding/${category}${name}${mode}.svg`}
diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
index 1a77cf13fd6da0..ad7c602c52b598 100644
--- a/docs/src/components/showcase/FolderTable.tsx
+++ b/docs/src/components/showcase/FolderTable.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
@@ -64,95 +64,7 @@ function formatSize(size: number) {
   return `${(kb / 1000).toFixed(0)} MB`;
 }
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  main: '#007FFF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function BasicTable() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          grey,
-          ...(mode === 'light' && {
-            text: {
-              primary: grey[800],
-              secondary: grey[600],
-            },
-          }),
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          success: {
-            main: mode === 'dark' ? '#1AA251' : '#178D46',
-          },
-          background: {
-            paper: mode === 'dark' ? primaryDark[800] : '#fff',
-          },
-        },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        shape: {
-          borderRadius: 10,
-        },
-        components: {
-          MuiTableCell: {
-            styleOverrides: {
-              root: {
-                borderColor: mode === 'dark' ? primaryDark[500] : grey[200],
-              },
-              sizeSmall: {
-                padding: '0.625rem 1rem',
-              },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
   const [order, setOrder] = React.useState<Order>('asc');
   const [orderBy, setOrderBy] = React.useState<keyof Data>('name');
   const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof Data) => {
@@ -168,55 +80,79 @@ export default function BasicTable() {
     { id: 'size', label: 'Size', TableCellProps: { align: 'right' } },
   ] as const;
   return (
-    <ThemeProvider theme={theme}>
-      <TableContainer component={Paper} variant="outlined" sx={{ maxWidth: 260 }}>
-        <Table aria-label="folder table" size="small">
-          <TableHead>
-            <TableRow>
-              {headCells.map((headCell) => (
-                <TableCell
-                  key={headCell.id}
-                  sortDirection={orderBy === headCell.id ? order : false}
-                  {...headCell.TableCellProps}
+    <TableContainer
+      component={Paper}
+      variant="outlined"
+      sx={[
+        {
+          maxWidth: 260,
+          [`& .${tableCellClasses.root}`]: {
+            borderColor: 'grey.200',
+          },
+          [`& .${tableCellClasses.sizeSmall}`]: {
+            padding: '0.625rem 1rem',
+          },
+        },
+        (theme) =>
+          theme.applyDarkStyles({
+            bgcolor: 'primaryDark.800',
+            [`& .${tableCellClasses.root}`]: {
+              borderColor: 'primaryDark.500',
+            },
+          }),
+      ]}
+    >
+      <Table aria-label="folder table" size="small">
+        <TableHead>
+          <TableRow>
+            {headCells.map((headCell) => (
+              <TableCell
+                key={headCell.id}
+                sortDirection={orderBy === headCell.id ? order : false}
+                {...headCell.TableCellProps}
+              >
+                <TableSortLabel
+                  active={orderBy === headCell.id}
+                  direction={orderBy === headCell.id ? order : 'asc'}
+                  onClick={createSortHandler(headCell.id)}
+                  sx={{ fontSize: '0.75rem' }}
                 >
-                  <TableSortLabel
-                    active={orderBy === headCell.id}
-                    direction={orderBy === headCell.id ? order : 'asc'}
-                    onClick={createSortHandler(headCell.id)}
-                    sx={{ fontSize: '0.75rem' }}
-                  >
-                    {headCell.label}
-                    {orderBy === headCell.id ? (
-                      <Box component="span" sx={visuallyHidden}>
-                        {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                      </Box>
-                    ) : null}
-                  </TableSortLabel>
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {stableSort(data, getComparator(order, orderBy)).map((row) => (
-              <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                <TableCell component="th" scope="row">
-                  <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                    <Folder
-                      sx={{ mr: 1 }}
-                      fontSize="small"
-                      htmlColor={mode === 'dark' ? primary[700] : grey[300]}
-                    />{' '}
-                    {row.name}
-                  </Box>
-                </TableCell>
-                <TableCell align="right" sx={{ color: 'success.main' }}>
-                  {formatSize(row.size)}
-                </TableCell>
-              </TableRow>
+                  {headCell.label}
+                  {orderBy === headCell.id ? (
+                    <Box component="span" sx={visuallyHidden}>
+                      {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                    </Box>
+                  ) : null}
+                </TableSortLabel>
+              </TableCell>
             ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </ThemeProvider>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {stableSort(data, getComparator(order, orderBy)).map((row) => (
+            <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+              <TableCell component="th" scope="row">
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <Folder
+                    sx={(theme: Theme) => ({
+                      mr: 1,
+                      color: 'grey.300',
+                      ...theme.applyDarkStyles({
+                        color: 'primary.700',
+                      }),
+                    })}
+                    fontSize="small"
+                  />{' '}
+                  {row.name}
+                </Box>
+              </TableCell>
+              <TableCell align="right" sx={{ color: 'success.main' }}>
+                {formatSize(row.size)}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
   );
 }
diff --git a/docs/src/components/showcase/NotificationCard.tsx b/docs/src/components/showcase/NotificationCard.tsx
index cadc74d69d2a5c..1806c4590a1067 100644
--- a/docs/src/components/showcase/NotificationCard.tsx
+++ b/docs/src/components/showcase/NotificationCard.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
@@ -7,183 +6,56 @@ import Chip from '@mui/material/Chip';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 
-declare module '@mui/material/Chip' {
-  interface ChipPropsVariantOverrides {
-    notification: true;
-  }
-}
-
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  main: '#007FFF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-  1000: '#132F4C',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function NotificationCard() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          ...(mode === 'light' && {
-            text: {
-              primary: grey[900],
-              secondary: grey[800],
-            },
-          }),
-          grey,
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          success: {
-            main: '#1AA251',
-          },
-          background: {
-            paper: mode === 'dark' ? primaryDark[800] : '#fff',
-          },
-        },
-        shape: {
-          borderRadius: 8,
-        },
-        spacing: 10,
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-          fontWeightRegular: 500,
-        },
-        components: {
-          MuiAvatar: {
-            styleOverrides: {
-              root: {
-                width: 40,
-                height: 40,
-              },
-            },
-          },
-          MuiButtonBase: {
-            defaultProps: {
-              disableTouchRipple: true,
-            },
-          },
-          MuiChip: {
-            variants: [
-              {
-                props: { variant: 'notification' },
-                style: { color: '#fff', fontSize: '0.75rem', height: 18 },
-              },
-            ],
-          },
-          MuiLinearProgress: {
-            styleOverrides: {
-              root: {
-                borderRadius: 10,
-                backgroundColor: 'rgba(255,255,255,0.12)',
-              },
-              bar: {
-                borderRadius: 10,
-                backgroundColor: '#fff',
-              },
-            },
-          },
-          MuiIconButton: {
-            defaultProps: {
-              size: 'small',
-            },
-            styleOverrides: {
-              root: {
-                border: '1px solid',
-                borderColor: grey[200],
-              },
-            },
-          },
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'small',
-            },
-          },
-        },
-      }),
-    [mode],
-  );
   return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <Card variant="outlined" sx={{ display: 'flex', p: 1.5, maxWidth: 283 }}>
-          <Avatar
-            imgProps={{ 'aria-labelledby': 'demo-notification-card-messenger-name' }}
-            src="/static/images/avatar/3-sm.jpeg"
-            variant="rounded"
-          />
-          <Box sx={{ ml: 1, flexBasis: 180, flexGrow: 1, minWidth: '0px' }}>
-            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-              <Typography
-                id="demo-notification-card-messenger-name"
-                color="text.secondary"
-                variant="caption"
-              >
-                Angela Erickson
-              </Typography>
-              <Typography color="text.secondary" variant="caption">
-                12:50
+    <Fade in timeout={700}>
+      <Card
+        variant="outlined"
+        sx={(theme) => ({
+          display: 'flex',
+          p: 1.5,
+          maxWidth: 283,
+          ...theme.applyDarkStyles({
+            bgcolor: 'primaryDark.800',
+          }),
+        })}
+      >
+        <Avatar
+          imgProps={{ 'aria-labelledby': 'demo-notification-card-messenger-name' }}
+          src="/static/images/avatar/3-sm.jpeg"
+          variant="rounded"
+          sx={{ width: 40, height: 40 }}
+        />
+        <Box sx={{ ml: 1, flexBasis: 180, flexGrow: 1, minWidth: '0px' }}>
+          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <Typography
+              id="demo-notification-card-messenger-name"
+              color="text.secondary"
+              variant="caption"
+              sx={{ fontWeight: 500 }}
+            >
+              Angela Erickson
+            </Typography>
+            <Typography color="text.secondary" variant="caption">
+              12:50
+            </Typography>
+          </Box>
+          <Box sx={{ display: 'flex', mt: 0.5 }}>
+            <Box sx={{ flexGrow: 1, minWidth: '0px' }}>
+              <Typography component="div">Great news</Typography>
+              <Typography variant="caption" color="text.secondary" noWrap sx={{ fontWeight: 500 }}>
+                Hey! Check this out, just a few minutes ago...
               </Typography>
             </Box>
-            <Box sx={{ display: 'flex', mt: 0.5 }}>
-              <Box sx={{ flexGrow: 1, minWidth: '0px' }}>
-                <Typography component="div">Great news</Typography>
-                <Typography variant="caption" color="text.secondary" noWrap>
-                  Hey! Check this out, just a few minutes ago...
-                </Typography>
-              </Box>
-              <Chip
-                label="3"
-                color="success"
-                variant="notification"
-                size="small"
-                sx={{ mt: '3px' }}
-              />
-            </Box>
+            <Chip
+              label="3"
+              color="success"
+              size="small"
+              sx={{ mt: '3px', color: '#fff', fontSize: '0.75rem', height: 18 }}
+            />
           </Box>
-        </Card>
-      </Fade>
-    </ThemeProvider>
+        </Box>
+      </Card>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx
index ce12ae24e33f7e..28e00d81810243 100644
--- a/docs/src/components/showcase/PlayerCard.tsx
+++ b/docs/src/components/showcase/PlayerCard.tsx
@@ -1,172 +1,97 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme, Theme } from '@mui/material/styles';
+import { ThemeProvider, Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import Card from '@mui/material/Card';
 import CardMedia from '@mui/material/CardMedia';
 import Fade from '@mui/material/Fade';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import FastForwardRounded from '@mui/icons-material/FastForwardRounded';
 import FastRewindRounded from '@mui/icons-material/FastRewindRounded';
 import PlayArrowRounded from '@mui/icons-material/PlayArrowRounded';
 import PauseRounded from '@mui/icons-material/PauseRounded';
 
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function PlayerCard({ theme: externalTheme }: { theme?: Theme }) {
   const [paused, setPaused] = React.useState(true);
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          background: {
-            paper: mode === 'dark' ? primaryDark[800] : '#fff',
-          },
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          ...(mode === 'light' && {
-            text: {
-              primary: grey[900],
-              secondary: grey[800],
-            },
-          }),
-          grey,
-        },
-        shape: {
-          borderRadius: 8,
-        },
-        spacing: 10,
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        components: {
-          MuiButtonBase: {
-            defaultProps: {
-              disableTouchRipple: true,
-            },
-          },
-          MuiAvatar: {
-            styleOverrides: {
-              root: {
-                border: '1px solid',
-                borderColor: mode === 'dark' ? primaryDark[500] : '#fff',
-              },
+  const ui = (
+    <Fade in timeout={700}>
+      <Card
+        variant="outlined"
+        sx={[
+          {
+            p: 1,
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            [`& .${iconButtonClasses.root}`]: {
+              border: '1px solid',
+              borderColor: 'grey.200',
             },
           },
-          MuiIconButton: {
-            defaultProps: {
-              size: 'small',
-            },
-            styleOverrides: {
-              root: {
-                border: '1px solid',
-                borderColor: mode === 'dark' ? primaryDark[500] : grey[200],
+          (theme) =>
+            theme.applyDarkStyles({
+              bgcolor: 'primaryDark.800',
+              [`& .${iconButtonClasses.root}`]: {
+                borderColor: 'primaryDark.500',
               },
-            },
-          },
-          MuiSvgIcon: {
-            defaultProps: {
-              fontSize: 'small',
-            },
-          },
-        },
-      }),
-    [mode],
-  );
-  return (
-    <ThemeProvider theme={externalTheme || theme}>
-      <Fade in timeout={700}>
-        <Card
-          variant="outlined"
+            }),
+        ]}
+      >
+        <CardMedia
+          component="img"
+          width="124"
+          height="124"
+          alt="Beside Myself album cover"
+          src="/static/images/cards/basement-beside-myself.jpeg"
           sx={{
-            p: 1,
-            display: 'flex',
-            flexDirection: { xs: 'column', sm: 'row' },
+            borderRadius: 0.5,
+            width: 'clamp(124px, (304px - 100%) * 999 , 100%)',
           }}
-        >
-          <CardMedia
-            component="img"
-            width="124"
-            height="124"
-            alt="Beside Myself album cover"
-            src="/static/images/cards/basement-beside-myself.jpeg"
-            sx={{
-              borderRadius: 0.5,
-              width: 'clamp(124px, (304px - 100%) * 999 , 100%)',
-            }}
-          />
-          <Box sx={{ alignSelf: 'center', px: { xs: 0, sm: 2 } }}>
-            <Typography
-              variant="body1"
-              color="text.primary"
-              fontWeight={600}
-              sx={{ textAlign: { xs: 'center', sm: 'start' }, mt: { xs: 1.5, sm: 0 } }}
-            >
-              Ultraviolet
-            </Typography>
-            <Typography
-              component="div"
-              variant="caption"
-              color="text.secondary"
-              fontWeight={500}
-              sx={{ textAlign: { xm: 'center', sm: 'start' } }}
-            >
-              Basement • Beside Myself
-            </Typography>
-            <Stack
-              direction="row"
-              spacing={1}
-              sx={{ mt: 2, justifyContent: { xs: 'space-between', sm: 'flex-start' } }}
+        />
+        <Box sx={{ alignSelf: 'center', px: { xs: 0, sm: 2 } }}>
+          <Typography
+            variant="body1"
+            color="text.primary"
+            fontWeight={600}
+            sx={{ textAlign: { xs: 'center', sm: 'start' }, mt: { xs: 1.5, sm: 0 } }}
+          >
+            Ultraviolet
+          </Typography>
+          <Typography
+            component="div"
+            variant="caption"
+            color="text.secondary"
+            fontWeight={500}
+            sx={{ textAlign: { xm: 'center', sm: 'start' } }}
+          >
+            Basement • Beside Myself
+          </Typography>
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{ mt: 2, justifyContent: { xs: 'space-between', sm: 'flex-start' } }}
+          >
+            <IconButton aria-label="fast rewind" disabled size="small">
+              <FastRewindRounded fontSize="small" />
+            </IconButton>
+            <IconButton
+              aria-label={paused ? 'play' : 'pause'}
+              size="small"
+              sx={{ mx: 1 }}
+              onClick={() => setPaused((val) => !val)}
             >
-              <IconButton aria-label="fast rewind" disabled>
-                <FastRewindRounded />
-              </IconButton>
-              <IconButton
-                aria-label={paused ? 'play' : 'pause'}
-                sx={{ mx: 1 }}
-                onClick={() => setPaused((val) => !val)}
-              >
-                {paused ? <PlayArrowRounded /> : <PauseRounded />}
-              </IconButton>
-              <IconButton aria-label="fast forward" disabled>
-                <FastForwardRounded />
-              </IconButton>
-            </Stack>
-          </Box>
-        </Card>
-      </Fade>
-    </ThemeProvider>
+              {paused ? <PlayArrowRounded fontSize="small" /> : <PauseRounded fontSize="small" />}
+            </IconButton>
+            <IconButton aria-label="fast forward" disabled size="small">
+              <FastForwardRounded fontSize="small" />
+            </IconButton>
+          </Stack>
+        </Box>
+      </Card>
+    </Fade>
   );
+  if (!externalTheme) {
+    return ui;
+  }
+  return <ThemeProvider theme={externalTheme}>{ui}</ThemeProvider>;
 }
diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx
index 82dea1a7262304..5803267ed95e13 100644
--- a/docs/src/components/showcase/TaskCard.tsx
+++ b/docs/src/components/showcase/TaskCard.tsx
@@ -1,151 +1,99 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import Fade from '@mui/material/Fade';
-import LinearProgress from '@mui/material/LinearProgress';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
 import CodeRounded from '@mui/icons-material/CodeRounded';
 import ScheduleRounded from '@mui/icons-material/ScheduleRounded';
 
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    gradient: true;
-  }
-}
-
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  main: '#007FFF', // contrast 3.83:1
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-
-const theme = createTheme({
-  palette: { mode: 'dark', primary },
-  shape: {
-    borderRadius: 10,
-  },
-  spacing: 10,
-  typography: {
-    fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-    h6: {
-      lineHeight: 1.2,
-      fontWeight: 700,
-    },
-  },
-  components: {
-    MuiPaper: {
-      variants: [
-        {
-          props: { variant: 'gradient' },
-          style: {
-            background: `linear-gradient(to right bottom, ${primary.main}, ${primary[700]} 120%)`,
-            boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
-          },
-        },
-      ],
-    },
-    MuiAvatar: {
-      styleOverrides: {
-        root: {
-          border: '1px solid #fff',
-        },
-      },
-    },
-    MuiLinearProgress: {
-      styleOverrides: {
-        root: {
-          borderRadius: 10,
-          backgroundColor: 'rgba(255,255,255,0.12)',
-        },
-        bar: {
-          borderRadius: 10,
-          backgroundColor: '#fff',
-        },
-      },
-    },
-  },
-});
-
 export default function TaskCard() {
   return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <Card
-          variant="gradient"
-          sx={{
-            minWidth: 280,
-            maxWidth: 360,
-            minHeight: 280,
-            display: 'flex',
-            flexDirection: 'column',
-            p: 2.5,
-          }}
-        >
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <ScheduleRounded fontSize="inherit" />
-            <Typography
-              color="text.secondary"
-              variant="caption"
-              fontWeight={500}
-              sx={{ ml: 0.5, mt: '1px' }}
-            >
-              March 25th
-            </Typography>
+    <Fade in timeout={700}>
+      <Card
+        data-mui-color-scheme="dark"
+        sx={(theme) => ({
+          minWidth: 280,
+          maxWidth: 360,
+          minHeight: 280,
+          display: 'flex',
+          flexDirection: 'column',
+          p: 2.5,
+          color: '#fff',
+          background: `linear-gradient(to right bottom, ${
+            (theme.vars || theme).palette.primary[500]
+          }, ${(theme.vars || theme).palette.primary[700]} 120%)`,
+          boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
+        })}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <ScheduleRounded fontSize="inherit" />
+          <Typography
+            color="rgba(255, 255, 255, 0.7)"
+            variant="caption"
+            fontWeight={500}
+            sx={{ ml: 0.5, mt: '1px' }}
+          >
+            March 25th
+          </Typography>
+        </Box>
+        <Box sx={{ my: 'auto' }}>
+          <Box
+            sx={{
+              width: 28,
+              height: 28,
+              bgcolor: '#fff',
+              borderRadius: 0.75,
+              p: '2px',
+            }}
+          >
+            <CodeRounded color="primary" />
           </Box>
-          <Box sx={{ my: 'auto' }}>
-            <Box
-              sx={{
-                width: 28,
-                height: 28,
-                bgcolor: '#fff',
-                borderRadius: 0.75,
-                p: '2px',
-              }}
-            >
-              <CodeRounded color="primary" />
-            </Box>
-            <Typography variant="h6" component="div" sx={{ mt: 1.5, fontWeight: 500 }}>
-              Check the docs for getting every component API
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{ mt: 1.5, fontWeight: 500, lineHeight: 1.2 }}
+          >
+            Check the docs for getting every component API
+          </Typography>
+        </Box>
+        <Box sx={{ display: 'flex' }}>
+          <Avatar
+            imgProps={{ 'aria-labelledby': 'demo-task-card-assigne-name' }}
+            src="/static/images/avatar/1-sm.jpeg"
+            variant="rounded"
+            sx={{ border: '1px solid #fff' }}
+          />
+          <Box sx={{ ml: 1 }}>
+            <Typography variant="body2" color="primary.200" fontWeight={500}>
+              Assigned to
             </Typography>
-          </Box>
-          <Box sx={{ display: 'flex' }}>
-            <Avatar
-              imgProps={{ 'aria-labelledby': 'demo-task-card-assigne-name' }}
-              src="/static/images/avatar/1-sm.jpeg"
-              variant="rounded"
-            />
-            <Box sx={{ ml: 1 }}>
-              <Typography variant="body2" color="primary.200" fontWeight={500}>
-                Assigned to
-              </Typography>
-              <Typography id="demo-task-card-assigne-name" fontWeight={500}>
-                Michael Scott
-              </Typography>
-            </Box>
-          </Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', mb: -0.5, mt: 0.5 }}>
-            <LinearProgress
-              aria-label="Progress"
-              variant="determinate"
-              value={60}
-              sx={{ flexGrow: 1 }}
-            />
-            <Typography color="#00C8FF" variant="body2" sx={{ ml: 2 }}>
-              <b>60%</b>
+            <Typography id="demo-task-card-assigne-name" fontWeight={500}>
+              Michael Scott
             </Typography>
           </Box>
-        </Card>
-      </Fade>
-    </ThemeProvider>
+        </Box>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: -0.5, mt: 0.5 }}>
+          <LinearProgress
+            aria-label="Progress"
+            variant="determinate"
+            value={60}
+            sx={{
+              flexGrow: 1,
+              borderRadius: 10,
+              backgroundColor: 'rgba(255,255,255,0.12)',
+              [`& .${linearProgressClasses.bar}`]: {
+                borderRadius: 10,
+                backgroundColor: '#fff',
+              },
+            }}
+          />
+          <Typography color="#00C8FF" variant="body2" sx={{ ml: 2 }}>
+            <b>60%</b>
+          </Typography>
+        </Box>
+      </Card>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/ThemeAccordion.tsx b/docs/src/components/showcase/ThemeAccordion.tsx
index 3aaa6f6ee0013a..8855212ee57661 100644
--- a/docs/src/components/showcase/ThemeAccordion.tsx
+++ b/docs/src/components/showcase/ThemeAccordion.tsx
@@ -1,189 +1,106 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
+import Accordion, { accordionClasses } from '@mui/material/Accordion';
+import AccordionSummary, { accordionSummaryClasses } from '@mui/material/AccordionSummary';
+import AccordionDetails, { accordionDetailsClasses } from '@mui/material/AccordionDetails';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Folder from '@mui/icons-material/Folder';
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function ThemeAccordion() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          grey,
-          background: {
-            paper: mode === 'dark' ? primaryDark[800] : '#fff',
-          },
-          ...(mode === 'light' && {
-            text: {
-              primary: grey[900],
-              secondary: grey[800],
-            },
-          }),
-          ...(mode === 'dark' && {
-            text: {
-              primary: '#fff',
-              secondary: grey[500],
-            },
-          }),
-        },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        shape: {
-          borderRadius: 10,
-        },
-        spacing: 10,
-        components: {
-          MuiButtonBase: {
-            defaultProps: {
-              disableTouchRipple: true,
-            },
-          },
-          MuiAccordion: {
-            styleOverrides: {
-              root: {
-                '&.Mui-expanded': {
-                  margin: 0,
-                },
-                '&:not(:first-of-type)': {
-                  marginTop: -1,
-                },
+  return (
+    <Fade in timeout={700}>
+      <Box
+        sx={[
+          {
+            [`& .${accordionClasses.root}`]: {
+              bgcolor: '#fff',
+              [`&.${accordionClasses.expanded}`]: {
+                margin: 0,
+              },
+              '&:not(:first-of-type)': {
+                marginTop: '-1px',
               },
             },
-          },
-          MuiAccordionSummary: {
-            styleOverrides: {
-              root: {
-                '&.Mui-expanded': {
-                  minHeight: 'auto',
-                },
+            [`& .${accordionSummaryClasses.root}`]: {
+              [`&.${accordionSummaryClasses.expanded}`]: {
+                minHeight: 'auto',
               },
-              content: {
+              [`& .${accordionSummaryClasses.content}`]: {
                 flexDirection: 'column',
                 margin: '20px 0 !important',
                 '& svg': {
-                  color: mode === 'dark' ? grey[800] : grey[500],
-                  marginRight: 20,
+                  marginTop: '3px',
+                  marginRight: '20px',
+                  color: 'grey.500',
                 },
               },
-              expandIconWrapper: {
-                color: primary[500],
+              [`& .${accordionSummaryClasses.expandIconWrapper}`]: {
+                color: 'primary.500',
               },
             },
-          },
-          MuiAccordionDetails: {
-            styleOverrides: {
-              root: {
-                paddingTop: 0,
-              },
+            [`& .${accordionDetailsClasses.root}`]: {
+              paddingTop: 0,
             },
           },
-        },
-      }),
-    [mode],
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <div>
-          <Accordion variant="outlined">
-            <AccordionSummary
-              expandIcon={<ExpandMoreIcon />}
-              aria-controls="panel1a-content"
-              id="panel1a-header"
-            >
-              <Box sx={{ display: 'flex' }}>
-                <Folder fontSize="small" />
-                <div>
-                  <Typography>Fonts</Typography>
-                  <Typography variant="body2" color="text.secondary">
-                    Typefaces used in this branding project.
-                  </Typography>
-                </div>
-              </Box>
-            </AccordionSummary>
-            <AccordionDetails>
-              <Typography variant="body2" color="text.secondary">
-                Tag line headings (h1, h2) use Plus Jakarta Sans, whereas the rest of the elements
-                use IBM Plex Sans.
-              </Typography>
-            </AccordionDetails>
-          </Accordion>
-          <Accordion variant="outlined">
-            <AccordionSummary
-              disabled
-              expandIcon={<ExpandMoreIcon />}
-              aria-controls="panel2a-content"
-              id="panel2a-header"
-            >
-              <Box sx={{ display: 'flex' }}>
-                <Folder fontSize="small" />
-                <div>
-                  <Typography>Hacks</Typography>
-                  <Typography variant="body2" color="text.secondary">
-                    Some of our secrets to make this website.
-                  </Typography>
-                </div>
-              </Box>
-            </AccordionSummary>
-          </Accordion>
-        </div>
-      </Fade>
-    </ThemeProvider>
+          (theme) =>
+            theme.applyDarkStyles({
+              [`& .${accordionClasses.root}`]: {
+                bgcolor: 'primaryDark.800',
+              },
+              [`& .${accordionSummaryClasses.root}`]: {
+                [`& .${accordionSummaryClasses.content}`]: {
+                  '& svg': {
+                    color: 'grey.300',
+                  },
+                },
+              },
+            }),
+        ]}
+      >
+        <Accordion variant="outlined">
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel1a-content"
+            id="panel1a-header"
+          >
+            <Box sx={{ display: 'flex' }}>
+              <Folder fontSize="small" />
+              <div>
+                <Typography>Fonts</Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Typefaces used in this branding project.
+                </Typography>
+              </div>
+            </Box>
+          </AccordionSummary>
+          <AccordionDetails>
+            <Typography variant="body2" color="text.secondary">
+              Tag line headings (h1, h2) use Plus Jakarta Sans, whereas the rest of the elements use
+              IBM Plex Sans.
+            </Typography>
+          </AccordionDetails>
+        </Accordion>
+        <Accordion variant="outlined">
+          <AccordionSummary
+            disabled
+            expandIcon={<ExpandMoreIcon />}
+            aria-controls="panel2a-content"
+            id="panel2a-header"
+          >
+            <Box sx={{ display: 'flex' }}>
+              <Folder fontSize="small" />
+              <div>
+                <Typography>Hacks</Typography>
+                <Typography variant="body2" color="text.secondary">
+                  Some of our secrets to make this website.
+                </Typography>
+              </div>
+            </Box>
+          </AccordionSummary>
+        </Accordion>
+      </Box>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/ThemeChip.tsx b/docs/src/components/showcase/ThemeChip.tsx
index a93792452d7732..e59646c868a5f7 100644
--- a/docs/src/components/showcase/ThemeChip.tsx
+++ b/docs/src/components/showcase/ThemeChip.tsx
@@ -1,96 +1,61 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
-import Chip from '@mui/material/Chip';
+import Chip, { chipClasses } from '@mui/material/Chip';
 import Stack from '@mui/material/Stack';
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function ThemeChip() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary: {
-            main: primary[500],
-          },
-        },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-          fontWeightRegular: 500,
-        },
-        components: {
-          MuiChip: {
-            styleOverrides: {
-              label: {
-                marginBottom: '1px',
-                fontSize: '0.875rem',
-                lineHeight: 1.5,
-                fontWeight: 700,
+  return (
+    <Stack
+      direction="row"
+      spacing={2}
+      sx={[
+        {
+          [`& .${chipClasses.root}`]: {
+            [`&.${chipClasses.filled}`]: {
+              color: 'grey.800',
+              bgcolor: 'grey.200',
+              [`&.${chipClasses.colorPrimary}`]: {
+                bgcolor: 'primary.100',
+                color: 'primary.500',
               },
-              filled: {
-                color: mode === 'dark' ? '#fff' : grey[800],
-                backgroundColor: mode === 'dark' ? grey[900] : grey[200],
-                '&.MuiChip-colorPrimary': {
-                  backgroundColor: primary[100],
-                  color: primary[500],
-                },
+            },
+            [`& .${chipClasses.label}`]: {
+              marginBottom: '1px',
+              fontSize: '0.875rem',
+              lineHeight: 1.5,
+              fontWeight: 700,
+            },
+            [`& .${chipClasses.deleteIcon}`]: {
+              color: 'grey.500',
+              '&:hover': {
+                color: 'grey.700',
               },
-              deleteIcon: {
-                color: grey[700],
-                '&:hover': {
-                  color: mode === 'dark' ? grey[500] : grey[800],
-                },
+            },
+            [`& .${chipClasses.deleteIconColorPrimary}`]: {
+              color: 'primary.500',
+              '&:hover': {
+                color: 'primary.700',
+              },
+            },
+          },
+        },
+        (theme) =>
+          theme.applyDarkStyles({
+            [`& .${chipClasses.root}`]: {
+              [`&.${chipClasses.filled}`]: {
+                color: '#fff',
+                bgcolor: 'grey.700',
               },
-              deleteIconColorPrimary: {
-                color: primary[500],
+              [`& .${chipClasses.deleteIcon}`]: {
                 '&:hover': {
-                  color: primary[700],
+                  color: 'grey.400',
                 },
               },
             },
-          },
-        },
-      }),
-    [mode],
-  );
-  return (
-    <ThemeProvider theme={theme}>
-      <Stack direction="row" spacing={2}>
-        <Chip label="React" color="primary" onDelete={() => {}} />
-        <Chip label="JavaScript" onDelete={() => {}} />
-      </Stack>
-    </ThemeProvider>
+          }),
+      ]}
+    >
+      <Chip label="React" color="primary" onDelete={() => {}} />
+      <Chip label="Javascript" onDelete={() => {}} />
+    </Stack>
   );
 }
diff --git a/docs/src/components/showcase/ThemeDatePicker.tsx b/docs/src/components/showcase/ThemeDatePicker.tsx
index 6c4ad9fd03ff3f..ba9d95b520e767 100644
--- a/docs/src/components/showcase/ThemeDatePicker.tsx
+++ b/docs/src/components/showcase/ThemeDatePicker.tsx
@@ -1,165 +1,111 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
+import { iconButtonClasses } from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker';
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function ThemeDatePicker() {
   const [value, setValue] = React.useState<Date | null>(new Date());
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(() => {
-    const baseTheme = createTheme({
-      palette: {
-        mode,
-        primary,
-        background: {
-          paper: mode === 'dark' ? primaryDark[800] : '#fff',
-        },
-      },
-      shape: {
-        borderRadius: 10,
-      },
-      spacing: 10,
-      typography: {
-        fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        button: {
-          textTransform: 'initial',
-        },
-      },
-    });
-    return createTheme(baseTheme, {
-      components: {
-        MuiButtonBase: {
-          defaultProps: {
-            disableTouchRipple: true,
-          },
-        },
-        MuiIconButton: {
-          styleOverrides: {
-            root: {
-              color: mode === 'dark' ? primary[300] : primary[500],
-            },
-          },
-        },
-        MuiCalendarPicker: {
-          styleOverrides: {
-            root: {
-              width: '100%',
-              '& .MuiTypography-caption': {
-                color: mode === 'dark' ? grey[600] : grey[700],
-                height: 24,
-              },
-              '[role="presentation"]': {
-                '& .MuiIconButton-root': {
-                  padding: 0,
-                },
-              },
-              '& .PrivatePickersSlideTransition-root': {
-                minHeight: 180,
-              },
-              '& [role="row"]': {
-                justifyContent: 'space-around',
-              },
-              '& .MuiCalendarPicker-viewTransitionContainer > div > div': {
-                justifyContent: 'space-around',
-              },
-            },
-          },
-        },
-        MuiPickersDay: {
-          styleOverrides: {
-            root: {
-              width: 24,
-              height: 24,
-              color: mode === 'dark' ? primary[200] : grey[800],
-              fontWeight: 500,
-            },
-            today: {
-              '&:not(.Mui-selected)': {
-                borderColor: baseTheme.palette.primary.main,
-              },
-            },
-          },
-        },
-      },
-    });
-  }, [mode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <Fade in timeout={700}>
-          <Box
-            sx={{
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <Fade in timeout={700}>
+        <Box
+          sx={[
+            {
               '& > div': {
                 border: '1px solid',
-                borderColor: mode === 'dark' ? primaryDark[500] : grey[200],
+                borderColor: 'grey.200',
                 borderRadius: 1,
-                overflow: 'hidden',
               },
               '& > div > div > div': {
                 width: '100%',
               },
+              [`& .${iconButtonClasses.root}`]: {
+                color: 'primary.500',
+              },
+              '& .MuiPickerStaticWrapper-root': {
+                bgcolor: '#fff',
+              },
+              '& .MuiPickerStaticWrapper-content': {
+                bgcolor: 'initial',
+              },
+              '& .MuiCalendarPicker-root': {
+                width: '100%',
+                '& .MuiTypography-caption': {
+                  color: 'grey.700',
+                  height: 24,
+                },
+                '[role="presentation"]': {
+                  '& .MuiIconButton-root': {
+                    padding: 0,
+                  },
+                },
+                '& .PrivatePickersSlideTransition-root': {
+                  minHeight: 180,
+                },
+                '& .PrivatePickersYear-yearButton': {
+                  fontSize: '0.875rem',
+                },
+                '& [role="row"]': {
+                  justifyContent: 'space-around',
+                },
+                '& .MuiCalendarPicker-viewTransitionContainer > div > div': {
+                  justifyContent: 'space-around',
+                },
+                '& .MuiPickersDay-root': {
+                  width: 24,
+                  height: 24,
+                  fontWeight: 500,
+                  '&:not(:hover)': {
+                    bgcolor: 'transparent',
+                  },
+                  '&.Mui-selected': {
+                    color: '#fff',
+                    bgcolor: 'primary.main',
+                  },
+                  '&.MuiPickersDay-today': {
+                    '&:not(.Mui-selected)': {
+                      borderColor: 'primary.main',
+                    },
+                  },
+                },
+              },
+            },
+            (theme) =>
+              theme.applyDarkStyles({
+                '& > div': {
+                  borderColor: 'primaryDark.500',
+                },
+                [`& .${iconButtonClasses.root}`]: {
+                  color: 'primary.300',
+                },
+                '& .MuiPickerStaticWrapper-root': {
+                  bgcolor: 'primaryDark.800',
+                },
+                '& .MuiCalendarPicker-root': {
+                  '& .MuiTypography-caption': {
+                    color: 'grey.600',
+                  },
+                  '& .MuiPickersDay-root': {
+                    color: 'primary.200',
+                  },
+                },
+              }),
+          ]}
+        >
+          <StaticDatePicker
+            displayStaticWrapperAs="desktop"
+            value={value}
+            onChange={(newValue) => {
+              setValue(newValue);
             }}
-          >
-            <StaticDatePicker
-              displayStaticWrapperAs="desktop"
-              value={value}
-              onChange={(newValue) => {
-                setValue(newValue);
-              }}
-              renderInput={(params) => <TextField {...params} />}
-            />
-          </Box>
-        </Fade>
-      </LocalizationProvider>
-    </ThemeProvider>
+            renderInput={(params) => <TextField {...params} />}
+          />
+        </Box>
+      </Fade>
+    </LocalizationProvider>
   );
 }
diff --git a/docs/src/components/showcase/ThemeSlider.tsx b/docs/src/components/showcase/ThemeSlider.tsx
index 0899974c92669b..38b193a61ecea7 100644
--- a/docs/src/components/showcase/ThemeSlider.tsx
+++ b/docs/src/components/showcase/ThemeSlider.tsx
@@ -1,156 +1,110 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Fade from '@mui/material/Fade';
-import Slider from '@mui/material/Slider';
-
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
+import Slider, { sliderClasses } from '@mui/material/Slider';
 
 function valuetext(value: number) {
   return `${value}°C`;
 }
 
 export default function ThemeSlider() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary: {
-            main: primary[500],
-          },
-        },
-        shape: { borderRadius: 10 },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        components: {
-          MuiSlider: {
-            styleOverrides: {
-              root: {
-                color: primary[500],
-              },
-              rail: {
-                opacity: 1,
-                backgroundColor: mode === 'dark' ? primaryDark[600] : grey[200],
-              },
-              track: {
-                border: 'none',
-              },
-              thumb: {
-                width: 8,
-                height: 8,
-                '&:before': {
-                  boxShadow: 'none',
+  return (
+    <Fade in timeout={700}>
+      <Box
+        sx={(theme) => ({
+          display: 'flex',
+          justifyContent: 'center',
+          bgcolor: '#fff',
+          border: '1px solid',
+          borderColor: 'grey.200',
+          borderRadius: 1,
+          p: 2,
+          ...theme.applyDarkStyles({
+            bgcolor: 'primaryDark.800',
+            borderColor: 'primaryDark.500',
+          }),
+        })}
+      >
+        <Box
+          sx={{
+            display: 'inline-block',
+            height: 180,
+            padding: '0.75rem 0',
+            borderRadius: 4,
+          }}
+        >
+          <Slider
+            getAriaLabel={() => 'Temperature'}
+            orientation="vertical"
+            getAriaValueText={valuetext}
+            defaultValue={[25, 50]}
+            marks={[{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }]}
+            valueLabelFormat={valuetext}
+            valueLabelDisplay="on"
+            sx={[
+              {
+                color: 'primary.500',
+                [`& .${sliderClasses.rail}`]: {
+                  opacity: 1,
+                  bgcolor: 'grey.200',
                 },
-              },
-              vertical: {
-                '& .MuiSlider-mark[data-index="0"]': {
-                  bottom: '2px !important',
-                  backgroundColor: mode === 'dark' ? primary[400] : grey[500],
+                [`& .${sliderClasses.track}`]: {
+                  border: 'none',
                 },
-                '& .MuiSlider-mark[data-index="4"]': {
-                  bottom: 'unset !important',
-                  backgroundColor: mode === 'dark' ? primary[400] : grey[500],
+                [`& .${sliderClasses.mark}`]: {
+                  color: 'grey.500',
                 },
-                '& .MuiSlider-valueLabel': {
-                  backgroundColor: 'transparent',
-                  color: mode === 'dark' ? grey[50] : grey[500],
-                  fontWeight: 700,
-                  padding: 0,
-                  left: '2rem',
-                  '&.MuiSlider-valueLabelOpen': {
-                    transform: 'none',
-                    top: 'initial',
+                [`& .${sliderClasses.thumb}`]: {
+                  width: 8,
+                  height: 8,
+                  '&:before': {
+                    boxShadow: 'none',
+                  },
+                },
+                [`&.${sliderClasses.vertical}`]: {
+                  [`& .${sliderClasses.mark}[data-index="0"]`]: {
+                    bottom: '2px !important',
+                    bgcolor: 'grey.500',
+                  },
+                  [`& .${sliderClasses.mark}[data-index="4"]`]: {
+                    bottom: 'unset !important',
+                    bgcolor: 'grey.500',
+                  },
+                  [`& .${sliderClasses.valueLabel}`]: {
+                    backgroundColor: 'transparent',
+                    color: 'grey.500',
+                    fontWeight: 700,
+                    padding: 0,
+                    left: '2rem',
+                    top: '14px',
+                    [`& .${sliderClasses.valueLabelOpen}`]: {
+                      transform: 'none',
+                      top: 'initial',
+                    },
                   },
                 },
               },
-              mark: {
-                color: grey[500],
-              },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
-  return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'center',
-            bgcolor: mode === 'dark' ? primaryDark[800] : '#fff',
-            border: '1px solid',
-            borderColor: mode === 'dark' ? primaryDark[500] : grey[200],
-            borderRadius: 1,
-            p: 2,
-          }}
-        >
-          <Box
-            sx={{
-              display: 'inline-block',
-              height: 180,
-              padding: '0.75rem 0',
-              borderRadius: 4,
-            }}
-          >
-            <Slider
-              getAriaLabel={() => 'Temperature'}
-              orientation="vertical"
-              getAriaValueText={valuetext}
-              defaultValue={[25, 50]}
-              marks={[{ value: 0 }, { value: 25 }, { value: 50 }, { value: 75 }, { value: 100 }]}
-              valueLabelFormat={valuetext}
-              valueLabelDisplay="on"
-            />
-          </Box>
+              (theme) =>
+                theme.applyDarkStyles({
+                  [`& .${sliderClasses.rail}`]: {
+                    bgcolor: 'primaryDark.600',
+                  },
+                  [`&.${sliderClasses.vertical}`]: {
+                    [`& .${sliderClasses.mark}[data-index="0"]`]: {
+                      bgcolor: 'primary.400',
+                    },
+                    [`& .${sliderClasses.mark}[data-index="4"]`]: {
+                      bgcolor: 'primary.400',
+                    },
+                    [`& .${sliderClasses.valueLabel}`]: {
+                      color: 'grey.50',
+                    },
+                  },
+                }),
+            ]}
+          />
         </Box>
-      </Fade>
-    </ThemeProvider>
+      </Box>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/ThemeSwitch.tsx b/docs/src/components/showcase/ThemeSwitch.tsx
index 9b6ba09bb7fb61..65e98edd06d061 100644
--- a/docs/src/components/showcase/ThemeSwitch.tsx
+++ b/docs/src/components/showcase/ThemeSwitch.tsx
@@ -1,92 +1,37 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
+import Switch, { switchClasses } from '@mui/material/Switch';
 
 export default function ThemeSwitch() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-        },
-        components: {
-          MuiSwitch: {
-            styleOverrides: {
-              root: {
-                width: 32,
-                height: 20,
-                padding: 0,
-              },
-              switchBase: {
-                padding: 3,
-                color: '#fff',
-                '&.Mui-checked': {
-                  transform: 'translateX(12px)',
-                  color: '#fff',
-                  '& + .MuiSwitch-track': {
-                    opacity: 1,
-                  },
-                },
-              },
-              thumb: {
-                padding: 0,
-                height: 14,
-                width: 14,
-                boxShadow: 'none',
-              },
-              track: {
-                borderRadius: 20,
-                opacity: 1,
-                backgroundColor: mode === 'dark' ? grey[800] : grey[400],
-              },
+  const label = { inputProps: { 'aria-label': 'Themed Switch' } };
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        flexGrow: 1,
+        [`& .${switchClasses.root}`]: {
+          width: 32,
+          height: 20,
+          padding: 0,
+          [`& .${switchClasses.switchBase}`]: {
+            padding: '3px',
+            color: '#fff',
+            [`&.${switchClasses.checked}`]: {
+              transform: 'translateX(12px)',
             },
           },
+          [`& .${switchClasses.thumb}`]: {
+            padding: 0,
+            height: 14,
+            width: 14,
+            boxShadow: 'none',
+          },
         },
-      }),
-    [mode],
-  );
-  const label = { inputProps: { 'aria-label': 'Themed Switch' } };
-  return (
-    <ThemeProvider theme={theme}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', flexGrow: 1 }}>
-        <Switch defaultChecked {...label} />
-        <Switch {...label} />
-      </Box>
-    </ThemeProvider>
+      }}
+    >
+      <Switch defaultChecked {...label} />
+      <Switch {...label} />
+    </Box>
   );
 }
diff --git a/docs/src/components/showcase/ThemeTabs.tsx b/docs/src/components/showcase/ThemeTabs.tsx
index 414f6042eee737..295e5081e3f687 100644
--- a/docs/src/components/showcase/ThemeTabs.tsx
+++ b/docs/src/components/showcase/ThemeTabs.tsx
@@ -1,105 +1,60 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Fade from '@mui/material/Fade';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
+import Tabs, { tabsClasses } from '@mui/material/Tabs';
+import Tab, { tabClasses } from '@mui/material/Tab';
 
 export default function ThemeTabs() {
   const [value, setValue] = React.useState(0);
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-        },
-        shape: {
-          borderRadius: 8,
-        },
-        spacing: 10,
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-          button: {
-            textTransform: 'initial',
-          },
-        },
-        components: {
-          MuiButtonBase: {
-            defaultProps: {
-              disableTouchRipple: true,
-            },
-          },
-          MuiTabs: {
-            styleOverrides: {
-              root: {
-                backgroundColor: mode === 'dark' ? primary[700] : primary[500],
-                borderRadius: 10,
-                boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
-              },
-              indicator: {
-                backgroundColor: 'transparent',
-                '&:before': {
-                  content: '""',
-                  display: 'block',
-                  position: 'absolute',
-                  left: 30,
-                  right: 30,
-                  height: '100%',
-                  backgroundColor: '#fff',
-                },
-              },
-            },
-          },
-          MuiTab: {
-            styleOverrides: {
-              root: {
-                color: mode === 'dark' ? primary[200] : primary[100],
-                fontSize: '1rem',
-                '&.Mui-selected': {
-                  color: '#fff',
-                },
-              },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
   return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <Tabs value={value} onChange={handleChange} aria-label="theme example" variant="fullWidth">
-          <Tab label="Yesterday" />
-          <Tab label="Today" />
-          <Tab label="Tomorrow" />
-        </Tabs>
-      </Fade>
-    </ThemeProvider>
+    <Fade in timeout={700}>
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        aria-label="theme example"
+        variant="fullWidth"
+        sx={[
+          {
+            bgcolor: 'primary.500',
+            borderRadius: '10px',
+            boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
+            [`& .${tabsClasses.indicator}`]: {
+              backgroundColor: 'transparent',
+              '&:before': {
+                content: '""',
+                display: 'block',
+                position: 'absolute',
+                left: 30,
+                right: 30,
+                height: '100%',
+                backgroundColor: '#fff',
+              },
+            },
+            [`& .${tabClasses.root}`]: {
+              color: 'primary.100',
+              fontSize: '1rem',
+              '&.Mui-selected': {
+                color: '#fff',
+              },
+            },
+          },
+          (theme) =>
+            theme.applyDarkStyles({
+              bgcolor: 'primary.700',
+              [`& .${tabClasses.root}`]: {
+                color: 'primary.200',
+              },
+            }),
+        ]}
+      >
+        <Tab label="Yesterday" />
+        <Tab label="Today" />
+        <Tab label="Tomorrow" />
+      </Tabs>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/ThemeTimeline.tsx b/docs/src/components/showcase/ThemeTimeline.tsx
index 217ebd6adf3087..5286c4fe3a5731 100644
--- a/docs/src/components/showcase/ThemeTimeline.tsx
+++ b/docs/src/components/showcase/ThemeTimeline.tsx
@@ -1,196 +1,126 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Card from '@mui/material/Card';
 import Fade from '@mui/material/Fade';
 import Typography from '@mui/material/Typography';
 import Timeline from '@mui/lab/Timeline';
-import TimelineItem from '@mui/lab/TimelineItem';
+import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
 import TimelineSeparator from '@mui/lab/TimelineSeparator';
-import TimelineConnector from '@mui/lab/TimelineConnector';
-import TimelineContent from '@mui/lab/TimelineContent';
-import TimelineDot from '@mui/lab/TimelineDot';
+import TimelineConnector, { timelineConnectorClasses } from '@mui/lab/TimelineConnector';
+import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent';
+import TimelineDot, { timelineDotClasses } from '@mui/lab/TimelineDot';
 import InfoOutlined from '@mui/icons-material/InfoOutlined';
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-  1000: '#132F4C',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function BasicTimeline() {
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          ...(mode === 'light' && {
-            text: {
-              primary: grey[900],
-              secondary: grey[800],
-            },
-          }),
-          ...(mode === 'dark' && {
-            text: {
-              primary: '#fff',
-              secondary: grey[500],
-            },
-          }),
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          background: {
-            paper: mode === 'dark' ? primaryDark[800] : '#fff',
-          },
-        },
-        shape: {
-          borderRadius: 10,
-        },
-        spacing: 10,
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-          fontWeightRegular: 500,
-        },
-        components: {
-          // @ts-ignore
-          MuiTimelineItem: {
-            styleOverrides: {
-              root: {
-                minHeight: 36,
-              },
-            },
-          },
-          MuiTimelineDot: {
-            styleOverrides: {
-              root: {
-                zIndex: 1,
-                padding: 3,
-                boxShadow: 'none',
-                margin: '15px 0',
-                border: 'none',
-                backgroundColor: primary[500],
-              },
-            },
-          },
-          MuiTimelineConnector: {
-            styleOverrides: {
-              root: {
-                margin: '-15px 0',
-                backgroundColor: mode === 'dark' ? primaryDark[700] : primary[50],
-              },
-            },
-          },
-          MuiTimelineContent: {
-            styleOverrides: {
-              root: {
-                fontSize: '0.875rem',
-                color: mode === 'dark' ? grey[100] : grey[800],
-              },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
   return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <Card variant="outlined" sx={{ p: 2, display: 'flex', alignItems: 'flex-start' }}>
-          <Box
-            sx={{
-              p: 0.5,
-              borderRadius: 0.5,
-              minWidth: 28,
-              textAlign: 'center',
-              bgcolor: mode === 'dark' ? 'primary.700' : 'primary.50',
-              color: mode === 'dark' ? '#fff' : 'primary.main',
-              typography: 'body2',
-            }}
-          >
-            1
+    <Fade in timeout={700}>
+      <Card
+        variant="outlined"
+        sx={(theme) => ({
+          p: 2,
+          display: 'flex',
+          alignItems: 'flex-start',
+          ...theme.applyDarkStyles({
+            bgcolor: 'primaryDark.800',
+          }),
+        })}
+      >
+        <Box
+          sx={(theme) => ({
+            p: 0.5,
+            borderRadius: 0.5,
+            minWidth: 28,
+            typography: 'body2',
+            textAlign: 'center',
+            bgcolor: 'primary.50',
+            color: 'primary.main',
+            ...theme.applyDarkStyles({
+              bgcolor: 'primary.700',
+              color: '#fff',
+            }),
+          })}
+        >
+          1
+        </Box>
+        <Box sx={{ ml: 2, flex: 1 }}>
+          <Box sx={{ display: 'flex' }}>
+            <Typography
+              variant="body2"
+              sx={(theme) => ({
+                mb: 1,
+                color: 'text.secondary',
+                ...theme.applyDarkStyles({
+                  color: 'grey.400',
+                }),
+              })}
+            >
+              Use the sx prop to add these properties:
+            </Typography>
+            <InfoOutlined fontSize="small" sx={{ ml: 'auto', color: 'grey.500' }} />
           </Box>
-          <Box sx={{ ml: 2, flex: 1 }}>
-            <Box sx={{ display: 'flex' }}>
-              <Typography
-                color={mode === 'dark' ? 'grey.400' : 'text.secondary'}
-                variant="body2"
-                sx={{ mb: 1 }}
-              >
-                Use the sx prop to add these properties:
-              </Typography>
-              <InfoOutlined fontSize="small" sx={{ ml: 'auto', color: 'grey.500' }} />
-            </Box>
-            <Timeline
-              sx={{
+          <Timeline
+            sx={[
+              {
                 pl: 0,
                 py: 0,
                 my: 0,
-                '& .MuiTimelineItem-root:before': { display: 'none' },
-              }}
-            >
-              <TimelineItem>
-                <TimelineSeparator>
-                  <TimelineDot />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>Margin Top</TimelineContent>
-              </TimelineItem>
-              <TimelineItem>
-                <TimelineSeparator>
-                  <TimelineDot />
-                  <TimelineConnector />
-                </TimelineSeparator>
-                <TimelineContent>Padding Bottom</TimelineContent>
-              </TimelineItem>
-              <TimelineItem>
-                <TimelineSeparator>
-                  <TimelineDot />
-                </TimelineSeparator>
-                <TimelineContent>Flexbox</TimelineContent>
-              </TimelineItem>
-            </Timeline>
-          </Box>
-        </Card>
-      </Fade>
-    </ThemeProvider>
+                [`& .${timelineItemClasses.root}`]: {
+                  minHeight: 36,
+                  '&:before': {
+                    display: 'none',
+                  },
+                },
+                [`& .${timelineDotClasses.root}`]: {
+                  zIndex: 1,
+                  padding: '3px',
+                  boxShadow: 'none',
+                  margin: '15px 0',
+                  border: 'none',
+                  bgcolor: 'primary.500',
+                },
+                [`& .${timelineConnectorClasses.root}`]: {
+                  margin: '-15px 0',
+                  bgcolor: 'primary.50',
+                },
+                [`& .${timelineContentClasses.root}`]: {
+                  fontSize: '0.875rem',
+                  color: 'grey.800',
+                },
+              },
+              (theme) =>
+                theme.applyDarkStyles({
+                  [`& .${timelineConnectorClasses.root}`]: {
+                    bgcolor: 'primaryDark.700',
+                  },
+                  [`& .${timelineContentClasses.root}`]: {
+                    color: 'grey.100',
+                  },
+                }),
+            ]}
+          >
+            <TimelineItem>
+              <TimelineSeparator>
+                <TimelineDot />
+                <TimelineConnector />
+              </TimelineSeparator>
+              <TimelineContent>Margin Top</TimelineContent>
+            </TimelineItem>
+            <TimelineItem>
+              <TimelineSeparator>
+                <TimelineDot />
+                <TimelineConnector />
+              </TimelineSeparator>
+              <TimelineContent>Padding Bottom</TimelineContent>
+            </TimelineItem>
+            <TimelineItem>
+              <TimelineSeparator>
+                <TimelineDot />
+              </TimelineSeparator>
+              <TimelineContent>Flexbox</TimelineContent>
+            </TimelineItem>
+          </Timeline>
+        </Box>
+      </Card>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/ThemeToggleButton.tsx b/docs/src/components/showcase/ThemeToggleButton.tsx
index d00ea399c7234f..aabb60e8bd10ca 100644
--- a/docs/src/components/showcase/ThemeToggleButton.tsx
+++ b/docs/src/components/showcase/ThemeToggleButton.tsx
@@ -1,121 +1,52 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
 import Fade from '@mui/material/Fade';
 import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 export default function ThemeToggleButton() {
   const [lang, setLang] = React.useState('javascript');
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          grey,
-        },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        shape: {
-          borderRadius: 10,
-        },
-        components: {
-          MuiButtonBase: {
-            defaultProps: {
-              disableTouchRipple: true,
-            },
-          },
-          MuiToggleButtonGroup: {
-            styleOverrides: {
-              root: {
-                backgroundColor: mode === 'dark' ? primaryDark[800] : '#fff',
+  return (
+    <Fade in timeout={700}>
+      <ToggleButtonGroup
+        fullWidth
+        color="primary"
+        value={lang}
+        exclusive
+        onChange={(event, value) => setLang(value)}
+        aria-label="language"
+        sx={[
+          {
+            bgcolor: '#fff',
+            '& .MuiToggleButton-root': {
+              textTransform: 'none',
+              fontWeight: 700,
+              color: 'grey.700',
+              borderColor: 'grey.200',
+              '&.Mui-selected': {
+                borderColor: 'primary.500',
+                color: 'primary.500',
+                bgcolor: 'primaryDark.50',
               },
             },
           },
-          MuiToggleButton: {
-            styleOverrides: {
-              root: {
-                textTransform: 'none',
-                fontWeight: 700,
-                color: mode === 'dark' ? grey[300] : grey[700],
-                borderColor: mode === 'dark' ? primaryDark[500] : grey[200],
+          (theme) =>
+            theme.applyDarkStyles({
+              bgcolor: 'primaryDark.800',
+              '& .MuiToggleButton-root': {
+                color: 'grey.300',
+                borderColor: 'primaryDark.500',
                 '&.Mui-selected': {
-                  borderColor: `${primary[500]} !important`,
-                  color: mode === 'dark' ? '#fff' : primary[500],
-                  backgroundColor: mode === 'dark' ? primary[800] : primaryDark[50],
+                  color: '#fff',
+                  bgcolor: 'primary.800',
                 },
               },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <Fade in timeout={700}>
-        <ToggleButtonGroup
-          fullWidth
-          color="primary"
-          value={lang}
-          exclusive
-          onChange={(event, value) => setLang(value)}
-          aria-label="language"
-        >
-          <ToggleButton value="javascript">React</ToggleButton>
-          <ToggleButton value="html">TypeScript</ToggleButton>
-          <ToggleButton value="css">CSS</ToggleButton>
-        </ToggleButtonGroup>
-      </Fade>
-    </ThemeProvider>
+            }),
+        ]}
+      >
+        <ToggleButton value="javascript">React</ToggleButton>
+        <ToggleButton value="html">TypeScript</ToggleButton>
+        <ToggleButton value="css">CSS</ToggleButton>
+      </ToggleButtonGroup>
+    </Fade>
   );
 }
diff --git a/docs/src/components/showcase/ViewToggleButton.tsx b/docs/src/components/showcase/ViewToggleButton.tsx
index 29c481471b58e3..25242b91722362 100644
--- a/docs/src/components/showcase/ViewToggleButton.tsx
+++ b/docs/src/components/showcase/ViewToggleButton.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
-import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ViewQuiltRounded from '@mui/icons-material/ViewQuiltRounded';
 import ViewModuleRounded from '@mui/icons-material/ViewModuleRounded';
@@ -8,43 +7,6 @@ import ViewAgendaRounded from '@mui/icons-material/ViewAgendaRounded';
 import ViewWeekRounded from '@mui/icons-material/ViewWeekRounded';
 import ViewSidebarRounded from '@mui/icons-material/ViewSidebarRounded';
 
-const primary = {
-  50: '#F0F7FF',
-  100: '#C2E0FF',
-  200: '#80BFFF',
-  300: '#66B2FF',
-  400: '#3399FF',
-  500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-  800: '#004C99',
-  900: '#003A75',
-};
-const primaryDark = {
-  50: '#E2EDF8',
-  100: '#CEE0F3',
-  200: '#91B9E3',
-  300: '#5090D3',
-  400: '#265D97',
-  500: '#1E4976',
-  600: '#173A5E',
-  700: '#132F4C',
-  800: '#001E3C',
-  900: '#0A1929',
-};
-const grey = {
-  50: '#F3F6F9',
-  100: '#EAEEF3',
-  200: '#E5E8EC',
-  300: '#D7DCE1',
-  400: '#BFC7CF',
-  500: '#AAB4BE',
-  600: '#96A3B0',
-  700: '#8796A5',
-  800: '#5A6978',
-  900: '#3D4752',
-};
-
 const views = ['quilt', 'module', 'agenda', 'week', 'sidebar'] as const;
 
 type View = typeof views[number];
@@ -59,74 +21,45 @@ const viewIcons: Record<View, React.ReactElement> = {
 
 export default function ViewToggleButton() {
   const [view, setView] = React.useState<View>('quilt');
-  /*
-   * Note: this demo use `theme.palette.mode` from `useTheme` to make dark mode works in the documentation only.
-   *
-   * Normally, you would implement dark mode via internal state and/or system preference at the root of the application.
-   * For more detail about toggling dark mode: https://mui.com/customization/palette/#toggling-color-mode
-   */
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-
-  const theme = React.useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode,
-          primary,
-          divider: mode === 'dark' ? primaryDark[500] : grey[200],
-          grey,
-        },
-        typography: {
-          fontFamily: ['-apple-system', 'BlinkMacSystemFont', 'sans-serif'].join(','),
-        },
-        shape: {
-          borderRadius: 10,
-        },
-        components: {
-          MuiButtonBase: {
-            defaultProps: {
-              disableTouchRipple: true,
-            },
-          },
-          MuiToggleButtonGroup: {
-            styleOverrides: {
-              root: {
-                backgroundColor: mode === 'dark' ? primaryDark[800] : '#fff',
+  return (
+    <ToggleButtonGroup
+      size="small"
+      color="primary"
+      value={view}
+      exclusive
+      onChange={(event, value) => setView(value)}
+      aria-label="view"
+      sx={(theme) => ({
+        bgcolor: '#fff',
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.800',
+        }),
+      })}
+    >
+      {views.map((item) => (
+        <ToggleButton
+          key={item}
+          value={item}
+          aria-label={item}
+          sx={[
+            {
+              color: 'grey.400',
+              [`&.${toggleButtonClasses.selected}`]: {
+                color: 'primary.500',
               },
             },
-          },
-          MuiToggleButton: {
-            styleOverrides: {
-              root: {
-                color: mode === 'dark' ? '#fff' : grey[400],
-                '&.Mui-selected': {
-                  color: mode === 'dark' ? primary[300] : primary[500],
+            (theme) =>
+              theme.applyDarkStyles({
+                color: '#fff',
+                [`&.${toggleButtonClasses.selected}`]: {
+                  color: 'primary.300',
                 },
-              },
-            },
-          },
-        },
-      }),
-    [mode],
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <ToggleButtonGroup
-        size="small"
-        color="primary"
-        value={view}
-        exclusive
-        onChange={(event, value) => setView(value)}
-        aria-label="view"
-      >
-        {views.map((item) => (
-          <ToggleButton key={item} value={item} aria-label={item}>
-            {viewIcons[item]}
-          </ToggleButton>
-        ))}
-      </ToggleButtonGroup>
-    </ThemeProvider>
+              }),
+          ]}
+        >
+          {viewIcons[item]}
+        </ToggleButton>
+      ))}
+    </ToggleButtonGroup>
   );
 }
diff --git a/docs/src/components/typography/GradientText.tsx b/docs/src/components/typography/GradientText.tsx
index 50925eb059518b..89ed23f82b2d10 100644
--- a/docs/src/components/typography/GradientText.tsx
+++ b/docs/src/components/typography/GradientText.tsx
@@ -3,12 +3,15 @@ import { styled } from '@mui/material/styles';
 const GradientText = styled('span')<{
   color?: 'primary' | 'error' | 'success' | 'warning';
 }>(({ theme, color = 'primary' }) => ({
-  background:
-    theme.palette.mode === 'dark'
-      ? theme.palette.primary[300]
-      : `linear-gradient(to right, ${theme.palette[color].main}, ${theme.palette[color][700]})`,
+  background: `linear-gradient(to right, ${(theme.vars || theme).palette[color].main}, ${
+    (theme.vars || theme).palette[color][700]
+  })`,
   WebkitBackgroundClip: 'text',
   WebkitTextFillColor: 'transparent',
+  ...theme.applyDarkStyles({
+    background: (theme.vars || theme).palette.primary[300],
+    WebkitBackgroundClip: 'text',
+  }),
 }));
 
 export default GradientText;
diff --git a/docs/src/components/typography/SectionHeadline.tsx b/docs/src/components/typography/SectionHeadline.tsx
index fe6d4015391e03..ede46e652c8194 100644
--- a/docs/src/components/typography/SectionHeadline.tsx
+++ b/docs/src/components/typography/SectionHeadline.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import Typography from '@mui/material/Typography';
 
 interface SectionHeadlineProps {
@@ -11,33 +10,50 @@ interface SectionHeadlineProps {
 
 export default function SectionHeadline(props: SectionHeadlineProps) {
   const { description, id, overline, title } = props;
-  const globalTheme = useTheme();
-  const mode = globalTheme.palette.mode;
-  const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
-  const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
-  const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
-
   return (
     <React.Fragment>
       <Typography
-        color={overlineColor}
+        id={id}
         component="h2"
         fontWeight="bold"
         variant="body2"
-        sx={{ mb: 1 }}
-        id={id}
+        sx={(theme) => ({
+          mb: 1,
+          color: 'primary.600',
+          ...theme.applyDarkStyles({
+            color: 'primary.300',
+          }),
+        })}
       >
         {overline}
       </Typography>
       {typeof title === 'string' ? (
-        <Typography variant="h2" color={titleColor}>
+        <Typography
+          variant="h2"
+          sx={(theme) => ({
+            color: 'primaryDark.900',
+            ...theme.applyDarkStyles({
+              color: 'grey.100',
+            }),
+          })}
+        >
           {title}
         </Typography>
       ) : (
         title
       )}
       {description && (
-        <Typography color={descriptionColor} sx={{ mt: 1, mb: 2, maxWidth: 450 }}>
+        <Typography
+          sx={(theme) => ({
+            mt: 1,
+            mb: 2,
+            maxWidth: 450,
+            color: 'grey.800',
+            ...theme.applyDarkStyles({
+              color: 'grey.500',
+            }),
+          })}
+        >
           {description}
         </Typography>
       )}
diff --git a/docs/src/createEmotionCache.ts b/docs/src/createEmotionCache.ts
index b42a1493102119..e4c08dd91f1ad7 100644
--- a/docs/src/createEmotionCache.ts
+++ b/docs/src/createEmotionCache.ts
@@ -1,6 +1,23 @@
+/* eslint-disable default-case */
 import createCache from '@emotion/cache';
+import { Element, RULESET } from 'stylis';
+
+// A workaround to https://github.com/emotion-js/emotion/issues/2836
+// to be able to use `:where` selector for styling.
+function globalSelector(element: Element) {
+  switch (element.type) {
+    case RULESET:
+      element.props = (element.props as string[]).map((value: any) => {
+        if (value.match(/(:where|:has)\(/)) {
+          value = value.replace(/\.[^:]+(:where|:has)/, '$1');
+          return value;
+        }
+        return value;
+      });
+  }
+}
 
 export default function createEmotionCache() {
   // TODO remove prepend: true once JSS is out
-  return createCache({ key: 'css', prepend: true });
+  return createCache({ key: 'css', prepend: true, stylisPlugins: [globalSelector] });
 }
diff --git a/docs/src/layouts/AppFooter.tsx b/docs/src/layouts/AppFooter.tsx
index 99a394ba791b85..0e4f1bfcbdd0d7 100644
--- a/docs/src/layouts/AppFooter.tsx
+++ b/docs/src/layouts/AppFooter.tsx
@@ -98,22 +98,22 @@ export default function AppFooter() {
             <Box sx={{ display: 'flex', alignItems: 'end' }}>
               <Link href={ROUTES.careers}>Careers </Link>
               <Box
-                sx={{
+                sx={(theme) => ({
                   px: 0.5,
                   py: '3px',
                   ml: 1,
                   mb: '1px',
                   borderRadius: 0.5,
-                  fontSize: (theme) => theme.typography.pxToRem(9),
+                  fontSize: theme.typography.pxToRem(9),
                   fontWeight: 700,
                   textTransform: 'uppercase',
                   color: '#fff',
                   letterSpacing: '0.1rem',
-                  backgroundColor: (theme) =>
-                    theme.palette.mode === 'dark'
-                      ? theme.palette.success[900]
-                      : theme.palette.success.main,
-                }}
+                  bgcolor: 'success.main',
+                  ...theme.applyDarkStyles({
+                    bgcolor: 'success.900',
+                  }),
+                })}
               >
                 Hiring
               </Box>
diff --git a/docs/src/layouts/AppHeader.tsx b/docs/src/layouts/AppHeader.tsx
index 5c3246eab30a8e..f34c4ddfd31ce3 100644
--- a/docs/src/layouts/AppHeader.tsx
+++ b/docs/src/layouts/AppHeader.tsx
@@ -9,7 +9,6 @@ import SvgMuiLogo from 'docs/src/icons/SvgMuiLogo';
 import HeaderNavBar from 'docs/src/components/header/HeaderNavBar';
 import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown';
 import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle';
-import { getCookie } from 'docs/src/modules/utils/helpers';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import Link from 'docs/src/modules/components/Link';
 import { DeferredAppSearch } from 'docs/src/modules/components/AppFrame';
@@ -19,20 +18,21 @@ import IconButton from '@mui/material/IconButton';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 
-const Header = styled('header')(({ theme }) => ({
-  position: 'sticky',
-  top: 0,
-  transition: theme.transitions.create('top'),
-  zIndex: theme.zIndex.appBar,
-  backdropFilter: 'blur(20px)',
-  boxShadow: `inset 0px -1px 1px ${
-    theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[100]
-  }`,
-  backgroundColor:
-    theme.palette.mode === 'dark'
-      ? alpha(theme.palette.primaryDark[900], 0.72)
-      : 'rgba(255,255,255,0.72)',
-}));
+const Header = styled('header')(({ theme }) => [
+  {
+    position: 'sticky',
+    top: 0,
+    transition: theme.transitions.create('top'),
+    zIndex: theme.zIndex.appBar,
+    backdropFilter: 'blur(20px)',
+    boxShadow: `inset 0px -1px 1px ${(theme.vars || theme).palette.grey[100]}`,
+    backgroundColor: 'rgba(255,255,255,0.72)',
+  },
+  theme.applyDarkStyles({
+    boxShadow: `inset 0px -1px 1px ${(theme.vars || theme).palette.primaryDark[700]}`,
+    backgroundColor: alpha(theme.palette.primaryDark[900], 0.72),
+  }),
+]);
 
 const HEIGHT = 56;
 
@@ -44,7 +44,12 @@ export default function AppHeader() {
   const t = useTranslate();
 
   React.useEffect(() => {
-    const initialMode = getCookie('paletteMode') || 'system';
+    let initialMode = 'system';
+    try {
+      initialMode = localStorage.getItem('mui-mode') || initialMode;
+    } catch (error) {
+      // do nothing
+    }
     setMode(initialMode);
   }, []);
 
@@ -52,7 +57,7 @@ export default function AppHeader() {
     const paletteMode = checked ? 'dark' : 'light';
     setMode(paletteMode);
 
-    document.cookie = `paletteMode=${paletteMode};path=/;max-age=31536000`;
+    localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
     changeTheme({ paletteMode });
   };
 
diff --git a/docs/src/layouts/HeroContainer.tsx b/docs/src/layouts/HeroContainer.tsx
index b25056f5e59f5f..644c3d14b1f66e 100644
--- a/docs/src/layouts/HeroContainer.tsx
+++ b/docs/src/layouts/HeroContainer.tsx
@@ -38,18 +38,24 @@ export default function HeroContainer({
               ref={rightRef}
               id="hero-container-right-area"
               aria-hidden="true"
-              sx={{
-                bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.900' : 'grey.50'),
-                minWidth: '50vw',
-                minHeight: 500,
-                height: 'calc(100vh - 120px)',
-                maxHeight: { md: 700, xl: 1000 },
-                borderBottomLeftRadius: 10,
-                transition: 'max-height 0.3s',
-                position: 'relative',
-                overflow: 'hidden',
-                ...rightSx,
-              }}
+              sx={[
+                {
+                  bgcolor: 'grey.50',
+                  minWidth: '50vw',
+                  minHeight: 500,
+                  height: 'calc(100vh - 120px)',
+                  maxHeight: { md: 700, xl: 1000 },
+                  borderBottomLeftRadius: 10,
+                  transition: 'max-height 0.3s',
+                  position: 'relative',
+                  overflow: 'hidden',
+                },
+                (theme) =>
+                  theme.applyDarkStyles({
+                    bgcolor: 'primaryDark.900',
+                  }),
+                ...(Array.isArray(rightSx) ? rightSx : [rightSx]),
+              ]}
             >
               {right}
             </Box>
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
index 4a9282bb80b7e9..e99bac0f0256ad 100644
--- a/docs/src/modules/brandingTheme.ts
+++ b/docs/src/modules/brandingTheme.ts
@@ -1,7 +1,19 @@
 import { deepmerge } from '@mui/utils';
+import { CSSObject } from '@mui/system';
+import type {} from '@mui/material/themeCssVarsAugmentation';
 import ArrowDropDownRounded from '@mui/icons-material/ArrowDropDownRounded';
 import { createTheme, ThemeOptions, Theme, alpha } from '@mui/material/styles';
 
+interface ApplyDarkStyles {
+  (scheme: CSSObject): CSSObject;
+}
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    applyDarkStyles: ApplyDarkStyles;
+  }
+}
+
 declare module '@mui/material/styles/createPalette' {
   interface ColorRange {
     50: string;
@@ -28,12 +40,14 @@ declare module '@mui/material/styles/createTypography' {
     fontWeightSemiBold?: number;
     fontWeightExtraBold?: number;
     fontFamilyCode?: string;
+    fontFamilySystem?: string;
   }
 
   interface Typography {
     fontWeightSemiBold: number;
     fontWeightExtraBold: number;
     fontFamilyCode: string;
+    fontFamilySystem: string;
   }
 }
 
@@ -78,7 +92,7 @@ export const blueDark = {
   800: '#001E3C',
   900: '#0A1929',
 };
-const grey = {
+export const grey = {
   50: '#F3F6F9',
   100: '#E7EBF0',
   200: '#E0E3E7',
@@ -90,6 +104,44 @@ const grey = {
   800: '#2D3843', // vs white bg: WCAG 11.9 AAA, APCA 97.3 Best for text
   900: '#1A2027',
 };
+export const error = {
+  50: '#FFF0F1',
+  100: '#FFDBDE',
+  200: '#FFBDC2',
+  300: '#FF99A2',
+  400: '#FF7A86',
+  500: '#FF505F',
+  main: '#EB0014', // contrast 4.63:1
+  600: '#EB0014',
+  700: '#C70011',
+  800: '#94000D',
+  900: '#570007',
+};
+export const success = {
+  50: '#E9FBF0',
+  100: '#C6F6D9',
+  200: '#9AEFBC',
+  300: '#6AE79C',
+  400: '#3EE07F',
+  500: '#21CC66',
+  600: '#1DB45A',
+  700: '#1AA251',
+  800: '#178D46',
+  900: '#0F5C2E',
+};
+export const warning = {
+  50: '#FFF9EB',
+  100: '#FFF3C1',
+  200: '#FFECA1',
+  300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text
+  400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
+  500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text
+  main: '#DEA500',
+  600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
+  700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text
+  800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text
+  900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text
+};
 // context on the Advanced Perceptual Contrast Algorithm (APCA) used above here: https://github.com/w3c/wcag/issues/695
 
 const systemFont = [
@@ -145,6 +197,7 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         }),
       },
       grey: {
+        ...grey,
         ...(mode === 'light' && {
           main: grey[100],
           contrastText: grey[600],
@@ -154,50 +207,17 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
           contrastText: grey[600],
         }),
       },
-      error: {
-        50: '#FFF0F1',
-        100: '#FFDBDE',
-        200: '#FFBDC2',
-        300: '#FF99A2',
-        400: '#FF7A86',
-        500: '#FF505F',
-        main: '#EB0014', // contrast 4.63:1
-        600: '#EB0014',
-        700: '#C70011',
-        800: '#94000D',
-        900: '#570007',
-      },
+      error,
       success: {
-        50: '#E9FBF0',
-        100: '#C6F6D9',
-        200: '#9AEFBC',
-        300: '#6AE79C',
-        400: '#3EE07F',
-        500: '#21CC66',
-        600: '#1DB45A',
+        ...success,
         ...(mode === 'dark' && {
           main: '#1DB45A', // contrast 6.17:1 (blueDark.800)
         }),
         ...(mode === 'light' && {
           main: '#1AA251', // contrast 3.31:1
         }),
-        700: '#1AA251',
-        800: '#178D46',
-        900: '#0F5C2E',
-      },
-      warning: {
-        50: '#FFF9EB',
-        100: '#FFF3C1',
-        200: '#FFECA1',
-        300: '#FFDC48', // vs blueDark900: WCAG 10.4 AAA, APCA 72 Ok for text
-        400: '#F4C000', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
-        500: '#DEA500', // vs blueDark900: WCAG 8 AAA normal, APCA 58 Only large text
-        main: '#DEA500',
-        600: '#D18E00', // vs blueDark900: WCAG 6.4 AA normal, APCA 48 Only large text
-        700: '#AB6800', // vs white bg: WCAG 4.4 AA large, APCA 71 Ok for text
-        800: '#8C5800', // vs white bg: WCAG 5.9 AAA large, APCA 80 Best for text
-        900: '#5A3600', // vs white bg: WCAG 10.7 AAA, APCA 95 Best for text
       },
+      warning,
     },
     shape: {
       borderRadius: 10,
@@ -288,9 +308,78 @@ export const getDesignTokens = (mode: 'light' | 'dark') =>
         scrollMarginTop: 'calc(var(--MuiDocs-header-height) + 32px)',
       },
     },
+    /**
+     * This utility exists to help transitioning to CSS variables page by page (prevent dark mode flicker).
+     * It will use the proper styling method based on the theme because the component might be on the page that does not support CSS variables yet.
+     *
+     * 😓 Without this utility:
+     * {
+     *   ...theme.vars ? {
+     *     color: theme.vars.palette.primary.main,
+     *     [theme.getColorScheme('dark')]: {
+     *       color: '#fff',
+     *     }
+     *   } : {
+     *     color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary.main,
+     *   }
+     * }
+     *
+     * 🤩 Using the utility:
+     * {
+     *   color: (theme.vars || theme).palette.primary.main,
+     *   ...theme.applyDarkStyles({
+     *     color: '#fff',
+     *   }),
+     * }
+     *
+     * -------------------------------------------------------------------------------------------------
+     * 💡 This util should be used in an array if the styles contain psuedo classes or nested selectors:
+     *
+     * ❌ There is a chance that the upper selectors could be overridden
+     * {
+     *    // the whole selector could be overridden
+     *   '&::before': {
+     *     color: ...
+     *   },
+     *   ...theme.applyDarkStyles({
+     *      '&::before': {
+     *        color: ...
+     *      }
+     *   })
+     * }
+     *
+     * ✅ use an array (supports in both emotion and styled-components)
+     * Only the `color` will be overridden in dark mode.
+     *  [
+     *    '&::before': {
+     *      color: ...
+     *    },
+     *    theme.applyDarkStyles({
+     *      '&::before': {
+     *        color: ...
+     *      }
+     *    })
+     *  ]
+     */
+    applyDarkStyles(css: Parameters<ApplyDarkStyles>[0]) {
+      if ((this as Theme).vars) {
+        // CssVarsProvider is used
+        const selector = (this as Theme)
+          .getColorSchemeSelector('dark')
+          .replace(/(\[[^\]]+\])/, ':where($1)');
+        return {
+          [selector]: css,
+        };
+      }
+      if ((this as Theme).palette.mode === 'dark') {
+        return css;
+      }
+
+      return undefined;
+    },
   } as ThemeOptions);
 
-export function getThemedComponents(theme: Theme): { components: Theme['components'] } {
+export function getThemedComponents(): ThemeOptions {
   return {
     components: {
       MuiButtonBase: {
@@ -303,84 +392,88 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
           disableElevation: true,
         },
         styleOverrides: {
-          sizeLarge: {
-            padding: '0.875rem 1rem',
-            ...theme.typography.body1,
-            lineHeight: 21 / 16,
-            fontWeight: 700,
-          },
-          sizeSmall: {
-            padding: theme.spacing(0.5, 1),
-            marginLeft: theme.spacing(-1),
-          },
-          containedPrimary: {
-            backgroundColor: theme.palette.primary[500],
-            color: '#fff',
-          },
+          root: ({ theme, ownerState }) => ({
+            ...(ownerState.size === 'large' && {
+              padding: '0.875rem 1rem',
+              ...theme.typography.body1,
+              lineHeight: 21 / 16,
+              fontWeight: 700,
+            }),
+            ...(ownerState.size === 'small' && {
+              padding: theme.spacing(0.5, 1),
+            }),
+            ...(ownerState.variant === 'contained' &&
+              ownerState.color === 'primary' && {
+                backgroundColor: (theme.vars || theme).palette.primary[500],
+                color: '#fff',
+              }),
+          }),
         },
         variants: [
           {
             // @ts-ignore internal repo module augmentation issue
             props: { variant: 'code' },
-            style: {
-              color:
-                theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[800],
-              border: '1px solid',
-              borderColor:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[400]
-                  : theme.palette.grey[300],
-              backgroundColor:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[700]
-                  : theme.palette.grey[50],
-              fontFamily: theme.typography.fontFamilyCode,
-              fontWeight: 400,
-              fontSize: defaultTheme.typography.pxToRem(13), // 14px
-              lineHeight: 21 / 14,
-              letterSpacing: 0,
-              WebkitFontSmoothing: 'subpixel-antialiased',
-              '&:hover, &.Mui-focusVisible': {
-                borderColor: theme.palette.primary.main,
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[600]
-                    : theme.palette.primary[50],
+            style: ({ theme }) => [
+              {
+                border: '1px solid',
+                color: (theme.vars || theme).palette.grey[800],
+                borderColor: (theme.vars || theme).palette.grey[300],
+                backgroundColor: (theme.vars || theme).palette.grey[50],
+                fontFamily: theme.typography.fontFamilyCode,
+                fontWeight: 400,
+                fontSize: defaultTheme.typography.pxToRem(13), // 14px
+                lineHeight: 21 / 14,
+                letterSpacing: 0,
+                WebkitFontSmoothing: 'subpixel-antialiased',
+                '&:hover, &.Mui-focusVisible': {
+                  borderColor: (theme.vars || theme).palette.primary.main,
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                  '& .MuiButton-endIcon': {
+                    color: (theme.vars || theme).palette.primary.main,
+                  },
+                },
+                '& .MuiButton-startIcon': {
+                  color: (theme.vars || theme).palette.grey[400],
+                },
                 '& .MuiButton-endIcon': {
-                  color:
-                    theme.palette.mode === 'dark'
-                      ? theme.palette.primary[300]
-                      : theme.palette.primary.main,
+                  display: 'inline-block',
+                  position: 'absolute',
+                  right: 0,
+                  marginRight: 10,
+                  color: (theme.vars || theme).palette.grey[700],
                 },
               },
-              '& .MuiButton-startIcon': {
-                color: theme.palette.grey[400],
-              },
-              '& .MuiButton-endIcon': {
-                display: 'inline-block',
-                position: 'absolute',
-                right: 0,
-                marginRight: 10,
-                color:
-                  theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[700],
-              },
-            },
+              theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.grey[400],
+                borderColor: (theme.vars || theme).palette.primaryDark[400],
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                '&:hover, &.Mui-focusVisible': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                  '& .MuiButton-endIcon': {
+                    color: (theme.vars || theme).palette.primary[300],
+                  },
+                },
+                '& .MuiButton-endIcon': {
+                  color: (theme.vars || theme).palette.grey[400],
+                },
+              }),
+            ],
           },
           {
             // @ts-ignore internal repo module augmentation issue
             props: { variant: 'link' },
-            style: {
+            style: ({ theme }) => ({
               fontSize: theme.typography.pxToRem(14),
               fontWeight: 700,
-              color:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primary[300]
-                  : theme.palette.primary[600],
+              color: (theme.vars || theme).palette.primary[600],
+              ...theme.applyDarkStyles({
+                color: (theme.vars || theme).palette.primary[300],
+              }),
               mb: 1,
               '& svg': {
                 ml: -0.5,
               },
-            },
+            }),
           },
         ],
       },
@@ -388,95 +481,88 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
         variants: [
           {
             props: { color: 'primary' },
-            style: {
-              height: 34,
-              width: 34,
-              border: `1px solid ${
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[700]
-                  : theme.palette.grey[200]
-              }`,
-              borderRadius: theme.shape.borderRadius,
-              color:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primary[300]
-                  : theme.palette.primary[500],
-              '&:hover': {
-                borderColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[600]
-                    : theme.palette.grey[300],
-                background:
-                  theme.palette.mode === 'dark'
-                    ? alpha(theme.palette.primaryDark[700], 0.4)
-                    : theme.palette.grey[50],
+            style: ({ theme }) => [
+              {
+                height: 34,
+                width: 34,
+                border: `1px solid`,
+                borderColor: (theme.vars || theme).palette.grey[200],
+                color: (theme.vars || theme).palette.primary[500],
+                borderRadius: theme.shape.borderRadius,
+                '&:hover': {
+                  borderColor: (theme.vars || theme).palette.grey[300],
+                  background: (theme.vars || theme).palette.grey[50],
+                },
               },
-            },
+              theme.applyDarkStyles({
+                borderColor: (theme.vars || theme).palette.primaryDark[700],
+                color: (theme.vars || theme).palette.primary[300],
+                '&:hover': {
+                  borderColor: (theme.vars || theme).palette.primaryDark[600],
+                  background: alpha(theme.palette.primaryDark[700], 0.4),
+                },
+              }),
+            ],
           },
         ],
       },
       MuiMenu: {
         styleOverrides: {
-          paper: {
-            minWidth: 160,
-            color: theme.palette.text.secondary,
-            backgroundImage: 'none',
-            backgroundColor:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[900]
-                : theme.palette.background.paper,
-            border: `1px solid ${
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[700]
-                : theme.palette.grey[200]
-            }`,
-            '& .MuiMenuItem-root': {
-              fontSize: theme.typography.pxToRem(14),
-              fontWeight: 500,
-              '&:hover': {
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? alpha(theme.palette.primaryDark[700], 0.4)
-                    : theme.palette.grey[50],
-              },
-              '&:focus': {
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? alpha(theme.palette.primaryDark[700], 0.4)
-                    : theme.palette.grey[50],
-              },
-              '&.Mui-selected': {
+          paper: ({ theme }) => [
+            {
+              minWidth: 160,
+              color: (theme.vars || theme).palette.text.secondary,
+              backgroundImage: 'none',
+              border: '1px solid',
+              backgroundColor: (theme.vars || theme).palette.background.paper,
+              borderColor: (theme.vars || theme).palette.grey[200],
+              '& .MuiMenuItem-root': {
+                fontSize: theme.typography.pxToRem(14),
                 fontWeight: 500,
-                color:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primary[300]
-                    : theme.palette.primary[600],
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[700]
-                    : alpha(theme.palette.primary[100], 0.6),
+                '&:hover, &:focus': {
+                  backgroundColor: (theme.vars || theme).palette.grey[50],
+                },
+                '&.Mui-selected': {
+                  fontWeight: 500,
+                  color: (theme.vars || theme).palette.primary[600],
+                  backgroundColor: alpha(theme.palette.primary[100], 0.6),
+                },
               },
             },
-          },
+            theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+              borderColor: (theme.vars || theme).palette.primaryDark[700],
+              '& .MuiMenuItem-root': {
+                '&:hover, &:focus': {
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+                },
+                '&.Mui-selected': {
+                  color: (theme.vars || theme).palette.primary[300],
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                },
+              },
+            }),
+          ],
         },
       },
       MuiPopover: {
         styleOverrides: {
-          paper: {
-            boxShadow: `0px 4px 20px ${
-              theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)'
-            }`,
-          },
+          paper: ({ theme }) => ({
+            boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)',
+            ...theme.applyDarkStyles({
+              boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)',
+            }),
+          }),
         },
       },
       MuiDivider: {
         styleOverrides: {
-          root: {
-            borderColor:
-              theme.palette.mode === 'dark'
-                ? alpha(theme.palette.primary[100], 0.08)
-                : theme.palette.grey[100],
-          },
+          root: ({ theme }) => ({
+            borderColor: (theme.vars || theme).palette.grey[100],
+            ...theme.applyDarkStyles({
+              borderColor: alpha(theme.palette.primary[100], 0.08),
+            }),
+          }),
         },
       },
       MuiLink: {
@@ -484,108 +570,102 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
           underline: 'none',
         },
         styleOverrides: {
-          root: {
-            color:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primary[300]
-                : theme.palette.primary[600],
-            fontWeight: 700,
-            display: 'inline-flex',
-            alignItems: 'center',
-            '&:hover': {
-              color:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primary[200]
-                  : theme.palette.primary[700],
-            },
-            '&.MuiTypography-body1 > svg': {
-              marginTop: 2,
-            },
-            '& svg:last-child': {
-              marginLeft: 2,
+          root: ({ theme }) => [
+            {
+              color: (theme.vars || theme).palette.primary[600],
+              '&:hover': {
+                color: (theme.vars || theme).palette.primary[700],
+              },
+              fontWeight: 700,
+              display: 'inline-flex',
+              alignItems: 'center',
+              '&.MuiTypography-body1 > svg': {
+                marginTop: 2,
+              },
+              '& svg:last-child': {
+                marginLeft: 2,
+              },
             },
-          },
+            theme.applyDarkStyles({
+              color: (theme.vars || theme).palette.primary[300],
+              '&:hover': {
+                color: (theme.vars || theme).palette.primary[200],
+              },
+            }),
+          ],
         },
       },
       MuiChip: {
         styleOverrides: {
-          root: ({ ownerState: { color, variant } }) => ({
+          root: ({ ownerState: { color, variant }, theme }) => ({
             fontWeight: 500,
             ...(variant === 'outlined' &&
               color === 'default' && {
-                color:
-                  theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900],
                 backgroundColor: 'transparent',
-                borderColor:
-                  theme.palette.mode === 'dark'
-                    ? alpha(theme.palette.grey[100], 0.1)
-                    : theme.palette.grey[200],
+                color: (theme.vars || theme).palette.grey[900],
+                borderColor: (theme.vars || theme).palette.grey[200],
                 '&:hover': {
-                  color:
-                    theme.palette.mode === 'dark'
-                      ? theme.palette.grey[300]
-                      : theme.palette.grey[900],
+                  color: (theme.vars || theme).palette.grey[900],
                 },
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.grey[300],
+                  borderColor: alpha(theme.palette.grey[100], 0.1),
+                  '&:hover': {
+                    color: (theme.vars || theme).palette.grey[300],
+                  },
+                }),
               }),
             ...(variant === 'outlined' &&
               color === 'primary' && {
                 '&:hover': {
-                  color: theme.palette.primary[500],
+                  color: (theme.vars || theme).palette.primary[500],
                 },
               }),
             ...(variant === 'filled' &&
               color === 'default' && {
                 border: '1px solid transparent',
-                color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700],
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? alpha(theme.palette.primaryDark[500], 0.8)
-                    : alpha(theme.palette.primary[100], 0.5),
+                color: (theme.vars || theme).palette.primary[700],
+                backgroundColor: alpha(theme.palette.primary[100], 0.5),
                 '&:hover': {
-                  backgroundColor:
-                    theme.palette.mode === 'dark'
-                      ? theme.palette.primaryDark[600]
-                      : theme.palette.primary[100],
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
                 },
+                ...theme.applyDarkStyles({
+                  color: '#fff',
+                  backgroundColor: alpha(theme.palette.primaryDark[500], 0.8),
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                  },
+                }),
               }),
             // for labelling product in the search
             // @ts-ignore internal repo module augmentation issue
             ...(variant === 'light' && {
               ...(color === 'default' && {
-                color:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primary[200]
-                    : theme.palette.primary[700],
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? alpha(theme.palette.primaryDark[700], 0.5)
-                    : alpha(theme.palette.primary[100], 0.3),
+                color: (theme.vars || theme).palette.primary[700],
+                backgroundColor: alpha(theme.palette.primary[100], 0.3),
+                ...theme.applyDarkStyles({
+                  color: (theme.vars || theme).palette.primary[200],
+                  backgroundColor: alpha(theme.palette.primaryDark[700], 0.5),
+                }),
               }),
               ...(color === 'warning' && {
-                color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.warning[900],
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.warning[900]
-                    : theme.palette.warning[100],
+                color: (theme.vars || theme).palette.warning[900],
+                backgroundColor: (theme.vars || theme).palette.warning[100],
+                ...theme.applyDarkStyles({
+                  color: '#fff',
+                  backgroundColor: (theme.vars || theme).palette.warning[900],
+                }),
               }),
               ...(color === 'success' && {
-                color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.success[900],
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.success[900]
-                    : theme.palette.success[100],
+                color: (theme.vars || theme).palette.success[900],
+                backgroundColor: (theme.vars || theme).palette.success[100],
+                ...theme.applyDarkStyles({
+                  color: '#fff',
+                  backgroundColor: (theme.vars || theme).palette.success[900],
+                }),
               }),
             }),
           }),
-          deleteIcon: {
-            color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[700],
-            '&:hover': {
-              color:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.grey[100]
-                  : theme.palette.primary[900],
-            },
-          },
         },
       },
       MuiList: {
@@ -597,40 +677,43 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
       },
       MuiListItemButton: {
         styleOverrides: {
-          root: {
-            padding: '8px',
-            textTransform: 'none',
-            fontWeight: 500,
-            fontSize: theme.typography.pxToRem(14),
-            color:
-              theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700],
-            borderRadius: 0,
-            '&:hover': {
-              backgroundColor:
-                theme.palette.mode === 'dark'
-                  ? alpha(theme.palette.primaryDark[700], 0.4)
-                  : theme.palette.grey[50],
-            },
-            '&.Mui-selected': {
-              color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500],
-              borderRadius: 10,
-              border: '1px solid',
-              borderColor:
-                theme.palette.mode === 'dark'
-                  ? `${theme.palette.primary[700]} !important`
-                  : `${theme.palette.primary[500]} !important`,
-              backgroundColor:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[700]
-                  : theme.palette.primary[50],
+          root: ({ theme }) => [
+            {
+              padding: '8px',
+              textTransform: 'none',
+              fontWeight: 500,
+              fontSize: theme.typography.pxToRem(14),
+              color: theme.palette.grey[700],
+              borderRadius: 0,
               '&:hover': {
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[600]
-                    : theme.palette.primary[100],
+                backgroundColor: theme.palette.grey[50],
+              },
+              '&.Mui-selected': {
+                borderRadius: 10,
+                border: '1px solid',
+                color: (theme.vars || theme).palette.primary[500],
+                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
               },
             },
-          },
+            theme.applyDarkStyles({
+              color: theme.palette.grey[300],
+              '&:hover': {
+                backgroundColor: alpha(theme.palette.primaryDark[700], 0.4),
+              },
+              '&.Mui-selected': {
+                color: '#fff',
+                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                },
+              },
+            }),
+          ],
         },
       },
       MuiSelect: {
@@ -650,85 +733,90 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
       },
       MuiPaper: {
         styleOverrides: {
-          root: {
-            backgroundImage: 'none',
-            backgroundColor:
-              theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff',
-            '&[href]': {
-              textDecorationLine: 'none',
-            },
-          },
-          outlined: {
-            display: 'block',
-            borderColor:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[500]
-                : theme.palette.grey[200],
-            ...(theme.palette.mode === 'dark' && {
-              backgroundColor: theme.palette.primaryDark[700],
-            }),
-            'a&, button&': {
-              '&:hover': {
-                boxShadow: `0px 4px 20px ${
-                  theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(170, 180, 190, 0.3)'
-                }`,
+          root: ({ theme, ownerState }) => [
+            {
+              backgroundImage: 'none',
+              backgroundColor: '#fff',
+              '&[href]': {
+                textDecorationLine: 'none',
               },
+              ...(ownerState.variant === 'outlined' && {
+                display: 'block',
+                borderColor: (theme.vars || theme).palette.grey[200],
+                ':is(a, button)': {
+                  '&:hover': {
+                    boxShadow: `0px 4px 20px rgba(170, 180, 190, 0.3)`,
+                  },
+                },
+              }),
             },
-          },
+            theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+              ...(ownerState.variant === 'outlined' && {
+                borderColor: (theme.vars || theme).palette.primaryDark[500],
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                ':is(a, button)': {
+                  '&:hover': {
+                    boxShadow: `0px 4px 20px rgba(0, 0, 0, 0.5)`,
+                  },
+                },
+              }),
+            }),
+          ],
         },
       },
       MuiTableCell: {
         styleOverrides: {
-          root: {
+          root: ({ theme, ownerState }) => ({
             padding: theme.spacing(1, 2),
-            borderColor: theme.palette.divider,
-          },
-          head: {
-            color: theme.palette.text.primary,
-            fontWeight: 700,
-          },
-          body: {
-            color: theme.palette.text.secondary,
-          },
+            borderColor: (theme.vars || theme).palette.divider,
+            ...(ownerState.variant === 'head' && {
+              color: (theme.vars || theme).palette.text.primary,
+              fontWeight: 700,
+            }),
+            ...(ownerState.variant === 'body' && {
+              color: (theme.vars || theme).palette.text.secondary,
+            }),
+          }),
         },
       },
       MuiToggleButtonGroup: {
         styleOverrides: {
-          root: {
-            backgroundColor:
-              theme.palette.mode === 'dark' ? theme.palette.primaryDark[900] : '#fff',
-          },
+          root: ({ theme }) => ({
+            backgroundColor: '#fff',
+            ...theme.applyDarkStyles({
+              backgroundColor: (theme.vars || theme).palette.primaryDark[900],
+            }),
+          }),
         },
       },
       MuiToggleButton: {
         styleOverrides: {
-          root: {
-            textTransform: 'none',
-            fontWeight: 500,
-            color:
-              theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700],
-            borderColor:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[500]
-                : theme.palette.grey[200],
-            '&.Mui-selected': {
-              color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500],
-              borderColor:
-                theme.palette.mode === 'dark'
-                  ? `${theme.palette.primary[700]} !important`
-                  : `${theme.palette.primary[500]} !important`,
-              backgroundColor:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[700]
-                  : theme.palette.primary[50],
-              '&:hover': {
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[600]
-                    : theme.palette.primary[100],
+          root: ({ theme }) => [
+            {
+              textTransform: 'none',
+              fontWeight: 500,
+              color: theme.palette.grey[700],
+              borderColor: theme.palette.grey[200],
+              '&.Mui-selected': {
+                color: (theme.vars || theme).palette.primary[500],
+                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primary[50],
               },
             },
-          },
+            theme.applyDarkStyles({
+              color: theme.palette.grey[300],
+              borderColor: theme.palette.primaryDark[500],
+              '&.Mui-selected': {
+                color: '#fff',
+                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                },
+              },
+            }),
+          ],
         },
       },
       MuiTooltip: {
@@ -760,12 +848,14 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
               opacity: 1,
             },
           },
-          track: {
+          track: ({ theme }) => ({
             opacity: 1,
             borderRadius: 32,
-            backgroundColor:
-              theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[400],
-          },
+            backgroundColor: theme.palette.grey[400],
+            ...theme.applyDarkStyles({
+              backgroundColor: theme.palette.grey[800],
+            }),
+          }),
           thumb: {
             flexShrink: 0,
             width: '14px',
@@ -775,33 +865,34 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
       },
       MuiPaginationItem: {
         styleOverrides: {
-          root: {
-            textTransform: 'none',
-            fontWeight: 700,
-            color:
-              theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[700],
-            borderColor:
-              theme.palette.mode === 'dark'
-                ? theme.palette.primaryDark[500]
-                : theme.palette.grey[200],
-            '&.Mui-selected': {
-              color: theme.palette.mode === 'dark' ? '#fff' : theme.palette.primary[500],
-              borderColor:
-                theme.palette.mode === 'dark'
-                  ? `${theme.palette.primary[700]} !important`
-                  : `${theme.palette.primary[500]} !important`,
-              backgroundColor:
-                theme.palette.mode === 'dark'
-                  ? theme.palette.primaryDark[700]
-                  : theme.palette.primary[50],
-              '&:hover': {
-                backgroundColor:
-                  theme.palette.mode === 'dark'
-                    ? theme.palette.primaryDark[600]
-                    : theme.palette.primary[100],
+          root: ({ theme }) => [
+            {
+              textTransform: 'none',
+              fontWeight: 700,
+              color: theme.palette.grey[700],
+              borderColor: theme.palette.grey[200],
+              '&.Mui-selected': {
+                color: (theme.vars || theme).palette.primary[500],
+                borderColor: `${(theme.vars || theme).palette.primary[500]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primary[50],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[100],
+                },
               },
             },
-          },
+            theme.applyDarkStyles({
+              color: theme.palette.grey[300],
+              borderColor: theme.palette.primaryDark[500],
+              '&.Mui-selected': {
+                color: '#fff',
+                borderColor: `${(theme.vars || theme).palette.primary[700]} !important`,
+                backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+                },
+              },
+            }),
+          ],
         },
       },
       MuiCssBaseline: {
@@ -814,4 +905,4 @@ export function getThemedComponents(theme: Theme): { components: Theme['componen
 }
 
 const darkTheme = createTheme(getDesignTokens('dark'));
-export const brandingDarkTheme = deepmerge(darkTheme, getThemedComponents(darkTheme));
+export const brandingDarkTheme = deepmerge(darkTheme, getThemedComponents());
diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js
index 73fa10253f76fa..514666ce069217 100644
--- a/docs/src/modules/components/AppSettingsDrawer.js
+++ b/docs/src/modules/components/AppSettingsDrawer.js
@@ -17,7 +17,7 @@ import SettingsBrightnessIcon from '@mui/icons-material/SettingsBrightness';
 import FormatTextdirectionLToRIcon from '@mui/icons-material/FormatTextdirectionLToR';
 import FormatTextdirectionRToLIcon from '@mui/icons-material/FormatTextdirectionRToL';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
-import { getCookie, pathnameToLanguage } from 'docs/src/modules/utils/helpers';
+import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import NoSsr from '@mui/material/NoSsr';
 import { LANGUAGES_LABEL } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
@@ -60,7 +60,13 @@ function AppSettingsDrawer(props) {
   const { canonicalAs } = pathnameToLanguage(router.asPath);
 
   React.useEffect(() => {
-    const initialMode = getCookie('paletteMode') || 'system';
+    // syncing with homepage, can be removed once all pages are migrated to CSS variables
+    let initialMode = 'system';
+    try {
+      initialMode = localStorage.getItem('mui-mode') || initialMode;
+    } catch (error) {
+      // do nothing
+    }
     setMode(initialMode);
   }, [preferredMode]);
 
@@ -72,10 +78,10 @@ function AppSettingsDrawer(props) {
     setMode(paletteMode);
 
     if (paletteMode === 'system') {
-      document.cookie = `paletteMode=;path=/;max-age=31536000`;
+      localStorage.setItem('mui-mode', 'system'); // syncing with homepage, can be removed once all pages are migrated to CSS variables
       changeTheme({ paletteMode: preferredMode });
     } else {
-      document.cookie = `paletteMode=${paletteMode};path=/;max-age=31536000`;
+      localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
       changeTheme({ paletteMode });
     }
   };
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
index 299582eb96a795..fba40295138215 100644
--- a/docs/src/modules/components/ThemeContext.js
+++ b/docs/src/modules/components/ThemeContext.js
@@ -175,7 +175,10 @@ export function ThemeProvider(props) {
   React.useEffect(() => {
     if (typeof window !== 'undefined') {
       const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
-      const nextPaletteMode = getCookie('paletteMode') || preferredMode;
+      let nextPaletteMode = localStorage.getItem('mui-mode') || preferredMode; // syncing with homepage, can be removed once all pages are migrated to CSS variables
+      if (nextPaletteMode === 'system') {
+        nextPaletteMode = preferredMode;
+      }
 
       dispatch({
         type: 'CHANGE',
@@ -244,6 +247,7 @@ export function ThemeProvider(props) {
   }, [theme]);
 
   useEnhancedEffect(() => {
+    // To support light and dark mode images in the docs
     if (theme.palette.mode === 'dark') {
       document.body.classList.remove('mode-light');
       document.body.classList.add('mode-dark');
