diff --git a/.circleci/config.yml b/.circleci/config.yml
index 4cb1b1a1d52884..36c364d56b1c62 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -299,12 +299,6 @@ jobs:
           command: |
             pnpm docs:link-check
             git add -A && git diff --exit-code --staged
-      - run:
-          name: Update the templates shared themes
-          command: pnpm template:update-theme
-      - run:
-          name: '`pnpm template:update-theme` changes committed?'
-          command: git add -A && git diff --exit-code --staged
   test_types:
     <<: *default-job
     resource_class: 'medium+'
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index ccbdc6ebd8ff96..56999db60af9a7 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -261,6 +261,81 @@ return (
 
 If you are getting the error: `TypeError: Cannot convert a Symbol value to a string`, take a look at the [styled()](/system/styled/#how-to-use-components-selector-api) docs page for instructions on how you can fix this.
 
+## How can I contribute to the free templates?
+
+The templates are built using a [shared theme](https://github.com/mui/material-ui/tree/v6.0.2/docs/data/material/getting-started/templates/shared-theme). Below are the structure to create a new template:
+
+### Template page
+
+Create a new page in the `docs/pages/material-ui/getting-started/templates/<name>.js` directory with the following code:
+
+```js
+import * as React from 'react';
+import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
+import Template from 'docs/data/material/getting-started/templates/<name>/<Template>';
+
+export default function Page() {
+  return (
+    <AppTheme>
+      <TemplateFrame>
+        <Template />
+      </TemplateFrame>
+    </AppTheme>
+  );
+}
+```
+
+Then create a template file at `docs/data/material/getting-started/templates/<name>/<Template>.tsx` (add more files if needed):
+
+> Note: The `<Template>` must be a pascal case string of the `<name>` folder.
+
+### Shared theme
+
+The template must use `AppTheme` from `../shared-theme/AppTheme` to ensure a consistent look and feel across all templates.
+
+If the template includes custom-themed components, such as the dashboard template with MUI X themed components, pass them to the `AppTheme`'s `themedComponents` prop:
+
+```js
+import AppTheme from '../shared-theme/AppTheme';
+
+const xThemeComponents = {
+  ...chartsCustomizations,
+  ...dataGridCustomizations,
+  ...datePickersCustomizations,
+  ...treeViewCustomizations,
+};
+
+export default function Dashboard(props: { disableCustomTheme?: boolean }) {
+  return (
+    <AppTheme {...props} themeComponents={xThemeComponents}>...</AppTheme>
+  )
+}
+```
+
+### Color mode toggle
+
+The shared theme provides 2 appearance of the color mode toggle, `ColorModeSelect` and `ColorModeIconDropdown`.
+You can use either of them in your template, it will be hidden within the `TemplateFrame` but will be visible in the Code Sandbox and Stackblitz.
+
+### Template frame
+
+If the template has a sidebar or a header that needs to stick to the top, refer to the CSS variable `--template-frame-height` to adjust.
+
+For example, the dashboard template has a fixed header that needs to be accounted for the template frame height:
+
+```js
+<AppBar
+  position="fixed"
+  sx={{
+    top: 'var(--template-frame-height, 0px)',
+    // ...other styles
+  }}
+>
+```
+
+This will make the `AppBar` stay below the `TemplateFrame` in a preview mode but stick to the top in the CodeSandbox and Stackblitz.
+
 ## [legacy] I have several instances of styles on the page
 
 If you are seeing a warning message in the console like the one below, you probably have several instances of `@mui/styles` initialized on the page.
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
index ee7881bb20a2e1..4c7a1d80216988 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
@@ -1,81 +1,60 @@
 import * as React from 'react';
-import { createTheme, ThemeProvider, alpha } from '@mui/material/styles';
+
+import { alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import getDashboardTheme from './theme/getDashboardTheme';
 import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
-import TemplateFrame from './TemplateFrame';
-
-export default function Dashboard() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const dashboardTheme = createTheme(getDashboardTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
+import AppTheme from '../shared-theme/AppTheme';
+import {
+  chartsCustomizations,
+  dataGridCustomizations,
+  datePickersCustomizations,
+  treeViewCustomizations,
+} from './theme/customizations';
 
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+const xThemeComponents = {
+  ...chartsCustomizations,
+  ...dataGridCustomizations,
+  ...datePickersCustomizations,
+  ...treeViewCustomizations,
+};
 
+export default function Dashboard(props) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <Box sx={{ display: 'flex' }}>
-          <SideMenu />
-          <AppNavbar />
-          {/* Main content */}
-          <Box
-            component="main"
-            sx={(theme) => ({
-              flexGrow: 1,
-              backgroundColor: alpha(theme.palette.background.default, 1),
-              overflow: 'auto',
-            })}
+    <AppTheme {...props} themeComponents={xThemeComponents}>
+      <CssBaseline enableColorScheme />
+      <Box sx={{ display: 'flex' }}>
+        <SideMenu />
+        <AppNavbar />
+        {/* Main content */}
+        <Box
+          component="main"
+          sx={(theme) => ({
+            flexGrow: 1,
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
+              : alpha(theme.palette.background.default, 1),
+            overflow: 'auto',
+          })}
+        >
+          <Stack
+            spacing={2}
+            sx={{
+              alignItems: 'center',
+              mx: 3,
+              pb: 10,
+              mt: { xs: 8, md: 0 },
+            }}
           >
-            <Stack
-              spacing={2}
-              sx={{
-                alignItems: 'center',
-                mx: 3,
-                pb: 10,
-                mt: { xs: 8, md: 0 },
-              }}
-            >
-              <Header />
-              <MainGrid />
-            </Stack>
-          </Box>
+            <Header />
+            <MainGrid />
+          </Stack>
         </Box>
-      </ThemeProvider>
-    </TemplateFrame>
+      </Box>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
index f8f6608011af97..2167a2cfe5b219 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
@@ -1,86 +1,63 @@
 import * as React from 'react';
-import {
-  PaletteMode,
-  createTheme,
-  ThemeProvider,
-  alpha,
-} from '@mui/material/styles';
+import type {} from '@mui/x-date-pickers/themeAugmentation';
+import type {} from '@mui/x-charts/themeAugmentation';
+import type {} from '@mui/x-data-grid/themeAugmentation';
+import type {} from '@mui/x-tree-view/themeAugmentation';
+import { alpha } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
-import getDashboardTheme from './theme/getDashboardTheme';
 import AppNavbar from './components/AppNavbar';
 import Header from './components/Header';
 import MainGrid from './components/MainGrid';
 import SideMenu from './components/SideMenu';
-import TemplateFrame from './TemplateFrame';
-
-export default function Dashboard() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const dashboardTheme = createTheme(getDashboardTheme(mode));
-  const defaultTheme = createTheme({ palette: { mode } });
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
+import AppTheme from '../shared-theme/AppTheme';
+import {
+  chartsCustomizations,
+  dataGridCustomizations,
+  datePickersCustomizations,
+  treeViewCustomizations,
+} from './theme/customizations';
 
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
+const xThemeComponents = {
+  ...chartsCustomizations,
+  ...dataGridCustomizations,
+  ...datePickersCustomizations,
+  ...treeViewCustomizations,
+};
 
+export default function Dashboard(props: { disableCustomTheme?: boolean }) {
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <Box sx={{ display: 'flex' }}>
-          <SideMenu />
-          <AppNavbar />
-          {/* Main content */}
-          <Box
-            component="main"
-            sx={(theme) => ({
-              flexGrow: 1,
-              backgroundColor: alpha(theme.palette.background.default, 1),
-              overflow: 'auto',
-            })}
+    <AppTheme {...props} themeComponents={xThemeComponents}>
+      <CssBaseline enableColorScheme />
+      <Box sx={{ display: 'flex' }}>
+        <SideMenu />
+        <AppNavbar />
+        {/* Main content */}
+        <Box
+          component="main"
+          sx={(theme) => ({
+            flexGrow: 1,
+            backgroundColor: theme.vars
+              ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
+              : alpha(theme.palette.background.default, 1),
+            overflow: 'auto',
+          })}
+        >
+          <Stack
+            spacing={2}
+            sx={{
+              alignItems: 'center',
+              mx: 3,
+              pb: 10,
+              mt: { xs: 8, md: 0 },
+            }}
           >
-            <Stack
-              spacing={2}
-              sx={{
-                alignItems: 'center',
-                mx: 3,
-                pb: 10,
-                mt: { xs: 8, md: 0 },
-              }}
-            >
-              <Header />
-              <MainGrid />
-            </Stack>
-          </Box>
+            <Header />
+            <MainGrid />
+          </Stack>
         </Box>
-      </ThemeProvider>
-    </TemplateFrame>
+      </Box>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js
deleted file mode 100644
index d05d218cf84528..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getDashboardTheme from './theme/getDashboardTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const dashboardTheme = createTheme(getDashboardTheme(mode));
-
-  return (
-    <ThemeProvider theme={dashboardTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <Button
-              variant="text"
-              size="small"
-              aria-label="Back to templates"
-              startIcon={<ArrowBackRoundedIcon />}
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'none', sm: 'flex' } }}
-            >
-              Back to templates
-            </Button>
-            <IconButton
-              size="small"
-              aria-label="Back to templates"
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'auto', sm: 'none' } }}
-            >
-              <ArrowBackRoundedIcon />
-            </IconButton>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
-                <Select
-                  size="small"
-                  labelId="theme-select-label"
-                  id="theme-select"
-                  value={showCustomTheme ? 'custom' : 'material'}
-                  onChange={handleChange}
-                  label="Design Language"
-                >
-                  <MenuItem value="custom">Custom Theme</MenuItem>
-                  <MenuItem value="material">Material Design 2</MenuItem>
-                </Select>
-              </FormControl>
-              <ToggleColorMode
-                data-screenshot="toggle-mode"
-                mode={mode}
-                toggleColorMode={toggleColorMode}
-              />
-            </Box>
-          </Toolbar>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx b/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx
deleted file mode 100644
index 98dbfa60d964ea..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from 'react';
-import {
-  createTheme,
-  ThemeProvider,
-  PaletteMode,
-  styled,
-} from '@mui/material/styles';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './components/ToggleColorMode';
-import getDashboardTheme from './theme/getDashboardTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const dashboardTheme = createTheme(getDashboardTheme(mode));
-
-  return (
-    <ThemeProvider theme={dashboardTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <Button
-              variant="text"
-              size="small"
-              aria-label="Back to templates"
-              startIcon={<ArrowBackRoundedIcon />}
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'none', sm: 'flex' } }}
-            >
-              Back to templates
-            </Button>
-            <IconButton
-              size="small"
-              aria-label="Back to templates"
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'auto', sm: 'none' } }}
-            >
-              <ArrowBackRoundedIcon />
-            </IconButton>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
-                <Select
-                  size="small"
-                  labelId="theme-select-label"
-                  id="theme-select"
-                  value={showCustomTheme ? 'custom' : 'material'}
-                  onChange={handleChange}
-                  label="Design Language"
-                >
-                  <MenuItem value="custom">Custom Theme</MenuItem>
-                  <MenuItem value="material">Material Design 2</MenuItem>
-                </Select>
-              </FormControl>
-              <ToggleColorMode
-                data-screenshot="toggle-mode"
-                mode={mode}
-                toggleColorMode={toggleColorMode}
-              />
-            </Box>
-          </Toolbar>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
index 2474562084b48f..b36ab872fa43cb 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.js
@@ -44,7 +44,7 @@ export default function AppNavbar() {
         backgroundImage: 'none',
         borderBottom: '1px solid',
         borderColor: 'divider',
-        top: '56px',
+        top: 'var(--template-frame-height, 0px)',
       }}
     >
       <Toolbar variant="regular">
diff --git a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
index a217dd40cb856a..317348c201a179 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/AppNavbar.tsx
@@ -44,7 +44,7 @@ export default function AppNavbar() {
         backgroundImage: 'none',
         borderBottom: '1px solid',
         borderColor: 'divider',
-        top: '56px',
+        top: 'var(--template-frame-height, 0px)',
       }}
     >
       <Toolbar variant="regular">
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
index 19c5f7524cadc5..45dcb5dd731d20 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.js
@@ -56,7 +56,7 @@ const StyledText = styled('text', {
 })(({ theme }) => ({
   textAnchor: 'middle',
   dominantBaseline: 'central',
-  fill: theme.palette.text.secondary,
+  fill: (theme.vars || theme).palette.text.secondary,
   variants: [
     {
       props: {
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
index 91d1934f14dcb6..0946925599c31a 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/ChartUserByCountry.tsx
@@ -59,7 +59,7 @@ const StyledText = styled('text', {
 })<StyledTextProps>(({ theme }) => ({
   textAnchor: 'middle',
   dominantBaseline: 'central',
-  fill: theme.palette.text.secondary,
+  fill: (theme.vars || theme).palette.text.secondary,
   variants: [
     {
       props: {
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
index 5290f66242cc41..c86fe32506f464 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.js
@@ -100,8 +100,8 @@ TransitionComponent.propTypes = {
 function CustomLabel({ color, expandable, children, ...other }) {
   const theme = useTheme();
   const colors = {
-    blue: theme.palette.primary.main,
-    green: theme.palette.success.main,
+    blue: (theme.vars || theme).palette.primary.main,
+    green: (theme.vars || theme).palette.success.main,
   };
 
   const iconColor = color ? colors[color] : null;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
index 9bc2a5618b5da6..dc1380f518cc47 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/CustomizedTreeView.tsx
@@ -105,8 +105,8 @@ interface CustomLabelProps {
 function CustomLabel({ color, expandable, children, ...other }: CustomLabelProps) {
   const theme = useTheme();
   const colors = {
-    blue: theme.palette.primary.main,
-    green: theme.palette.success.main,
+    blue: (theme.vars || theme).palette.primary.main,
+    green: (theme.vars || theme).palette.success.main,
   };
 
   const iconColor = color ? colors[color] : null;
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.js b/docs/data/material/getting-started/templates/dashboard/components/Header.js
index a1e3414a32d7d0..8c26e28e5b937b 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Header.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/Header.js
@@ -4,6 +4,7 @@ import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 import CustomDatePicker from './CustomDatePicker';
 import NavbarBreadcrumbs from './NavbarBreadcrumbs';
 import MenuButton from './MenuButton';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 import Search from './Search';
 
@@ -28,6 +29,7 @@ export default function Header() {
         <MenuButton showBadge aria-label="Open notifications">
           <NotificationsRoundedIcon />
         </MenuButton>
+        <ColorModeIconDropdown />
       </Stack>
     </Stack>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
index a1e3414a32d7d0..8c26e28e5b937b 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/Header.tsx
@@ -4,6 +4,7 @@ import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
 import CustomDatePicker from './CustomDatePicker';
 import NavbarBreadcrumbs from './NavbarBreadcrumbs';
 import MenuButton from './MenuButton';
+import ColorModeIconDropdown from '../../shared-theme/ColorModeIconDropdown';
 
 import Search from './Search';
 
@@ -28,6 +29,7 @@ export default function Header() {
         <MenuButton showBadge aria-label="Open notifications">
           <NotificationsRoundedIcon />
         </MenuButton>
+        <ColorModeIconDropdown />
       </Stack>
     </Stack>
   );
diff --git a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js
index 0b07db10b8768d..9bf8f65bfb1ebc 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.js
@@ -7,7 +7,7 @@ import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
   margin: theme.spacing(1, 0),
   [`& .${breadcrumbsClasses.separator}`]: {
-    color: theme.palette.action.disabled,
+    color: (theme.vars || theme).palette.action.disabled,
     margin: 1,
   },
   [`& .${breadcrumbsClasses.ol}`]: {
diff --git a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx
index 0b07db10b8768d..9bf8f65bfb1ebc 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/NavbarBreadcrumbs.tsx
@@ -7,7 +7,7 @@ import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 const StyledBreadcrumbs = styled(Breadcrumbs)(({ theme }) => ({
   margin: theme.spacing(1, 0),
   [`& .${breadcrumbsClasses.separator}`]: {
-    color: theme.palette.action.disabled,
+    color: (theme.vars || theme).palette.action.disabled,
     margin: 1,
   },
   [`& .${breadcrumbsClasses.ol}`]: {
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
index b00d1f9abcaf8e..d9804fc41b4945 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.js
@@ -10,9 +10,9 @@ import { useTheme } from '@mui/material/styles';
 export default function PageViewsBarChart() {
   const theme = useTheme();
   const colorPalette = [
-    theme.palette.primary.dark,
-    theme.palette.primary.main,
-    theme.palette.primary.light,
+    (theme.vars || theme).palette.primary.dark,
+    (theme.vars || theme).palette.primary.main,
+    (theme.vars || theme).palette.primary.light,
   ];
 
   return (
diff --git a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
index d4971de8c4c252..e7a90bde2a416c 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/PageViewsBarChart.tsx
@@ -10,9 +10,9 @@ import { useTheme } from '@mui/material/styles';
 export default function PageViewsBarChart() {
   const theme = useTheme();
   const colorPalette = [
-    theme.palette.primary.dark,
-    theme.palette.primary.main,
-    theme.palette.primary.light,
+    (theme.vars || theme).palette.primary.dark,
+    (theme.vars || theme).palette.primary.main,
+    (theme.vars || theme).palette.primary.light,
   ];
   return (
     <Card variant="outlined" sx={{ width: '100%' }}>
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js
index 727094ab694b5b..90410822bd94dd 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.js
@@ -16,9 +16,9 @@ import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded';
 const Avatar = styled(MuiAvatar)(({ theme }) => ({
   width: 28,
   height: 28,
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.text.secondary,
-  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.secondary,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
 }));
 
 const ListItemAvatar = styled(MuiListItemAvatar)({
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx
index c64a498e7d98f2..4d36f033453eee 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SelectContent.tsx
@@ -16,9 +16,9 @@ import ConstructionRoundedIcon from '@mui/icons-material/ConstructionRounded';
 const Avatar = styled(MuiAvatar)(({ theme }) => ({
   width: 28,
   height: 28,
-  backgroundColor: theme.palette.background.paper,
-  color: theme.palette.text.secondary,
-  border: `1px solid ${theme.palette.divider}`,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  color: (theme.vars || theme).palette.text.secondary,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
 }));
 
 const ListItemAvatar = styled(MuiListItemAvatar)({
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
index 62804e6f3e5301..80d97439f55ab3 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.js
@@ -38,7 +38,7 @@ export default function SideMenu() {
       <Box
         sx={{
           display: 'flex',
-          mt: '60px',
+          mt: 'calc(var(--template-frame-height, 0px) + 4px)',
           p: 1.5,
         }}
       >
diff --git a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
index 62804e6f3e5301..80d97439f55ab3 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/SideMenu.tsx
@@ -38,7 +38,7 @@ export default function SideMenu() {
       <Box
         sx={{
           display: 'flex',
-          mt: '60px',
+          mt: 'calc(var(--template-frame-height, 0px) + 4px)',
           p: 1.5,
         }}
       >
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
deleted file mode 100644
index d5ee6056904b0c..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup, {
-  toggleButtonGroupClasses,
-} from '@mui/material/ToggleButtonGroup';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
-function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Platform"
-        sx={{
-          backgroundColor: 'background.default',
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
-
-ToggleCustomTheme.propTypes = {
-  showCustomTheme: PropTypes.shape({
-    valueOf: PropTypes.func.isRequired,
-  }).isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default ToggleCustomTheme;
diff --git a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
deleted file mode 100644
index 8aa763b706ddea..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import ToggleButton from '@mui/material/ToggleButton';
-import ToggleButtonGroup, {
-  toggleButtonGroupClasses,
-} from '@mui/material/ToggleButtonGroup';
-import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
-
-interface ToggleCustomThemeProps {
-  showCustomTheme: Boolean;
-  toggleCustomTheme: () => void;
-}
-
-export default function ToggleCustomTheme({
-  showCustomTheme,
-  toggleCustomTheme,
-}: ToggleCustomThemeProps) {
-  return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        width: '100dvw',
-        position: 'fixed',
-        bottom: 24,
-      }}
-    >
-      <ToggleButtonGroup
-        color="primary"
-        exclusive
-        value={showCustomTheme}
-        onChange={toggleCustomTheme}
-        aria-label="Platform"
-        sx={{
-          backgroundColor: 'background.default',
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            pointerEvents: 'none',
-          },
-        }}
-      >
-        <ToggleButton value>
-          <AutoAwesomeRoundedIcon sx={{ mr: 1 }} />
-          Custom theme
-        </ToggleButton>
-        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
-          Material Design 2
-        </ToggleButton>
-      </ToggleButtonGroup>
-    </Box>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js
index 25cb67116e8685..75fdc285ac4184 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.js
@@ -1,6 +1,6 @@
 import { axisClasses, legendClasses, chartsGridClasses } from '@mui/x-charts';
 
-import { gray } from '../themePrimitives';
+import { gray } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const chartsCustomizations = {
@@ -33,10 +33,10 @@ export const chartsCustomizations = {
       mark: ({ theme }) => ({
         ry: 6,
         boxShadow: 'none',
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
       }),
       table: ({ theme }) => ({
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
         borderRadius: theme.shape.borderRadius,
         background: 'hsl(0, 0%, 100%)',
         ...theme.applyStyles('dark', {
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts
index 39ae3db5dfc74c..9c2714c086bec4 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/charts.ts
@@ -1,7 +1,7 @@
 import { Theme } from '@mui/material/styles';
 import { axisClasses, legendClasses, chartsGridClasses } from '@mui/x-charts';
 import type { ChartsComponents } from '@mui/x-charts/themeAugmentation';
-import { gray } from '../themePrimitives';
+import { gray } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const chartsCustomizations: ChartsComponents<Theme> = {
@@ -34,10 +34,10 @@ export const chartsCustomizations: ChartsComponents<Theme> = {
       mark: ({ theme }) => ({
         ry: 6,
         boxShadow: 'none',
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
       }),
       table: ({ theme }) => ({
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
         borderRadius: theme.shape.borderRadius,
         background: 'hsl(0, 0%, 100%)',
         ...theme.applyStyles('dark', {
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js
index 5a0a1749558248..ed33816d0fc681 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.js
@@ -8,7 +8,7 @@ import { checkboxClasses } from '@mui/material/Checkbox';
 import { listClasses } from '@mui/material/List';
 import { gridClasses } from '@mui/x-data-grid';
 import { tablePaginationClasses } from '@mui/material/TablePagination';
-import { gray } from '../themePrimitives';
+import { gray } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const dataGridCustomizations = {
@@ -17,13 +17,13 @@ export const dataGridCustomizations = {
       root: ({ theme }) => ({
         '--DataGrid-overlayHeight': '300px',
         overflow: 'clip',
-        borderColor: theme.palette.divider,
-        backgroundColor: theme.palette.background.default,
+        borderColor: (theme.vars || theme).palette.divider,
+        backgroundColor: (theme.vars || theme).palette.background.default,
         [`& .${gridClasses.columnHeader}`]: {
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
         },
         [`& .${gridClasses.footerContainer}`]: {
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
         },
         [`& .${checkboxClasses.root}`]: {
           padding: theme.spacing(0.5),
@@ -42,12 +42,14 @@ export const dataGridCustomizations = {
           },
         },
       }),
-      cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }),
+      cell: ({ theme }) => ({
+        borderTopColor: (theme.vars || theme).palette.divider,
+      }),
       menu: ({ theme }) => ({
         borderRadius: theme.shape.borderRadius,
         backgroundImage: 'none',
         [`& .${paperClasses.root}`]: {
-          border: `1px solid ${theme.palette.divider}`,
+          border: `1px solid ${(theme.vars || theme).palette.divider}`,
         },
         [`& .${menuItemClasses.root}`]: {
           margin: '0 4px',
@@ -61,14 +63,16 @@ export const dataGridCustomizations = {
         },
       }),
       row: ({ theme }) => ({
-        '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` },
+        '&:last-of-type': {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+        },
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         '&.Mui-selected': {
-          background: theme.palette.action.selected,
+          background: (theme.vars || theme).palette.action.selected,
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
         },
       }),
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts
index a98b9bf04fc2d5..ecab713ea9b092 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/dataGrid.ts
@@ -9,7 +9,7 @@ import { checkboxClasses } from '@mui/material/Checkbox';
 import { listClasses } from '@mui/material/List';
 import { gridClasses } from '@mui/x-data-grid';
 import { tablePaginationClasses } from '@mui/material/TablePagination';
-import { gray } from '../themePrimitives';
+import { gray } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridComponents<Theme> = {
@@ -18,13 +18,13 @@ export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridComp
       root: ({ theme }) => ({
         '--DataGrid-overlayHeight': '300px',
         overflow: 'clip',
-        borderColor: theme.palette.divider,
-        backgroundColor: theme.palette.background.default,
+        borderColor: (theme.vars || theme).palette.divider,
+        backgroundColor: (theme.vars || theme).palette.background.default,
         [`& .${gridClasses.columnHeader}`]: {
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
         },
         [`& .${gridClasses.footerContainer}`]: {
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
         },
         [`& .${checkboxClasses.root}`]: {
           padding: theme.spacing(0.5),
@@ -43,12 +43,12 @@ export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridComp
           },
         },
       }),
-      cell: ({ theme }) => ({ borderTopColor: theme.palette.divider }),
+      cell: ({ theme }) => ({ borderTopColor: (theme.vars || theme).palette.divider }),
       menu: ({ theme }) => ({
         borderRadius: theme.shape.borderRadius,
         backgroundImage: 'none',
         [`& .${paperClasses.root}`]: {
-          border: `1px solid ${theme.palette.divider}`,
+          border: `1px solid ${(theme.vars || theme).palette.divider}`,
         },
 
         [`& .${menuItemClasses.root}`]: {
@@ -64,14 +64,14 @@ export const dataGridCustomizations: DataGridProComponents<Theme> & DataGridComp
       }),
 
       row: ({ theme }) => ({
-        '&:last-of-type': { borderBottom: `1px solid ${theme.palette.divider}` },
+        '&:last-of-type': { borderBottom: `1px solid ${(theme.vars || theme).palette.divider}` },
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         '&.Mui-selected': {
-          background: theme.palette.action.selected,
+          background: (theme.vars || theme).palette.action.selected,
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
         },
       }),
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js
index 3f2ffe1cd625fe..2d42dc4b2adf4f 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.js
@@ -6,7 +6,7 @@ import {
   pickersDayClasses,
 } from '@mui/x-date-pickers';
 import { menuItemClasses } from '@mui/material/MenuItem';
-import { gray, brand } from '../themePrimitives';
+import { gray, brand } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const datePickersCustomizations = {
@@ -15,7 +15,7 @@ export const datePickersCustomizations = {
       paper: ({ theme }) => ({
         marginTop: 4,
         borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
         backgroundImage: 'none',
         background: 'hsl(0, 0%, 100%)',
         boxShadow:
@@ -37,9 +37,9 @@ export const datePickersCustomizations = {
       spacer: { width: 16 },
       button: ({ theme }) => ({
         backgroundColor: 'transparent',
-        color: theme.palette.grey[500],
+        color: (theme.vars || theme).palette.grey[500],
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
+          color: (theme.vars || theme).palette.grey[400],
         }),
       }),
     },
@@ -56,11 +56,11 @@ export const datePickersCustomizations = {
     styleOverrides: {
       monthButton: ({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
-        color: theme.palette.grey[600],
+        color: (theme.vars || theme).palette.grey[600],
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         [`&.${pickersMonthClasses.selected}`]: {
           backgroundColor: gray[700],
@@ -73,12 +73,12 @@ export const datePickersCustomizations = {
           [`&.${pickersMonthClasses.selected}`]: { backgroundColor: gray[700] },
         },
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[300],
+          color: (theme.vars || theme).palette.grey[300],
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
           [`&.${pickersMonthClasses.selected}`]: {
-            color: theme.palette.common.black,
+            color: (theme.vars || theme).palette.common.black,
             fontWeight: theme.typography.fontWeightMedium,
             backgroundColor: gray[300],
           },
@@ -96,12 +96,12 @@ export const datePickersCustomizations = {
     styleOverrides: {
       yearButton: ({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
-        color: theme.palette.grey[600],
+        color: (theme.vars || theme).palette.grey[600],
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         height: 'fit-content',
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         [`&.${pickersYearClasses.selected}`]: {
           backgroundColor: gray[700],
@@ -114,12 +114,12 @@ export const datePickersCustomizations = {
           [`&.${pickersYearClasses.selected}`]: { backgroundColor: gray[700] },
         },
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[300],
+          color: (theme.vars || theme).palette.grey[300],
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
           [`&.${pickersYearClasses.selected}`]: {
-            color: theme.palette.common.black,
+            color: (theme.vars || theme).palette.common.black,
             fontWeight: theme.typography.fontWeightMedium,
             backgroundColor: gray[300],
           },
@@ -137,11 +137,11 @@ export const datePickersCustomizations = {
     styleOverrides: {
       root: ({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
-        color: theme.palette.grey[600],
+        color: (theme.vars || theme).palette.grey[600],
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         [`&.${pickersDayClasses.selected}`]: {
           backgroundColor: gray[700],
@@ -154,12 +154,12 @@ export const datePickersCustomizations = {
           [`&.${pickersDayClasses.selected}`]: { backgroundColor: gray[700] },
         },
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[300],
+          color: (theme.vars || theme).palette.grey[300],
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
           [`&.${pickersDayClasses.selected}`]: {
-            color: theme.palette.common.black,
+            color: (theme.vars || theme).palette.common.black,
             fontWeight: theme.typography.fontWeightMedium,
             backgroundColor: gray[300],
           },
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts
index 34e3f52aa0ebe1..be5e3b3a152c91 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/datePickers.ts
@@ -3,7 +3,7 @@ import type { PickersProComponents } from '@mui/x-date-pickers-pro/themeAugmenta
 import type { PickerComponents } from '@mui/x-date-pickers/themeAugmentation';
 import { pickersYearClasses, pickersMonthClasses, pickersDayClasses } from '@mui/x-date-pickers';
 import { menuItemClasses } from '@mui/material/MenuItem';
-import { gray, brand } from '../themePrimitives';
+import { gray, brand } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const datePickersCustomizations: PickersProComponents<Theme> & PickerComponents<Theme> = {
@@ -12,7 +12,7 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
       paper: ({ theme }) => ({
         marginTop: 4,
         borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
         backgroundImage: 'none',
         background: 'hsl(0, 0%, 100%)',
         boxShadow:
@@ -34,9 +34,9 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
       spacer: { width: 16 },
       button: ({ theme }) => ({
         backgroundColor: 'transparent',
-        color: theme.palette.grey[500],
+        color: (theme.vars || theme).palette.grey[500],
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
+          color: (theme.vars || theme).palette.grey[400],
         }),
       }),
     },
@@ -53,11 +53,11 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
     styleOverrides: {
       monthButton: ({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
-        color: theme.palette.grey[600],
+        color: (theme.vars || theme).palette.grey[600],
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         [`&.${pickersMonthClasses.selected}`]: {
           backgroundColor: gray[700],
@@ -70,12 +70,12 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
           [`&.${pickersMonthClasses.selected}`]: { backgroundColor: gray[700] },
         },
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[300],
+          color: (theme.vars || theme).palette.grey[300],
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
           [`&.${pickersMonthClasses.selected}`]: {
-            color: theme.palette.common.black,
+            color: (theme.vars || theme).palette.common.black,
             fontWeight: theme.typography.fontWeightMedium,
             backgroundColor: gray[300],
           },
@@ -93,12 +93,12 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
     styleOverrides: {
       yearButton: ({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
-        color: theme.palette.grey[600],
+        color: (theme.vars || theme).palette.grey[600],
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         height: 'fit-content',
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         [`&.${pickersYearClasses.selected}`]: {
           backgroundColor: gray[700],
@@ -111,12 +111,12 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
           [`&.${pickersYearClasses.selected}`]: { backgroundColor: gray[700] },
         },
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[300],
+          color: (theme.vars || theme).palette.grey[300],
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
           [`&.${pickersYearClasses.selected}`]: {
-            color: theme.palette.common.black,
+            color: (theme.vars || theme).palette.common.black,
             fontWeight: theme.typography.fontWeightMedium,
             backgroundColor: gray[300],
           },
@@ -134,11 +134,11 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
     styleOverrides: {
       root: ({ theme }) => ({
         fontSize: theme.typography.body1.fontSize,
-        color: theme.palette.grey[600],
+        color: (theme.vars || theme).palette.grey[600],
         padding: theme.spacing(0.5),
         borderRadius: theme.shape.borderRadius,
         '&:hover': {
-          backgroundColor: theme.palette.action.hover,
+          backgroundColor: (theme.vars || theme).palette.action.hover,
         },
         [`&.${pickersDayClasses.selected}`]: {
           backgroundColor: gray[700],
@@ -151,12 +151,12 @@ export const datePickersCustomizations: PickersProComponents<Theme> & PickerComp
           [`&.${pickersDayClasses.selected}`]: { backgroundColor: gray[700] },
         },
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[300],
+          color: (theme.vars || theme).palette.grey[300],
           '&:hover': {
-            backgroundColor: theme.palette.action.hover,
+            backgroundColor: (theme.vars || theme).palette.action.hover,
           },
           [`&.${pickersDayClasses.selected}`]: {
-            color: theme.palette.common.black,
+            color: (theme.vars || theme).palette.common.black,
             fontWeight: theme.typography.fontWeightMedium,
             backgroundColor: gray[300],
           },
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js
index 9736c27eeb6213..ef97812ccd3aa4 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.js
@@ -2,8 +2,3 @@ export { chartsCustomizations } from './charts';
 export { dataGridCustomizations } from './dataGrid';
 export { datePickersCustomizations } from './datePickers';
 export { treeViewCustomizations } from './treeView';
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts
index 9736c27eeb6213..ef97812ccd3aa4 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/index.ts
@@ -2,8 +2,3 @@ export { chartsCustomizations } from './charts';
 export { dataGridCustomizations } from './dataGrid';
 export { datePickersCustomizations } from './datePickers';
 export { treeViewCustomizations } from './treeView';
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js
index 4e5ee5684c46fd..a523f0c7c22db5 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.js
@@ -1,6 +1,6 @@
 import { alpha } from '@mui/material/styles';
 
-import { gray, brand } from '../themePrimitives';
+import { gray, brand } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const treeViewCustomizations = {
@@ -14,7 +14,7 @@ export const treeViewCustomizations = {
           marginLeft: theme.spacing(2),
           padding: theme.spacing(0),
           borderLeft: '1px solid',
-          borderColor: theme.palette.divider,
+          borderColor: (theme.vars || theme).palette.divider,
         },
         '&:focus-visible .focused': {
           outline: `3px solid ${alpha(brand[500], 0.5)}`,
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts
index 347b4170bf5d9f..b41c431e499bc8 100644
--- a/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts
+++ b/docs/data/material/getting-started/templates/dashboard/theme/customizations/treeView.ts
@@ -1,6 +1,6 @@
 import { alpha, Theme } from '@mui/material/styles';
 import type { TreeViewComponents } from '@mui/x-tree-view/themeAugmentation';
-import { gray, brand } from '../themePrimitives';
+import { gray, brand } from '../../../shared-theme/themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const treeViewCustomizations: TreeViewComponents<Theme> = {
@@ -14,7 +14,7 @@ export const treeViewCustomizations: TreeViewComponents<Theme> = {
           marginLeft: theme.spacing(2),
           padding: theme.spacing(0),
           borderLeft: '1px solid',
-          borderColor: theme.palette.divider,
+          borderColor: (theme.vars || theme).palette.divider,
         },
         '&:focus-visible .focused': {
           outline: `3px solid ${alpha(brand[500], 0.5)}`,
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js
deleted file mode 100644
index 48ccb3e42265bf..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  chartsCustomizations,
-  dataGridCustomizations,
-  datePickersCustomizations,
-  treeViewCustomizations,
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getDashboardTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...chartsCustomizations,
-      ...dataGridCustomizations,
-      ...datePickersCustomizations,
-      ...treeViewCustomizations,
-      ...inputsCustomizations,
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx b/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx
deleted file mode 100644
index ab79503b6c2ced..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import type {} from '@mui/x-date-pickers/themeAugmentation';
-import type {} from '@mui/x-charts/themeAugmentation';
-import type {} from '@mui/x-data-grid/themeAugmentation';
-import type {} from '@mui/x-tree-view/themeAugmentation';
-import { getDesignTokens } from './themePrimitives';
-import {
-  chartsCustomizations,
-  dataGridCustomizations,
-  datePickersCustomizations,
-  treeViewCustomizations,
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getDashboardTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...chartsCustomizations,
-      ...dataGridCustomizations,
-      ...datePickersCustomizations,
-      ...treeViewCustomizations,
-      ...inputsCustomizations,
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/dashboard/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.js b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
new file mode 100644
index 00000000000000..b1d55ca4408a14
--- /dev/null
+++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.js
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+import { inputsCustomizations } from './customizations/inputs';
+import { dataDisplayCustomizations } from './customizations/dataDisplay';
+import { feedbackCustomizations } from './customizations/feedback';
+import { navigationCustomizations } from './customizations/navigation';
+import { surfacesCustomizations } from './customizations/surfaces';
+import { colorSchemes, typography, shadows, shape } from './themePrimitives';
+
+function AppTheme({ children, disableCustomTheme, themeComponents }) {
+  const theme = React.useMemo(() => {
+    return disableCustomTheme
+      ? {}
+      : createTheme({
+          // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
+          cssVariables: {
+            colorSchemeSelector: 'data-mui-color-scheme',
+            cssVarPrefix: 'template',
+          },
+          colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
+          typography,
+          shadows,
+          shape,
+          components: {
+            ...inputsCustomizations,
+            ...dataDisplayCustomizations,
+            ...feedbackCustomizations,
+            ...navigationCustomizations,
+            ...surfacesCustomizations,
+            ...themeComponents,
+          },
+        });
+  }, [disableCustomTheme, themeComponents]);
+  if (disableCustomTheme) {
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+  return (
+    <ThemeProvider theme={theme} disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}
+
+AppTheme.propTypes = {
+  children: PropTypes.node,
+  /**
+   * This is for the docs site. You can ignore it or remove it.
+   */
+  disableCustomTheme: PropTypes.bool,
+  themeComponents: PropTypes.object,
+};
+
+export default AppTheme;
diff --git a/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
new file mode 100644
index 00000000000000..1fe35d6faeef48
--- /dev/null
+++ b/docs/data/material/getting-started/templates/shared-theme/AppTheme.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import type { ThemeOptions } from '@mui/material/styles';
+import { inputsCustomizations } from './customizations/inputs';
+import { dataDisplayCustomizations } from './customizations/dataDisplay';
+import { feedbackCustomizations } from './customizations/feedback';
+import { navigationCustomizations } from './customizations/navigation';
+import { surfacesCustomizations } from './customizations/surfaces';
+import { colorSchemes, typography, shadows, shape } from './themePrimitives';
+
+interface AppThemeProps {
+  children: React.ReactNode;
+  /**
+   * This is for the docs site. You can ignore it or remove it.
+   */
+  disableCustomTheme?: boolean;
+  themeComponents?: ThemeOptions['components'];
+}
+
+export default function AppTheme({
+  children,
+  disableCustomTheme,
+  themeComponents,
+}: AppThemeProps) {
+  const theme = React.useMemo(() => {
+    return disableCustomTheme
+      ? {}
+      : createTheme({
+          // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
+          cssVariables: {
+            colorSchemeSelector: 'data-mui-color-scheme',
+            cssVarPrefix: 'template',
+          },
+          colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
+          typography,
+          shadows,
+          shape,
+          components: {
+            ...inputsCustomizations,
+            ...dataDisplayCustomizations,
+            ...feedbackCustomizations,
+            ...navigationCustomizations,
+            ...surfacesCustomizations,
+            ...themeComponents,
+          },
+        });
+  }, [disableCustomTheme, themeComponents]);
+  if (disableCustomTheme) {
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+  return (
+    <ThemeProvider theme={theme} disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js
new file mode 100644
index 00000000000000..612ff2df9819f4
--- /dev/null
+++ b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.js
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import DarkModeIcon from '@mui/icons-material/DarkModeOutlined';
+import LightModeIcon from '@mui/icons-material/LightModeOutlined';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useColorScheme } from '@mui/material/styles';
+
+export default function ColorModeIconDropdown() {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleMode = (targetMode) => () => {
+    setMode(targetMode);
+    handleClose();
+  };
+  if (!mode) {
+    return (
+      <Box
+        data-screenshot="toggle-mode"
+        sx={(theme) => ({
+          verticalAlign: 'bottom',
+          display: 'inline-flex',
+          width: '2.25rem',
+          height: '2.25rem',
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: '1px solid',
+          borderColor: (theme.vars || theme).palette.divider,
+        })}
+      />
+    );
+  }
+  const resolvedMode = systemMode || mode;
+  const icon = {
+    light: <LightModeIcon />,
+    dark: <DarkModeIcon />,
+  }[resolvedMode];
+  return (
+    <React.Fragment>
+      <IconButton
+        data-screenshot="toggle-mode"
+        onClick={handleClick}
+        disableRipple
+        size="small"
+        aria-controls={open ? 'color-scheme-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+      >
+        {icon}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        slotProps={{
+          paper: {
+            variant: 'outlined',
+            sx: {
+              my: '4px',
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
+          System
+        </MenuItem>
+        <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
+          Light
+        </MenuItem>
+        <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
+          Dark
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx
new file mode 100644
index 00000000000000..2663764fb537ad
--- /dev/null
+++ b/docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown.tsx
@@ -0,0 +1,87 @@
+import * as React from 'react';
+import DarkModeIcon from '@mui/icons-material/DarkModeOutlined';
+import LightModeIcon from '@mui/icons-material/LightModeOutlined';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useColorScheme } from '@mui/material/styles';
+
+export default function ColorModeIconDropdown() {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
+    setMode(targetMode);
+    handleClose();
+  };
+  if (!mode) {
+    return (
+      <Box
+        data-screenshot="toggle-mode"
+        sx={(theme) => ({
+          verticalAlign: 'bottom',
+          display: 'inline-flex',
+          width: '2.25rem',
+          height: '2.25rem',
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: '1px solid',
+          borderColor: (theme.vars || theme).palette.divider,
+        })}
+      />
+    );
+  }
+  const resolvedMode = (systemMode || mode) as 'light' | 'dark';
+  const icon = {
+    light: <LightModeIcon />,
+    dark: <DarkModeIcon />,
+  }[resolvedMode];
+  return (
+    <React.Fragment>
+      <IconButton
+        data-screenshot="toggle-mode"
+        onClick={handleClick}
+        disableRipple
+        size="small"
+        aria-controls={open ? 'color-scheme-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+      >
+        {icon}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        slotProps={{
+          paper: {
+            variant: 'outlined',
+            sx: {
+              my: '4px',
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
+          System
+        </MenuItem>
+        <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
+          Light
+        </MenuItem>
+        <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
+          Dark
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.js b/docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.js
new file mode 100644
index 00000000000000..21c96acddfc833
--- /dev/null
+++ b/docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useColorScheme } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+
+export default function ColorModeSelect(props) {
+  const { mode, setMode } = useColorScheme();
+  if (!mode) {
+    return null;
+  }
+  return (
+    <Select
+      value={mode}
+      onChange={(e) => setMode(e.target.value)}
+      SelectDisplayProps={{
+        'data-screenshot': 'toggle-mode',
+      }}
+      {...props}
+    >
+      <MenuItem value="system">System</MenuItem>
+      <MenuItem value="light">Light</MenuItem>
+      <MenuItem value="dark">Dark</MenuItem>
+    </Select>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.tsx b/docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.tsx
new file mode 100644
index 00000000000000..4bb20df72872f4
--- /dev/null
+++ b/docs/data/material/getting-started/templates/shared-theme/ColorModeSelect.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useColorScheme } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectProps } from '@mui/material/Select';
+
+export default function ColorModeSelect(props: SelectProps) {
+  const { mode, setMode } = useColorScheme();
+  if (!mode) {
+    return null;
+  }
+  return (
+    <Select
+      value={mode}
+      onChange={(e) => setMode(e.target.value as 'system' | 'light' | 'dark')}
+      SelectDisplayProps={{
+        // @ts-ignore
+        'data-screenshot': 'toggle-mode',
+      }}
+      {...props}
+    >
+      <MenuItem value="system">System</MenuItem>
+      <MenuItem value="light">Light</MenuItem>
+      <MenuItem value="dark">Dark</MenuItem>
+    </Select>
+  );
+}
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js
index cf04322a9a6056..b75f8bc2f3120c 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.js
@@ -24,7 +24,7 @@ export const dataDisplayCustomizations = {
         [`& .${svgIconClasses.root}`]: {
           width: '1rem',
           height: '1rem',
-          color: theme.palette.text.secondary,
+          color: (theme.vars || theme).palette.text.secondary,
         },
         [`& .${typographyClasses.root}`]: {
           fontWeight: 500,
@@ -33,13 +33,13 @@ export const dataDisplayCustomizations = {
           display: 'flex',
           gap: 8,
           padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: (theme.vars || theme).shape.borderRadius,
           opacity: 0.7,
           '&.Mui-selected': {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
+              color: (theme.vars || theme).palette.text.primary,
             },
             '&:focus-visible': {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx
index c93ccbfbcabf85..b6b2b4613ede81 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/dataDisplay.tsx
@@ -24,7 +24,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
         [`& .${svgIconClasses.root}`]: {
           width: '1rem',
           height: '1rem',
-          color: theme.palette.text.secondary,
+          color: (theme.vars || theme).palette.text.secondary,
         },
         [`& .${typographyClasses.root}`]: {
           fontWeight: 500,
@@ -33,13 +33,13 @@ export const dataDisplayCustomizations: Components<Theme> = {
           display: 'flex',
           gap: 8,
           padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: (theme.vars || theme).shape.borderRadius,
           opacity: 0.7,
           '&.Mui-selected': {
             opacity: 1,
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
             [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
+              color: (theme.vars || theme).palette.text.primary,
             },
             '&:focus-visible': {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js
index d521ecbd350128..d531c3005df8c4 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.js
@@ -8,7 +8,7 @@ export const feedbackCustomizations = {
       root: ({ theme }) => ({
         borderRadius: 10,
         backgroundColor: orange[100],
-        color: theme.palette.text.primary,
+        color: (theme.vars || theme).palette.text.primary,
         border: `1px solid ${alpha(orange[300], 0.5)}`,
         '& .MuiAlert-icon': {
           color: orange[500],
@@ -26,7 +26,7 @@ export const feedbackCustomizations = {
         '& .MuiDialog-paper': {
           borderRadius: '10px',
           border: '1px solid',
-          borderColor: theme.palette.divider,
+          borderColor: (theme.vars || theme).palette.divider,
         },
       }),
     },
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx
index aaf00001b522ca..6d475c90d3369f 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/feedback.tsx
@@ -8,7 +8,7 @@ export const feedbackCustomizations: Components<Theme> = {
       root: ({ theme }) => ({
         borderRadius: 10,
         backgroundColor: orange[100],
-        color: theme.palette.text.primary,
+        color: (theme.vars || theme).palette.text.primary,
         border: `1px solid ${alpha(orange[300], 0.5)}`,
         '& .MuiAlert-icon': {
           color: orange[500],
@@ -26,7 +26,7 @@ export const feedbackCustomizations: Components<Theme> = {
         '& .MuiDialog-paper': {
           borderRadius: '10px',
           border: '1px solid',
-          borderColor: theme.palette.divider,
+          borderColor: (theme.vars || theme).palette.divider,
         },
       }),
     },
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js
index 12cea77491064a..5df212da3008c0 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.js
@@ -31,7 +31,7 @@ export const inputsCustomizations = {
     styleOverrides: {
       root: ({ theme }) => ({
         boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         textTransform: 'none',
         variants: [
           {
@@ -113,7 +113,7 @@ export const inputsCustomizations = {
               variant: 'outlined',
             },
             style: {
-              color: theme.palette.text.primary,
+              color: (theme.vars || theme).palette.text.primary,
               border: '1px solid',
               borderColor: gray[200],
               backgroundColor: alpha(gray[50], 0.3),
@@ -224,11 +224,11 @@ export const inputsCustomizations = {
     styleOverrides: {
       root: ({ theme }) => ({
         boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         textTransform: 'none',
         fontWeight: theme.typography.fontWeightMedium,
         letterSpacing: 0,
-        color: theme.palette.text.primary,
+        color: (theme.vars || theme).palette.text.primary,
         border: '1px solid ',
         borderColor: gray[200],
         backgroundColor: alpha(gray[50], 0.3),
@@ -382,10 +382,10 @@ export const inputsCustomizations = {
       },
       root: ({ theme }) => ({
         padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
+        color: (theme.vars || theme).palette.text.primary,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
+        backgroundColor: (theme.vars || theme).palette.background.default,
         transition: 'border 120ms ease-in',
         '&:hover': {
           borderColor: gray[400],
@@ -426,9 +426,9 @@ export const inputsCustomizations = {
   MuiInputAdornment: {
     styleOverrides: {
       root: ({ theme }) => ({
-        color: theme.palette.grey[500],
+        color: (theme.vars || theme).palette.grey[500],
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
+          color: (theme.vars || theme).palette.grey[400],
         }),
       }),
     },
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx
index 4be4c18628e16e..b384563b700463 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/inputs.tsx
@@ -31,7 +31,7 @@ export const inputsCustomizations: Components<Theme> = {
     styleOverrides: {
       root: ({ theme }) => ({
         boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         textTransform: 'none',
         variants: [
           {
@@ -113,7 +113,7 @@ export const inputsCustomizations: Components<Theme> = {
               variant: 'outlined',
             },
             style: {
-              color: theme.palette.text.primary,
+              color: (theme.vars || theme).palette.text.primary,
               border: '1px solid',
               borderColor: gray[200],
               backgroundColor: alpha(gray[50], 0.3),
@@ -225,11 +225,11 @@ export const inputsCustomizations: Components<Theme> = {
     styleOverrides: {
       root: ({ theme }) => ({
         boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         textTransform: 'none',
         fontWeight: theme.typography.fontWeightMedium,
         letterSpacing: 0,
-        color: theme.palette.text.primary,
+        color: (theme.vars || theme).palette.text.primary,
         border: '1px solid ',
         borderColor: gray[200],
         backgroundColor: alpha(gray[50], 0.3),
@@ -383,10 +383,10 @@ export const inputsCustomizations: Components<Theme> = {
       },
       root: ({ theme }) => ({
         padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
+        color: (theme.vars || theme).palette.text.primary,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
+        backgroundColor: (theme.vars || theme).palette.background.default,
         transition: 'border 120ms ease-in',
         '&:hover': {
           borderColor: gray[400],
@@ -427,9 +427,9 @@ export const inputsCustomizations: Components<Theme> = {
   MuiInputAdornment: {
     styleOverrides: {
       root: ({ theme }) => ({
-        color: theme.palette.grey[500],
+        color: (theme.vars || theme).palette.grey[500],
         ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
+          color: (theme.vars || theme).palette.grey[400],
         }),
       }),
     },
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js
index ded180025db59e..6d8683dad4ebe0 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.js
@@ -14,7 +14,7 @@ export const navigationCustomizations = {
   MuiMenuItem: {
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         padding: '6px 8px',
         [`&.${menuItemClasses.focusVisible}`]: {
           backgroundColor: 'transparent',
@@ -37,8 +37,8 @@ export const navigationCustomizations = {
       },
       paper: ({ theme }) => ({
         marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
         backgroundImage: 'none',
         background: 'hsl(0, 0%, 100%)',
         boxShadow:
@@ -64,14 +64,14 @@ export const navigationCustomizations = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         border: '1px solid',
         borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
+        backgroundColor: (theme.vars || theme).palette.background.paper,
         boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
         '&:hover': {
           borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: 'none',
         },
         [`&.${selectClasses.focused}`]: {
@@ -82,13 +82,13 @@ export const navigationCustomizations = {
           display: 'none',
         },
         ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: (theme.vars || theme).shape.borderRadius,
           borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
           '&:hover': {
             borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
+            backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
           [`&.${selectClasses.focused}`]: {
@@ -119,7 +119,7 @@ export const navigationCustomizations = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        color: theme.palette.text.primary,
+        color: (theme.vars || theme).palette.text.primary,
         fontWeight: 500,
         position: 'relative',
         textDecoration: 'none',
@@ -131,7 +131,7 @@ export const navigationCustomizations = {
           height: '1px',
           bottom: 0,
           left: 0,
-          backgroundColor: theme.palette.text.secondary,
+          backgroundColor: (theme.vars || theme).palette.text.secondary,
           opacity: 0.3,
           transition: 'width 0.3s ease, opacity 0.3s ease',
         },
@@ -149,7 +149,7 @@ export const navigationCustomizations = {
   MuiDrawer: {
     styleOverrides: {
       paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: (theme.vars || theme).palette.background.default,
       }),
     },
   },
@@ -158,12 +158,12 @@ export const navigationCustomizations = {
       root: ({ theme }) => ({
         '&.Mui-selected': {
           color: 'white',
-          backgroundColor: theme.palette.grey[900],
+          backgroundColor: (theme.vars || theme).palette.grey[900],
         },
         ...theme.applyStyles('dark', {
           '&.Mui-selected': {
             color: 'black',
-            backgroundColor: theme.palette.grey[50],
+            backgroundColor: (theme.vars || theme).palette.grey[50],
           },
         }),
       }),
@@ -173,9 +173,9 @@ export const navigationCustomizations = {
     styleOverrides: {
       root: { minHeight: 'fit-content' },
       indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
+        backgroundColor: (theme.vars || theme).palette.grey[800],
         ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
+          backgroundColor: (theme.vars || theme).palette.grey[200],
         }),
       }),
     },
@@ -188,12 +188,12 @@ export const navigationCustomizations = {
         textTransform: 'none',
         minWidth: 'fit-content',
         minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
+        color: (theme.vars || theme).palette.text.secondary,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         border: '1px solid',
         borderColor: 'transparent',
         ':hover': {
-          color: theme.palette.text.primary,
+          color: (theme.vars || theme).palette.text.primary,
           backgroundColor: gray[100],
           borderColor: gray[200],
         },
@@ -202,7 +202,7 @@ export const navigationCustomizations = {
         },
         ...theme.applyStyles('dark', {
           ':hover': {
-            color: theme.palette.text.primary,
+            color: (theme.vars || theme).palette.text.primary,
             backgroundColor: gray[800],
             borderColor: gray[700],
           },
@@ -217,7 +217,7 @@ export const navigationCustomizations = {
     styleOverrides: {
       line: ({ theme }) => ({
         borderTop: '1px solid',
-        borderColor: theme.palette.divider,
+        borderColor: (theme.vars || theme).palette.divider,
         flex: 1,
         borderRadius: '99px',
       }),
@@ -236,21 +236,21 @@ export const navigationCustomizations = {
         },
         '&.Mui-active': {
           border: 'none',
-          color: theme.palette.primary.main,
+          color: (theme.vars || theme).palette.primary.main,
         },
         '&.Mui-completed': {
           border: 'none',
-          color: theme.palette.success.main,
+          color: (theme.vars || theme).palette.success.main,
         },
         ...theme.applyStyles('dark', {
           border: `1px solid ${gray[700]}`,
           '&.Mui-active': {
             border: 'none',
-            color: theme.palette.primary.light,
+            color: (theme.vars || theme).palette.primary.light,
           },
           '&.Mui-completed': {
             border: 'none',
-            color: theme.palette.success.light,
+            color: (theme.vars || theme).palette.success.light,
           },
         }),
         variants: [
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx
index f6b92e573f6316..3cb9713915d5ae 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/navigation.tsx
@@ -14,7 +14,7 @@ export const navigationCustomizations: Components<Theme> = {
   MuiMenuItem: {
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         padding: '6px 8px',
         [`&.${menuItemClasses.focusVisible}`]: {
           backgroundColor: 'transparent',
@@ -37,8 +37,8 @@ export const navigationCustomizations: Components<Theme> = {
       },
       paper: ({ theme }) => ({
         marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
         backgroundImage: 'none',
         background: 'hsl(0, 0%, 100%)',
         boxShadow:
@@ -64,14 +64,14 @@ export const navigationCustomizations: Components<Theme> = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         border: '1px solid',
         borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
+        backgroundColor: (theme.vars || theme).palette.background.paper,
         boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
         '&:hover': {
           borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: 'none',
         },
         [`&.${selectClasses.focused}`]: {
@@ -83,13 +83,13 @@ export const navigationCustomizations: Components<Theme> = {
         },
 
         ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
+          borderRadius: (theme.vars || theme).shape.borderRadius,
           borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
+          backgroundColor: (theme.vars || theme).palette.background.paper,
           boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
           '&:hover': {
             borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
+            backgroundColor: (theme.vars || theme).palette.background.paper,
             boxShadow: 'none',
           },
           [`&.${selectClasses.focused}`]: {
@@ -120,7 +120,7 @@ export const navigationCustomizations: Components<Theme> = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
-        color: theme.palette.text.primary,
+        color: (theme.vars || theme).palette.text.primary,
         fontWeight: 500,
         position: 'relative',
         textDecoration: 'none',
@@ -132,7 +132,7 @@ export const navigationCustomizations: Components<Theme> = {
           height: '1px',
           bottom: 0,
           left: 0,
-          backgroundColor: theme.palette.text.secondary,
+          backgroundColor: (theme.vars || theme).palette.text.secondary,
           opacity: 0.3,
           transition: 'width 0.3s ease, opacity 0.3s ease',
         },
@@ -150,7 +150,7 @@ export const navigationCustomizations: Components<Theme> = {
   MuiDrawer: {
     styleOverrides: {
       paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: (theme.vars || theme).palette.background.default,
       }),
     },
   },
@@ -159,12 +159,12 @@ export const navigationCustomizations: Components<Theme> = {
       root: ({ theme }) => ({
         '&.Mui-selected': {
           color: 'white',
-          backgroundColor: theme.palette.grey[900],
+          backgroundColor: (theme.vars || theme).palette.grey[900],
         },
         ...theme.applyStyles('dark', {
           '&.Mui-selected': {
             color: 'black',
-            backgroundColor: theme.palette.grey[50],
+            backgroundColor: (theme.vars || theme).palette.grey[50],
           },
         }),
       }),
@@ -174,9 +174,9 @@ export const navigationCustomizations: Components<Theme> = {
     styleOverrides: {
       root: { minHeight: 'fit-content' },
       indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
+        backgroundColor: (theme.vars || theme).palette.grey[800],
         ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
+          backgroundColor: (theme.vars || theme).palette.grey[200],
         }),
       }),
     },
@@ -189,12 +189,12 @@ export const navigationCustomizations: Components<Theme> = {
         textTransform: 'none',
         minWidth: 'fit-content',
         minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
+        color: (theme.vars || theme).palette.text.secondary,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         border: '1px solid',
         borderColor: 'transparent',
         ':hover': {
-          color: theme.palette.text.primary,
+          color: (theme.vars || theme).palette.text.primary,
           backgroundColor: gray[100],
           borderColor: gray[200],
         },
@@ -203,7 +203,7 @@ export const navigationCustomizations: Components<Theme> = {
         },
         ...theme.applyStyles('dark', {
           ':hover': {
-            color: theme.palette.text.primary,
+            color: (theme.vars || theme).palette.text.primary,
             backgroundColor: gray[800],
             borderColor: gray[700],
           },
@@ -218,7 +218,7 @@ export const navigationCustomizations: Components<Theme> = {
     styleOverrides: {
       line: ({ theme }) => ({
         borderTop: '1px solid',
-        borderColor: theme.palette.divider,
+        borderColor: (theme.vars || theme).palette.divider,
         flex: 1,
         borderRadius: '99px',
       }),
@@ -237,21 +237,21 @@ export const navigationCustomizations: Components<Theme> = {
         },
         '&.Mui-active': {
           border: 'none',
-          color: theme.palette.primary.main,
+          color: (theme.vars || theme).palette.primary.main,
         },
         '&.Mui-completed': {
           border: 'none',
-          color: theme.palette.success.main,
+          color: (theme.vars || theme).palette.success.main,
         },
         ...theme.applyStyles('dark', {
           border: `1px solid ${gray[700]}`,
           '&.Mui-active': {
             border: 'none',
-            color: theme.palette.primary.light,
+            color: (theme.vars || theme).palette.primary.light,
           },
           '&.Mui-completed': {
             border: 'none',
-            color: theme.palette.success.light,
+            color: (theme.vars || theme).palette.success.light,
           },
         }),
         variants: [
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js
index ff4a53884964ae..0cc5229f48c89d 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.js
@@ -12,9 +12,9 @@ export const surfacesCustomizations = {
       root: ({ theme }) => ({
         padding: 4,
         overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: (theme.vars || theme).palette.background.default,
         border: '1px solid',
-        borderColor: theme.palette.divider,
+        borderColor: (theme.vars || theme).palette.divider,
         ':before': {
           backgroundColor: 'transparent',
         },
@@ -22,12 +22,12 @@ export const surfacesCustomizations = {
           borderBottom: 'none',
         },
         '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
+          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
         },
         '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
+          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
         },
       }),
     },
@@ -63,8 +63,8 @@ export const surfacesCustomizations = {
           gap: 16,
           transition: 'all 100ms ease',
           backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
             backgroundColor: gray[800],
@@ -75,7 +75,7 @@ export const surfacesCustomizations = {
                 variant: 'outlined',
               },
               style: {
-                border: `1px solid ${theme.palette.divider}`,
+                border: `1px solid ${(theme.vars || theme).palette.divider}`,
                 boxShadow: 'none',
                 background: 'hsl(0, 0%, 100%)',
                 ...theme.applyStyles('dark', {
diff --git a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts
index 5bcdfc5c055b0f..f47a6d8071cb97 100644
--- a/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts
+++ b/docs/data/material/getting-started/templates/shared-theme/customizations/surfaces.ts
@@ -12,9 +12,9 @@ export const surfacesCustomizations: Components<Theme> = {
       root: ({ theme }) => ({
         padding: 4,
         overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
+        backgroundColor: (theme.vars || theme).palette.background.default,
         border: '1px solid',
-        borderColor: theme.palette.divider,
+        borderColor: (theme.vars || theme).palette.divider,
         ':before': {
           backgroundColor: 'transparent',
         },
@@ -22,12 +22,12 @@ export const surfacesCustomizations: Components<Theme> = {
           borderBottom: 'none',
         },
         '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
+          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
         },
         '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
+          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
         },
       }),
     },
@@ -63,8 +63,8 @@ export const surfacesCustomizations: Components<Theme> = {
           gap: 16,
           transition: 'all 100ms ease',
           backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
             backgroundColor: gray[800],
@@ -75,7 +75,7 @@ export const surfacesCustomizations: Components<Theme> = {
                 variant: 'outlined',
               },
               style: {
-                border: `1px solid ${theme.palette.divider}`,
+                border: `1px solid ${(theme.vars || theme).palette.divider}`,
                 boxShadow: 'none',
                 background: 'hsl(0, 0%, 100%)',
                 ...theme.applyStyles('dark', {
diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js
index 625400640eef43..3da36a558e2624 100644
--- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js
+++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.js
@@ -214,3 +214,165 @@ export const getDesignTokens = (mode) => {
     shadows: customShadows,
   };
 };
+
+export const colorSchemes = {
+  light: {
+    palette: {
+      primary: {
+        light: brand[200],
+        main: brand[400],
+        dark: brand[700],
+        contrastText: brand[50],
+      },
+      info: {
+        light: brand[100],
+        main: brand[300],
+        dark: brand[600],
+        contrastText: gray[50],
+      },
+      warning: {
+        light: orange[300],
+        main: orange[400],
+        dark: orange[800],
+      },
+      error: {
+        light: red[300],
+        main: red[400],
+        dark: red[800],
+      },
+      success: {
+        light: green[300],
+        main: green[400],
+        dark: green[800],
+      },
+      grey: {
+        ...gray,
+      },
+      divider: alpha(gray[300], 0.4),
+      background: {
+        default: 'hsl(0, 0%, 99%)',
+        paper: 'hsl(220, 35%, 97%)',
+      },
+      text: {
+        primary: gray[800],
+        secondary: gray[600],
+        warning: orange[400],
+      },
+      action: {
+        hover: alpha(gray[200], 0.2),
+        selected: `${alpha(gray[200], 0.3)}`,
+      },
+      baseShadow:
+        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+    },
+  },
+  dark: {
+    palette: {
+      primary: {
+        contrastText: brand[50],
+        light: brand[300],
+        main: brand[400],
+        dark: brand[700],
+      },
+      info: {
+        contrastText: brand[300],
+        light: brand[500],
+        main: brand[700],
+        dark: brand[900],
+      },
+      warning: {
+        light: orange[400],
+        main: orange[500],
+        dark: orange[700],
+      },
+      error: {
+        light: red[400],
+        main: red[500],
+        dark: red[700],
+      },
+      success: {
+        light: green[400],
+        main: green[500],
+        dark: green[700],
+      },
+      grey: {
+        ...gray,
+      },
+      divider: alpha(gray[700], 0.6),
+      background: {
+        default: gray[900],
+        paper: 'hsl(220, 30%, 7%)',
+      },
+      text: {
+        primary: 'hsl(0, 0%, 100%)',
+        secondary: gray[400],
+      },
+      action: {
+        hover: alpha(gray[600], 0.2),
+        selected: alpha(gray[600], 0.3),
+      },
+      baseShadow:
+        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+    },
+  },
+};
+
+export const typography = {
+  fontFamily: ['"Inter", "sans-serif"'].join(','),
+  h1: {
+    fontSize: defaultTheme.typography.pxToRem(48),
+    fontWeight: 600,
+    lineHeight: 1.2,
+    letterSpacing: -0.5,
+  },
+  h2: {
+    fontSize: defaultTheme.typography.pxToRem(36),
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  h3: {
+    fontSize: defaultTheme.typography.pxToRem(30),
+    lineHeight: 1.2,
+  },
+  h4: {
+    fontSize: defaultTheme.typography.pxToRem(24),
+    fontWeight: 600,
+    lineHeight: 1.5,
+  },
+  h5: {
+    fontSize: defaultTheme.typography.pxToRem(20),
+    fontWeight: 600,
+  },
+  h6: {
+    fontSize: defaultTheme.typography.pxToRem(18),
+    fontWeight: 600,
+  },
+  subtitle1: {
+    fontSize: defaultTheme.typography.pxToRem(18),
+  },
+  subtitle2: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+    fontWeight: 500,
+  },
+  body1: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+  },
+  body2: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+    fontWeight: 400,
+  },
+  caption: {
+    fontSize: defaultTheme.typography.pxToRem(12),
+    fontWeight: 400,
+  },
+};
+
+export const shape = {
+  borderRadius: 8,
+};
+
+const defaultShadows = [
+  'var(--mui-palette-baseShadow)',
+  ...defaultTheme.shadows.slice(1),
+];
+export const shadows = defaultShadows;
diff --git a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
index 41b517b5294fad..b9b8a04fb0031e 100644
--- a/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
+++ b/docs/data/material/getting-started/templates/shared-theme/themePrimitives.ts
@@ -20,6 +20,10 @@ declare module '@mui/material/styles/createPalette' {
   }
 
   interface PaletteColor extends ColorRange {}
+
+  interface Palette {
+    baseShadow: string;
+  }
 }
 
 const defaultTheme = createTheme();
@@ -233,3 +237,163 @@ export const getDesignTokens = (mode: PaletteMode) => {
     shadows: customShadows,
   };
 };
+
+export const colorSchemes = {
+  light: {
+    palette: {
+      primary: {
+        light: brand[200],
+        main: brand[400],
+        dark: brand[700],
+        contrastText: brand[50],
+      },
+      info: {
+        light: brand[100],
+        main: brand[300],
+        dark: brand[600],
+        contrastText: gray[50],
+      },
+      warning: {
+        light: orange[300],
+        main: orange[400],
+        dark: orange[800],
+      },
+      error: {
+        light: red[300],
+        main: red[400],
+        dark: red[800],
+      },
+      success: {
+        light: green[300],
+        main: green[400],
+        dark: green[800],
+      },
+      grey: {
+        ...gray,
+      },
+      divider: alpha(gray[300], 0.4),
+      background: {
+        default: 'hsl(0, 0%, 99%)',
+        paper: 'hsl(220, 35%, 97%)',
+      },
+      text: {
+        primary: gray[800],
+        secondary: gray[600],
+        warning: orange[400],
+      },
+      action: {
+        hover: alpha(gray[200], 0.2),
+        selected: `${alpha(gray[200], 0.3)}`,
+      },
+      baseShadow:
+        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+    },
+  },
+  dark: {
+    palette: {
+      primary: {
+        contrastText: brand[50],
+        light: brand[300],
+        main: brand[400],
+        dark: brand[700],
+      },
+      info: {
+        contrastText: brand[300],
+        light: brand[500],
+        main: brand[700],
+        dark: brand[900],
+      },
+      warning: {
+        light: orange[400],
+        main: orange[500],
+        dark: orange[700],
+      },
+      error: {
+        light: red[400],
+        main: red[500],
+        dark: red[700],
+      },
+      success: {
+        light: green[400],
+        main: green[500],
+        dark: green[700],
+      },
+      grey: {
+        ...gray,
+      },
+      divider: alpha(gray[700], 0.6),
+      background: {
+        default: gray[900],
+        paper: 'hsl(220, 30%, 7%)',
+      },
+      text: {
+        primary: 'hsl(0, 0%, 100%)',
+        secondary: gray[400],
+      },
+      action: {
+        hover: alpha(gray[600], 0.2),
+        selected: alpha(gray[600], 0.3),
+      },
+      baseShadow:
+        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+    },
+  },
+};
+
+export const typography = {
+  fontFamily: ['"Inter", "sans-serif"'].join(','),
+  h1: {
+    fontSize: defaultTheme.typography.pxToRem(48),
+    fontWeight: 600,
+    lineHeight: 1.2,
+    letterSpacing: -0.5,
+  },
+  h2: {
+    fontSize: defaultTheme.typography.pxToRem(36),
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  h3: {
+    fontSize: defaultTheme.typography.pxToRem(30),
+    lineHeight: 1.2,
+  },
+  h4: {
+    fontSize: defaultTheme.typography.pxToRem(24),
+    fontWeight: 600,
+    lineHeight: 1.5,
+  },
+  h5: {
+    fontSize: defaultTheme.typography.pxToRem(20),
+    fontWeight: 600,
+  },
+  h6: {
+    fontSize: defaultTheme.typography.pxToRem(18),
+    fontWeight: 600,
+  },
+  subtitle1: {
+    fontSize: defaultTheme.typography.pxToRem(18),
+  },
+  subtitle2: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+    fontWeight: 500,
+  },
+  body1: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+  },
+  body2: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+    fontWeight: 400,
+  },
+  caption: {
+    fontSize: defaultTheme.typography.pxToRem(12),
+    fontWeight: 400,
+  },
+};
+
+export const shape = {
+  borderRadius: 8,
+};
+
+// @ts-ignore
+const defaultShadows: Shadows = ['var(--mui-palette-baseShadow)', ...defaultTheme.shadows.slice(1)];
+export const shadows = defaultShadows;
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.js b/docs/data/material/getting-started/templates/sign-in/SignIn.js
index c7963f131aec18..60a4646c64e3b0 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -12,11 +12,11 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
-import { ThemeProvider, createTheme, styled } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import ForgotPassword from './ForgotPassword';
-import getSignInTheme from './theme/getSignInTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import TemplateFrame from './TemplateFrame';
+import AppTheme from '../shared-theme/AppTheme';
+import ColorModeSelect from '../shared-theme/ColorModeSelect';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -38,53 +38,31 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  height: '100%',
   padding: 20,
-  backgroundImage:
-    'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-  backgroundRepeat: 'no-repeat',
-  ...theme.applyStyles('dark', {
+  marginTop: '10vh',
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    zIndex: -1,
+    inset: 0,
     backgroundImage:
-      'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
-  }),
+      'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+    backgroundRepeat: 'no-repeat',
+    ...theme.applyStyles('dark', {
+      backgroundImage:
+        'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+    }),
+  },
 }));
 
-export default function SignIn() {
-  const [mode, setMode] = React.useState('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const defaultTheme = createTheme({ palette: { mode } });
-  const SignInTheme = createTheme(getSignInTheme(mode));
+export default function SignIn(props) {
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
   const [open, setOpen] = React.useState(false);
 
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode');
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
-
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -130,130 +108,124 @@ export default function SignIn() {
   };
 
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <SignInContainer direction="column" justifyContent="space-between">
-          <Card variant="outlined">
-            <SitemarkIcon />
-            <Typography
-              component="h1"
-              variant="h4"
-              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-            >
-              Sign in
-            </Typography>
-            <Box
-              component="form"
-              onSubmit={handleSubmit}
-              noValidate
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                gap: 2,
-              }}
-            >
-              <FormControl>
-                <FormLabel htmlFor="email">Email</FormLabel>
-                <TextField
-                  error={emailError}
-                  helperText={emailErrorMessage}
-                  id="email"
-                  type="email"
-                  name="email"
-                  placeholder="your@email.com"
-                  autoComplete="email"
-                  autoFocus
-                  required
-                  fullWidth
-                  variant="outlined"
-                  color={emailError ? 'error' : 'primary'}
-                  sx={{ ariaLabel: 'email' }}
-                />
-              </FormControl>
-              <FormControl>
-                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <FormLabel htmlFor="password">Password</FormLabel>
-                  <Link
-                    component="button"
-                    onClick={handleClickOpen}
-                    variant="body2"
-                    sx={{ alignSelf: 'baseline' }}
-                  >
-                    Forgot your password?
-                  </Link>
-                </Box>
-                <TextField
-                  error={passwordError}
-                  helperText={passwordErrorMessage}
-                  name="password"
-                  placeholder="••••••"
-                  type="password"
-                  id="password"
-                  autoComplete="current-password"
-                  autoFocus
-                  required
-                  fullWidth
-                  variant="outlined"
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControlLabel
-                control={<Checkbox value="remember" color="primary" />}
-                label="Remember me"
-              />
-              <ForgotPassword open={open} handleClose={handleClose} />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                onClick={validateInputs}
-              >
-                Sign in
-              </Button>
-              <Typography sx={{ textAlign: 'center' }}>
-                Don&apos;t have an account?{' '}
-                <span>
-                  <Link
-                    href="/material-ui/getting-started/templates/sign-in/"
-                    variant="body2"
-                    sx={{ alignSelf: 'center' }}
-                  >
-                    Sign up
-                  </Link>
-                </span>
-              </Typography>
-            </Box>
-            <Divider>or</Divider>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Button
-                type="submit"
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <SignInContainer direction="column" justifyContent="space-between">
+        <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
+        <Card variant="outlined">
+          <SitemarkIcon />
+          <Typography
+            component="h1"
+            variant="h4"
+            sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+          >
+            Sign in
+          </Typography>
+          <Box
+            component="form"
+            onSubmit={handleSubmit}
+            noValidate
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              gap: 2,
+            }}
+          >
+            <FormControl>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <TextField
+                error={emailError}
+                helperText={emailErrorMessage}
+                id="email"
+                type="email"
+                name="email"
+                placeholder="your@email.com"
+                autoComplete="email"
+                autoFocus
+                required
                 fullWidth
                 variant="outlined"
-                onClick={() => alert('Sign in with Google')}
-                startIcon={<GoogleIcon />}
-              >
-                Sign in with Google
-              </Button>
-              <Button
-                type="submit"
+                color={emailError ? 'error' : 'primary'}
+                sx={{ ariaLabel: 'email' }}
+              />
+            </FormControl>
+            <FormControl>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <Link
+                  component="button"
+                  onClick={handleClickOpen}
+                  variant="body2"
+                  sx={{ alignSelf: 'baseline' }}
+                >
+                  Forgot your password?
+                </Link>
+              </Box>
+              <TextField
+                error={passwordError}
+                helperText={passwordErrorMessage}
+                name="password"
+                placeholder="••••••"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+                autoFocus
+                required
                 fullWidth
                 variant="outlined"
-                onClick={() => alert('Sign in with Facebook')}
-                startIcon={<FacebookIcon />}
-              >
-                Sign in with Facebook
-              </Button>
-            </Box>
-          </Card>
-        </SignInContainer>
-      </ThemeProvider>
-    </TemplateFrame>
+                color={passwordError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <ForgotPassword open={open} handleClose={handleClose} />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              onClick={validateInputs}
+            >
+              Sign in
+            </Button>
+            <Typography sx={{ textAlign: 'center' }}>
+              Don&apos;t have an account?{' '}
+              <span>
+                <Link
+                  href="/material-ui/getting-started/templates/sign-in/"
+                  variant="body2"
+                  sx={{ alignSelf: 'center' }}
+                >
+                  Sign up
+                </Link>
+              </span>
+            </Typography>
+          </Box>
+          <Divider>or</Divider>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Button
+              type="submit"
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign in with Google')}
+              startIcon={<GoogleIcon />}
+            >
+              Sign in with Google
+            </Button>
+            <Button
+              type="submit"
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign in with Facebook')}
+              startIcon={<FacebookIcon />}
+            >
+              Sign in with Facebook
+            </Button>
+          </Box>
+        </Card>
+      </SignInContainer>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index dda0da4471c689..eb9933a865b0db 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -12,16 +12,11 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MuiCard from '@mui/material/Card';
-import {
-  ThemeProvider,
-  createTheme,
-  styled,
-  PaletteMode,
-} from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import ForgotPassword from './ForgotPassword';
-import getSignInTheme from './theme/getSignInTheme';
 import { GoogleIcon, FacebookIcon, SitemarkIcon } from './CustomIcons';
-import TemplateFrame from './TemplateFrame';
+import AppTheme from '../shared-theme/AppTheme';
+import ColorModeSelect from '../shared-theme/ColorModeSelect';
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: 'flex',
@@ -43,53 +38,31 @@ const Card = styled(MuiCard)(({ theme }) => ({
 }));
 
 const SignInContainer = styled(Stack)(({ theme }) => ({
-  height: '100%',
   padding: 20,
-  backgroundImage:
-    'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
-  backgroundRepeat: 'no-repeat',
-  ...theme.applyStyles('dark', {
+  marginTop: '10vh',
+  '&::before': {
+    content: '""',
+    display: 'block',
+    position: 'absolute',
+    zIndex: -1,
+    inset: 0,
     backgroundImage:
-      'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
-  }),
+      'radial-gradient(ellipse at 50% 50%, hsl(210, 100%, 97%), hsl(0, 0%, 100%))',
+    backgroundRepeat: 'no-repeat',
+    ...theme.applyStyles('dark', {
+      backgroundImage:
+        'radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))',
+    }),
+  },
 }));
 
-export default function SignIn() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const [showCustomTheme, setShowCustomTheme] = React.useState(true);
-  const defaultTheme = createTheme({ palette: { mode } });
-  const SignInTheme = createTheme(getSignInTheme(mode));
+export default function SignIn(props: { disableCustomTheme?: boolean }) {
   const [emailError, setEmailError] = React.useState(false);
   const [emailErrorMessage, setEmailErrorMessage] = React.useState('');
   const [passwordError, setPasswordError] = React.useState(false);
   const [passwordErrorMessage, setPasswordErrorMessage] = React.useState('');
   const [open, setOpen] = React.useState(false);
 
-  // This code only runs on the client side, to determine the system color preference
-  React.useEffect(() => {
-    // Check if there is a preferred mode in localStorage
-    const savedMode = localStorage.getItem('themeMode') as PaletteMode | null;
-    if (savedMode) {
-      setMode(savedMode);
-    } else {
-      // If no preference is found, it uses system preference
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches;
-      setMode(systemPrefersDark ? 'dark' : 'light');
-    }
-  }, []);
-
-  const toggleColorMode = () => {
-    const newMode = mode === 'dark' ? 'light' : 'dark';
-    setMode(newMode);
-    localStorage.setItem('themeMode', newMode); // Save the selected mode to localStorage
-  };
-
-  const toggleCustomTheme = () => {
-    setShowCustomTheme((prev) => !prev);
-  };
-
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -135,130 +108,124 @@ export default function SignIn() {
   };
 
   return (
-    <TemplateFrame
-      toggleCustomTheme={toggleCustomTheme}
-      showCustomTheme={showCustomTheme}
-      mode={mode}
-      toggleColorMode={toggleColorMode}
-    >
-      <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
-        <CssBaseline enableColorScheme />
-        <SignInContainer direction="column" justifyContent="space-between">
-          <Card variant="outlined">
-            <SitemarkIcon />
-            <Typography
-              component="h1"
-              variant="h4"
-              sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
-            >
-              Sign in
-            </Typography>
-            <Box
-              component="form"
-              onSubmit={handleSubmit}
-              noValidate
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-                gap: 2,
-              }}
-            >
-              <FormControl>
-                <FormLabel htmlFor="email">Email</FormLabel>
-                <TextField
-                  error={emailError}
-                  helperText={emailErrorMessage}
-                  id="email"
-                  type="email"
-                  name="email"
-                  placeholder="your@email.com"
-                  autoComplete="email"
-                  autoFocus
-                  required
-                  fullWidth
-                  variant="outlined"
-                  color={emailError ? 'error' : 'primary'}
-                  sx={{ ariaLabel: 'email' }}
-                />
-              </FormControl>
-              <FormControl>
-                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-                  <FormLabel htmlFor="password">Password</FormLabel>
-                  <Link
-                    component="button"
-                    onClick={handleClickOpen}
-                    variant="body2"
-                    sx={{ alignSelf: 'baseline' }}
-                  >
-                    Forgot your password?
-                  </Link>
-                </Box>
-                <TextField
-                  error={passwordError}
-                  helperText={passwordErrorMessage}
-                  name="password"
-                  placeholder="••••••"
-                  type="password"
-                  id="password"
-                  autoComplete="current-password"
-                  autoFocus
-                  required
-                  fullWidth
-                  variant="outlined"
-                  color={passwordError ? 'error' : 'primary'}
-                />
-              </FormControl>
-              <FormControlLabel
-                control={<Checkbox value="remember" color="primary" />}
-                label="Remember me"
-              />
-              <ForgotPassword open={open} handleClose={handleClose} />
-              <Button
-                type="submit"
-                fullWidth
-                variant="contained"
-                onClick={validateInputs}
-              >
-                Sign in
-              </Button>
-              <Typography sx={{ textAlign: 'center' }}>
-                Don&apos;t have an account?{' '}
-                <span>
-                  <Link
-                    href="/material-ui/getting-started/templates/sign-in/"
-                    variant="body2"
-                    sx={{ alignSelf: 'center' }}
-                  >
-                    Sign up
-                  </Link>
-                </span>
-              </Typography>
-            </Box>
-            <Divider>or</Divider>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-              <Button
-                type="submit"
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+      <SignInContainer direction="column" justifyContent="space-between">
+        <ColorModeSelect sx={{ position: 'fixed', top: '1rem', right: '1rem' }} />
+        <Card variant="outlined">
+          <SitemarkIcon />
+          <Typography
+            component="h1"
+            variant="h4"
+            sx={{ width: '100%', fontSize: 'clamp(2rem, 10vw, 2.15rem)' }}
+          >
+            Sign in
+          </Typography>
+          <Box
+            component="form"
+            onSubmit={handleSubmit}
+            noValidate
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              gap: 2,
+            }}
+          >
+            <FormControl>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <TextField
+                error={emailError}
+                helperText={emailErrorMessage}
+                id="email"
+                type="email"
+                name="email"
+                placeholder="your@email.com"
+                autoComplete="email"
+                autoFocus
+                required
                 fullWidth
                 variant="outlined"
-                onClick={() => alert('Sign in with Google')}
-                startIcon={<GoogleIcon />}
-              >
-                Sign in with Google
-              </Button>
-              <Button
-                type="submit"
+                color={emailError ? 'error' : 'primary'}
+                sx={{ ariaLabel: 'email' }}
+              />
+            </FormControl>
+            <FormControl>
+              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                <FormLabel htmlFor="password">Password</FormLabel>
+                <Link
+                  component="button"
+                  onClick={handleClickOpen}
+                  variant="body2"
+                  sx={{ alignSelf: 'baseline' }}
+                >
+                  Forgot your password?
+                </Link>
+              </Box>
+              <TextField
+                error={passwordError}
+                helperText={passwordErrorMessage}
+                name="password"
+                placeholder="••••••"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+                autoFocus
+                required
                 fullWidth
                 variant="outlined"
-                onClick={() => alert('Sign in with Facebook')}
-                startIcon={<FacebookIcon />}
-              >
-                Sign in with Facebook
-              </Button>
-            </Box>
-          </Card>
-        </SignInContainer>
-      </ThemeProvider>
-    </TemplateFrame>
+                color={passwordError ? 'error' : 'primary'}
+              />
+            </FormControl>
+            <FormControlLabel
+              control={<Checkbox value="remember" color="primary" />}
+              label="Remember me"
+            />
+            <ForgotPassword open={open} handleClose={handleClose} />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              onClick={validateInputs}
+            >
+              Sign in
+            </Button>
+            <Typography sx={{ textAlign: 'center' }}>
+              Don&apos;t have an account?{' '}
+              <span>
+                <Link
+                  href="/material-ui/getting-started/templates/sign-in/"
+                  variant="body2"
+                  sx={{ alignSelf: 'center' }}
+                >
+                  Sign up
+                </Link>
+              </span>
+            </Typography>
+          </Box>
+          <Divider>or</Divider>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <Button
+              type="submit"
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign in with Google')}
+              startIcon={<GoogleIcon />}
+            >
+              Sign in with Google
+            </Button>
+            <Button
+              type="submit"
+              fullWidth
+              variant="outlined"
+              onClick={() => alert('Sign in with Facebook')}
+              startIcon={<FacebookIcon />}
+            >
+              Sign in with Facebook
+            </Button>
+          </Box>
+        </Card>
+      </SignInContainer>
+    </AppTheme>
   );
 }
diff --git a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js
deleted file mode 100644
index 2b4f157597c4ec..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
-import Select from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './ToggleColorMode';
-import getSignInTheme from './theme/getSignInTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}) {
-  const handleChange = (event) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const signInTheme = createTheme(getSignInTheme(mode));
-
-  return (
-    <ThemeProvider theme={signInTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <Button
-              variant="text"
-              size="small"
-              aria-label="Back to templates"
-              startIcon={<ArrowBackRoundedIcon />}
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'none', sm: 'flex' } }}
-            >
-              Back to templates
-            </Button>
-            <IconButton
-              size="small"
-              aria-label="Back to templates"
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'auto', sm: 'none' } }}
-            >
-              <ArrowBackRoundedIcon />
-            </IconButton>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
-                <Select
-                  size="small"
-                  labelId="theme-select-label"
-                  id="theme-select"
-                  value={showCustomTheme ? 'custom' : 'material'}
-                  onChange={handleChange}
-                  label="Design Language"
-                >
-                  <MenuItem value="custom">Custom Theme</MenuItem>
-                  <MenuItem value="material">Material Design 2</MenuItem>
-                </Select>
-              </FormControl>
-              <ToggleColorMode
-                data-screenshot="toggle-mode"
-                mode={mode}
-                toggleColorMode={toggleColorMode}
-              />
-            </Box>
-          </Toolbar>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-TemplateFrame.propTypes = {
-  children: PropTypes.node,
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  showCustomTheme: PropTypes.bool.isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-  toggleCustomTheme: PropTypes.func.isRequired,
-};
-
-export default TemplateFrame;
diff --git a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx b/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx
deleted file mode 100644
index 3d83d3350a64c8..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/TemplateFrame.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from 'react';
-import {
-  createTheme,
-  ThemeProvider,
-  PaletteMode,
-  styled,
-} from '@mui/material/styles';
-import Select, { SelectChangeEvent } from '@mui/material/Select';
-import MenuItem from '@mui/material/MenuItem';
-import FormControl from '@mui/material/FormControl';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import ToggleColorMode from './ToggleColorMode';
-import getSignInTheme from './theme/getSignInTheme';
-
-const StyledAppBar = styled(AppBar)(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  flexShrink: 0,
-  borderBottom: '1px solid',
-  borderColor: theme.palette.divider,
-  backgroundColor: theme.palette.background.paper,
-  boxShadow: 'none',
-  backgroundImage: 'none',
-  zIndex: theme.zIndex.drawer + 1,
-  flex: '0 0 auto',
-}));
-
-interface TemplateFrameProps {
-  showCustomTheme: boolean;
-  toggleCustomTheme: (theme: boolean) => void;
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-  children: React.ReactNode;
-}
-
-export default function TemplateFrame({
-  showCustomTheme,
-  toggleCustomTheme,
-  mode,
-  toggleColorMode,
-  children,
-}: TemplateFrameProps) {
-  const handleChange = (event: SelectChangeEvent) => {
-    toggleCustomTheme(event.target.value === 'custom');
-  };
-  const signInTheme = createTheme(getSignInTheme(mode));
-
-  return (
-    <ThemeProvider theme={signInTheme}>
-      <Box sx={{ height: '100dvh', display: 'flex', flexDirection: 'column' }}>
-        <StyledAppBar>
-          <Toolbar
-            variant="dense"
-            disableGutters
-            sx={{
-              display: 'flex',
-              justifyContent: 'space-between',
-              width: '100%',
-              p: '8px 12px',
-            }}
-          >
-            <Button
-              variant="text"
-              size="small"
-              aria-label="Back to templates"
-              startIcon={<ArrowBackRoundedIcon />}
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'none', sm: 'flex' } }}
-            >
-              Back to templates
-            </Button>
-            <IconButton
-              size="small"
-              aria-label="Back to templates"
-              component="a"
-              href="/material-ui/getting-started/templates/"
-              sx={{ display: { xs: 'auto', sm: 'none' } }}
-            >
-              <ArrowBackRoundedIcon />
-            </IconButton>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              <FormControl variant="outlined" sx={{ minWidth: 180 }}>
-                <Select
-                  size="small"
-                  labelId="theme-select-label"
-                  id="theme-select"
-                  value={showCustomTheme ? 'custom' : 'material'}
-                  onChange={handleChange}
-                  label="Design Language"
-                >
-                  <MenuItem value="custom">Custom Theme</MenuItem>
-                  <MenuItem value="material">Material Design 2</MenuItem>
-                </Select>
-              </FormControl>
-              <ToggleColorMode
-                data-screenshot="toggle-mode"
-                mode={mode}
-                toggleColorMode={toggleColorMode}
-              />
-            </Box>
-          </Toolbar>
-        </StyledAppBar>
-        <Box sx={{ flex: '1 1', overflow: 'auto' }}>{children}</Box>
-      </Box>
-    </ThemeProvider>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
deleted file mode 100644
index f578f75b2d92a6..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-
-import IconButton from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-function ToggleColorMode({ mode, toggleColorMode, ...props }) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      size="small"
-      color="primary"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
-
-ToggleColorMode.propTypes = {
-  mode: PropTypes.oneOf(['dark', 'light']).isRequired,
-  toggleColorMode: PropTypes.func.isRequired,
-};
-
-export default ToggleColorMode;
diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
deleted file mode 100644
index 1de6afce2933ac..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { PaletteMode } from '@mui/material/styles';
-import IconButton, { IconButtonProps } from '@mui/material/IconButton';
-
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-
-interface ToggleColorModeProps extends IconButtonProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export default function ToggleColorMode({
-  mode,
-  toggleColorMode,
-  ...props
-}: ToggleColorModeProps) {
-  return (
-    <IconButton
-      onClick={toggleColorMode}
-      size="small"
-      color="primary"
-      aria-label="Theme toggle button"
-      {...props}
-    >
-      {mode === 'dark' ? (
-        <WbSunnyRoundedIcon fontSize="small" />
-      ) : (
-        <ModeNightRoundedIcon fontSize="small" />
-      )}
-    </IconButton>
-  );
-}
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js
deleted file mode 100644
index cf04322a9a6056..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx
deleted file mode 100644
index c93ccbfbcabf85..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/dataDisplay.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: theme.palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: theme.shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: theme.palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js
deleted file mode 100644
index d521ecbd350128..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx
deleted file mode 100644
index aaf00001b522ca..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/feedback.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: theme.palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: theme.palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts b/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts
deleted file mode 100644
index 91a4485333d139..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { inputsCustomizations } from './inputs';
-export { dataDisplayCustomizations } from './dataDisplay';
-export { feedbackCustomizations } from './feedback';
-export { navigationCustomizations } from './navigation';
-export { surfacesCustomizations } from './surfaces';
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js
deleted file mode 100644
index 12cea77491064a..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.js
+++ /dev/null
@@ -1,444 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx
deleted file mode 100644
index 4be4c18628e16e..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/inputs.tsx
+++ /dev/null
@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: theme.palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: theme.shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: theme.palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: theme.palette.text.primary,
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundColor: theme.palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: theme.palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js
deleted file mode 100644
index ded180025db59e..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.js
+++ /dev/null
@@ -1,278 +0,0 @@
-import * as React from 'react';
-import { alpha } from '@mui/material/styles';
-
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx b/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx
deleted file mode 100644
index f6b92e573f6316..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/navigation.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: theme.shape.borderRadius,
-        border: `1px solid ${theme.palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: theme.palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: theme.shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: theme.palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: theme.palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: theme.palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: theme.palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: theme.palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: theme.palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: theme.palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: theme.palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: theme.palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: theme.palette.text.secondary,
-        borderRadius: theme.shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: theme.palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: theme.palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: theme.palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: theme.palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: theme.palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: theme.palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js
deleted file mode 100644
index ff4a53884964ae..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts b/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts
deleted file mode 100644
index 5bcdfc5c055b0f..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/customizations/surfaces.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: theme.palette.background.default,
-        border: '1px solid',
-        borderColor: theme.palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: theme.shape.borderRadius,
-          borderTopRightRadius: theme.shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: theme.shape.borderRadius,
-          borderBottomRightRadius: theme.shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: theme.shape.borderRadius,
-          border: `1px solid ${theme.palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${theme.palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js
deleted file mode 100644
index 0e7b709b13affd..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getSignInTheme(mode) {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx b/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx
deleted file mode 100644
index 5354fc57af3932..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/getSignInTheme.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type {} from '@mui/material/themeCssVarsAugmentation';
-import { ThemeOptions, PaletteMode } from '@mui/material/styles';
-import { getDesignTokens } from './themePrimitives';
-import {
-  inputsCustomizations,
-  dataDisplayCustomizations,
-  feedbackCustomizations,
-  navigationCustomizations,
-  surfacesCustomizations,
-} from './customizations';
-
-export default function getSignInTheme(mode: PaletteMode): ThemeOptions {
-  return {
-    ...getDesignTokens(mode),
-    components: {
-      ...inputsCustomizations,
-      ...dataDisplayCustomizations,
-      ...feedbackCustomizations,
-      ...navigationCustomizations,
-      ...surfacesCustomizations,
-    },
-  };
-}
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js
deleted file mode 100644
index 625400640eef43..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { createTheme, alpha } from '@mui/material/styles';
-
-const defaultTheme = createTheme();
-
-const customShadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && {
-          primary: 'hsl(0, 0%, 100%)',
-          secondary: gray[400],
-        }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts b/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts
deleted file mode 100644
index 41b517b5294fad..00000000000000
--- a/docs/data/material/getting-started/templates/sign-in/theme/themePrimitives.ts
+++ /dev/null
@@ -1,235 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles/createPalette' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: ['"Inter", "sans-serif"'].join(','),
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index fd0d891f6473b3..1a5c489e7e0133 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -23,7 +23,7 @@ the purpose of each file.
 {{"component": "modules/components/MaterialFreeTemplatesCollection.js"}}
 
 See any room for improvement?
-Please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or [pull request](https://github.com/mui/material-ui/pulls) on GitHub.
+Please feel free to open an [issue](https://github.com/mui/material-ui/issues/new/choose) or a [pull request](https://github.com/mui/material-ui/pulls) on GitHub, following the [contribution guide](/material-ui/getting-started/faq/#how-can-i-contribute-to-the-free-templates).
 
 ## Premium templates
 
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index 4f11a03dc6cc37..a4a7b3f5cfa2f9 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/docs/pages/experiments/website/dashboard-template-theme.tsx b/docs/pages/experiments/website/dashboard-template-theme.tsx
index 470f7cbc87d799..73e87cc63c25e2 100644
--- a/docs/pages/experiments/website/dashboard-template-theme.tsx
+++ b/docs/pages/experiments/website/dashboard-template-theme.tsx
@@ -21,33 +21,24 @@ import Typography from '@mui/material/Typography';
 
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
-import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
-import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-
-import { createTheme, ThemeProvider, PaletteMode } from '@mui/material/styles';
 
 import Head from 'docs/src/modules/components/Head';
-import getDashboardTheme from 'docs/data/material/getting-started/templates/dashboard/theme/getDashboardTheme';
+import AppTheme from 'docs/data/material/getting-started/templates/shared-theme/AppTheme';
+import ColorModeIconDropdown from 'docs/data/material/getting-started/templates/shared-theme/ColorModeIconDropdown';
+import {
+  chartsCustomizations,
+  dataGridCustomizations,
+  datePickersCustomizations,
+  treeViewCustomizations,
+} from 'docs/data/material/getting-started/templates/dashboard/theme/customizations';
 import CustomDatePicker from 'docs/data/material/getting-started/templates/dashboard/components/CustomDatePicker';
 
-interface ToggleColorModeProps {
-  mode: PaletteMode;
-  toggleColorMode: () => void;
-}
-
-export function ToggleColorMode({ mode, toggleColorMode }: ToggleColorModeProps) {
-  return (
-    <Box sx={{ maxWidth: '32px' }}>
-      <IconButton onClick={toggleColorMode} size="small" aria-label="button to toggle theme">
-        {mode === 'dark' ? (
-          <WbSunnyRoundedIcon fontSize="small" />
-        ) : (
-          <ModeNightRoundedIcon fontSize="small" />
-        )}
-      </IconButton>
-    </Box>
-  );
-}
+const xThemeComponents = {
+  ...chartsCustomizations,
+  ...dataGridCustomizations,
+  ...datePickersCustomizations,
+  ...treeViewCustomizations,
+};
 
 function CustomTabPanel(props: { [x: string]: any; children: any; value: any; index: any }) {
   const { children, value, index, ...other } = props;
@@ -83,11 +74,6 @@ function a11yProps(index: number) {
 }
 
 export default function DashboardTemplateTheme() {
-  const [mode, setMode] = React.useState<PaletteMode>('light');
-  const dashboardTheme = createTheme(getDashboardTheme(mode));
-  const toggleColorMode = () => {
-    setMode((prev) => (prev === 'dark' ? 'light' : 'dark'));
-  };
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -102,7 +88,7 @@ export default function DashboardTemplateTheme() {
   };
 
   return (
-    <ThemeProvider theme={dashboardTheme}>
+    <AppTheme themeComponents={xThemeComponents}>
       <CssBaseline />
       <Head title="MUI Branding Theme Test" description="" />
       <Container
@@ -118,7 +104,7 @@ export default function DashboardTemplateTheme() {
           <Typography variant="h4" component="h1">
             Dashboard template theme
           </Typography>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ColorModeIconDropdown />
         </Stack>
         <Divider />
         <Stack direction="column" sx={{ gap: 2 }}>
@@ -274,6 +260,6 @@ export default function DashboardTemplateTheme() {
           </CustomTabPanel>
         </Box>
       </Container>
-    </ThemeProvider>
+    </AppTheme>
   );
 }
diff --git a/docs/pages/material-ui/getting-started/templates/dashboard.js b/docs/pages/material-ui/getting-started/templates/dashboard.js
index 08553cdb1db79a..df9d5da710a0a1 100644
--- a/docs/pages/material-ui/getting-started/templates/dashboard.js
+++ b/docs/pages/material-ui/getting-started/templates/dashboard.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import Dashboard from 'docs/data/material/getting-started/templates/dashboard/Dashboard';
 
 export default function Page() {
   return (
     <AppTheme>
-      <Dashboard />
+      <TemplateFrame>
+        <Dashboard />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/pages/material-ui/getting-started/templates/sign-in.js b/docs/pages/material-ui/getting-started/templates/sign-in.js
index 476618b70f47b4..45f09658b2c061 100644
--- a/docs/pages/material-ui/getting-started/templates/sign-in.js
+++ b/docs/pages/material-ui/getting-started/templates/sign-in.js
@@ -1,11 +1,14 @@
 import * as React from 'react';
 import AppTheme from 'docs/src/modules/components/AppTheme';
+import TemplateFrame from 'docs/src/modules/components/TemplateFrame';
 import SignIn from 'docs/data/material/getting-started/templates/sign-in/SignIn';
 
 export default function Page() {
   return (
     <AppTheme>
-      <SignIn />
+      <TemplateFrame>
+        <SignIn />
+      </TemplateFrame>
     </AppTheme>
   );
 }
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg
index 761e24d77d5042..74b4aa4a234ac2 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg
index a909b761a206f3..ed80e36841a2df 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg
index e639c741352a90..0909279bbb63a1 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg
index 918d715d168c71..4dcd02614d48d1 100644
Binary files a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ
diff --git a/docs/scripts/generateTemplateScreenshots.ts b/docs/scripts/generateTemplateScreenshots.ts
index 946db3e1eacd66..a7799d9d3333e3 100644
--- a/docs/scripts/generateTemplateScreenshots.ts
+++ b/docs/scripts/generateTemplateScreenshots.ts
@@ -6,10 +6,10 @@ import { chromium } from 'playwright';
  * README
  *
  * Usage:
- * - `yarn screenshot` to generate all screenshots
- * - `yarn screenshot material-ui` to generate all screenshots for Material-UI templates
- * - `yarn screenshot order-dashboard` to generate screenshots for file named `order-dashboard.tsx`
- * - `yarn screenshot material-ui dashboard` to generate screenshots for file named `dashboard.tsx` of Material UI templates
+ * - `pnpm template:screenshot` to generate all screenshots
+ * - `pnpm template:screenshot material-ui` to generate all screenshots for Material-UI templates
+ * - `pnpm template:screenshot order-dashboard` to generate screenshots for file named `order-dashboard.tsx`
+ * - `pnpm template:screenshot material-ui dashboard` to generate screenshots for file named `dashboard.tsx` of Material UI templates
  *
  * Note:
  * - The screenshot with `-dark` suffix is generated if the page has a button with id `toggle-mode`
@@ -74,14 +74,44 @@ const names = new Set(process.argv.slice(2));
         async function captureDarkMode(outputPath: string) {
           const btn = await page.$('[data-screenshot="toggle-mode"]');
           if (btn) {
-            await page.click('[data-screenshot="toggle-mode"]');
-            await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
-            await page.screenshot({
-              path: outputPath,
-              animations: 'disabled',
-            });
-
-            await page.click('[data-screenshot="toggle-mode"]'); // switch back to light
+            if ((await btn.getAttribute('aria-haspopup')) === 'true') {
+              await page.click('[data-screenshot="toggle-mode"]');
+              await page.getByRole('menuitem').filter({ hasText: /dark/i }).click();
+              await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
+              await page.screenshot({
+                path: outputPath,
+                animations: 'disabled',
+              });
+
+              await page.click('[data-screenshot="toggle-mode"]');
+              await page
+                .getByRole('menuitem')
+                .filter({ hasText: /system/i })
+                .click(); // switch back to light
+            } else if ((await btn.getAttribute('aria-haspopup')) === 'listbox') {
+              await page.click('[data-screenshot="toggle-mode"]');
+              await page.getByRole('option').filter({ hasText: /dark/i }).click();
+              await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
+              await page.screenshot({
+                path: outputPath,
+                animations: 'disabled',
+              });
+
+              await page.click('[data-screenshot="toggle-mode"]');
+              await page
+                .getByRole('option')
+                .filter({ hasText: /system/i })
+                .click(); // switch back to light
+            } else {
+              await page.click('[data-screenshot="toggle-mode"]');
+              await page.waitForLoadState('networkidle'); // changing to dark mode might trigger image loading
+              await page.screenshot({
+                path: outputPath,
+                animations: 'disabled',
+              });
+
+              await page.click('[data-screenshot="toggle-mode"]'); // switch back to light
+            }
           }
         }
 
@@ -89,7 +119,7 @@ const names = new Set(process.argv.slice(2));
           await Promise.resolve().then(() =>
             urls.reduce(async (sequence, aUrl) => {
               await sequence;
-              await page.goto(`${host}${aUrl}`, { waitUntil: 'networkidle' });
+              await page.goto(`${host}${aUrl}?hideFrame=true`, { waitUntil: 'networkidle' });
 
               const filePath = `${output}${aUrl.replace(/\/$/, '')}.jpg`;
               // eslint-disable-next-line no-console
diff --git a/docs/src/modules/components/TemplateFrame.js b/docs/src/modules/components/TemplateFrame.js
new file mode 100644
index 00000000000000..d2829105313b96
--- /dev/null
+++ b/docs/src/modules/components/TemplateFrame.js
@@ -0,0 +1,362 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable material-ui/no-hardcoded-labels */
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import { deepmerge } from '@mui/utils';
+import { getDesignTokens, getThemedComponents } from '@mui/docs/branding';
+import { createTheme, ThemeProvider, styled, useColorScheme } from '@mui/material/styles';
+import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import Box from '@mui/material/Box';
+import Select from '@mui/material/Select';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import SvgIcon from '@mui/material/SvgIcon';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import LightModeIcon from '@mui/icons-material/LightModeOutlined';
+import DarkModeIcon from '@mui/icons-material/DarkModeOutlined';
+import PaletteIcon from '@mui/icons-material/PaletteOutlined';
+import codeSandbox from 'docs/src/modules/sandbox/CodeSandbox';
+import stackBlitz from 'docs/src/modules/sandbox/StackBlitz';
+import sourceMaterialTemplates from 'docs/src/modules/material/sourceMaterialTemplates';
+
+function pascalCase(str) {
+  return str
+    .replace(/[^\w]+(.)/g, (_, chr) => chr.toUpperCase())
+    .replace(/^(.)/, (_, chr) => chr.toUpperCase());
+}
+
+const StyledAppBar = styled(AppBar)(({ theme }) => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexShrink: 0,
+  borderBottom: '1px solid',
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  boxShadow: 'none',
+  backgroundImage: 'none',
+  zIndex: theme.zIndex.drawer + 1,
+  flex: '0 0 auto',
+}));
+
+const defaultTheme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data-mui-color-scheme',
+  },
+  colorSchemes: { light: true, dark: true },
+});
+
+function ColorSchemeControls() {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleMode = (targetMode) => () => {
+    setMode(targetMode);
+    handleClose();
+  };
+  if (!mode) {
+    return (
+      <Box
+        sx={(theme) => {
+          // copy from OutlinedInput
+          const borderColor =
+            theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+          return {
+            verticalAlign: 'bottom',
+            display: 'inline-flex',
+            width: 32,
+            height: 32,
+            borderRadius: (theme.vars || theme).shape.borderRadius,
+            border: '1px solid',
+            borderColor: theme.vars
+              ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
+              : borderColor,
+          };
+        }}
+      />
+    );
+  }
+  const resolvedMode = systemMode || mode;
+  const icon = {
+    light: <LightModeIcon />,
+    dark: <DarkModeIcon />,
+  }[resolvedMode];
+  return (
+    <React.Fragment>
+      <IconButton
+        id="frame-color-mode-toggle"
+        onClick={handleClick}
+        color="primary"
+        size="small"
+        disableTouchRipple
+        aria-controls={open ? 'color-scheme-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+      >
+        {icon}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        id="frame-color-mode-toggle"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        slotProps={{
+          paper: {
+            sx: {
+              my: '4px',
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
+          System
+        </MenuItem>
+        <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
+          Light
+        </MenuItem>
+        <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
+          Dark
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
+
+export function ThemeSelector({ value, onChange }) {
+  return (
+    <Select
+      size="small"
+      value={value}
+      onChange={(event) => {
+        onChange(event.target.value);
+      }}
+      startAdornment={
+        <InputAdornment position="start">
+          <PaletteIcon fontSize="small" color="primary" />
+        </InputAdornment>
+      }
+      sx={{ minWidth: 200 }}
+    >
+      <MenuItem value="custom">Custom Theme</MenuItem>
+      <MenuItem value="material2">Material Design 2</MenuItem>
+    </Select>
+  );
+}
+
+const { palette: lightPalette, typography, ...designTokens } = getDesignTokens('light');
+const { palette: darkPalette } = getDesignTokens('dark');
+
+const brandingTheme = createTheme({
+  cssVariables: {
+    cssVarPrefix: 'muidocs',
+    colorSchemeSelector: 'data-mui-color-scheme',
+  },
+  colorSchemes: {
+    light: {
+      palette: lightPalette,
+    },
+    dark: {
+      palette: darkPalette,
+    },
+  },
+  ...designTokens,
+  typography: deepmerge(typography, {
+    h1: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-common-white)',
+      },
+    },
+    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(),
+});
+
+function TemplateFrame({ children }) {
+  const router = useRouter();
+  const templateId = router.pathname.split('/').pop();
+  const templateName = pascalCase(templateId);
+  const [selectedTheme, setSelectedTheme] = React.useState('custom');
+  const materialTemplates = sourceMaterialTemplates();
+  const item = materialTemplates.map.get(templateId);
+  return (
+    <ThemeProvider theme={defaultTheme} disableTransitionOnChange>
+      <Box
+        sx={{
+          height: '100dvh',
+          display: 'flex',
+          flexDirection: 'column',
+          '&:has(.Docs-templateFrame)': {
+            '--template-frame-height': '52px',
+            '& [data-screenshot="toggle-mode"]': { display: 'none' },
+          },
+        }}
+      >
+        {router.query?.hideFrame !== 'true' && (
+          <ThemeProvider theme={brandingTheme}>
+            <StyledAppBar className="Docs-templateFrame">
+              <Toolbar
+                variant="dense"
+                disableGutters
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  width: '100%',
+                  p: '8px 12px',
+                  gap: 1,
+                  minHeight: 'var(--template-frame-height)',
+                }}
+              >
+                <Box sx={{ width: { xs: 'auto', sm: 0 }, '& > *': { width: 'max-content' } }}>
+                  <Button
+                    variant="text"
+                    size="small"
+                    aria-label="Back to templates"
+                    startIcon={<ArrowBackRoundedIcon />}
+                    component="a"
+                    href="/material-ui/getting-started/templates/"
+                    sx={{ display: { xs: 'none', sm: 'flex' } }}
+                  >
+                    Back to templates
+                  </Button>
+                  <IconButton
+                    size="small"
+                    aria-label="Back to templates"
+                    component="a"
+                    href="/material-ui/getting-started/templates/"
+                    sx={{ display: { xs: 'auto', sm: 'none' } }}
+                  >
+                    <ArrowBackRoundedIcon />
+                  </IconButton>
+                </Box>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 1,
+                    width: { xs: 'auto', sm: 0 },
+                    '& > *': { flexShrink: 0 },
+                  }}
+                >
+                  <Tooltip title="Open Template via CodeSandbox">
+                    <IconButton
+                      color="primary"
+                      size="small"
+                      disableTouchRipple
+                      aria-label="CodeSandbox playground"
+                      data-ga-event-category="material-ui-template"
+                      data-ga-event-label={templateId}
+                      data-ga-event-action="codesandbox"
+                      onClick={() =>
+                        codeSandbox
+                          .createMaterialTemplate({
+                            ...item,
+                            files: { ...item.files, ...materialTemplates.sharedTheme?.files },
+                            title: `${templateName} Template - Material UI`,
+                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
+                              process.env.LIB_VERSION
+                            }/docs/data/material/templates/${templateId}/${templateName}.${
+                              item.codeVariant === 'TS' ? 'tsx' : 'js'
+                            }`,
+                          })
+                          .replaceContent((content) => {
+                            if (typeof content === 'string') {
+                              return content
+                                .replace(/\.\.\/shared-theme\//g, './theme/')
+                                .replace('./App', `./${templateName}`);
+                            }
+                            return content;
+                          })
+                          .openSandbox(`/${templateName}`)
+                      }
+                      sx={{ alignSelf: 'center', borderRadius: 1 }}
+                    >
+                      <SvgIcon viewBox="0 0 1080 1080">
+                        <path d="M755 140.3l0.5-0.3h0.3L512 0 268.3 140h-0.3l0.8 0.4L68.6 256v512L512 1024l443.4-256V256L755 140.3z m-30 506.4v171.2L548 920.1V534.7L883.4 341v215.7l-158.4 90z m-584.4-90.6V340.8L476 534.4v385.7L300 818.5V646.7l-159.4-90.6zM511.7 280l171.1-98.3 166.3 96-336.9 194.5-337-194.6 165.7-95.7L511.7 280z" />
+                      </SvgIcon>
+                    </IconButton>
+                  </Tooltip>
+                  <Tooltip title="Open Template via StackBlitz">
+                    <IconButton
+                      color="primary"
+                      size="small"
+                      disableTouchRipple
+                      aria-label="StackBlitz playground"
+                      data-ga-event-category="material-ui-template"
+                      data-ga-event-label={templateId}
+                      data-ga-event-action="stackblitz"
+                      onClick={() =>
+                        stackBlitz
+                          .createMaterialTemplate({
+                            ...item,
+                            files: { ...item.files, ...materialTemplates.sharedTheme?.files },
+                            title: `${templateName} Template - Material UI`,
+                            githubLocation: `${process.env.SOURCE_CODE_REPO}/blob/v${
+                              process.env.LIB_VERSION
+                            }/docs/data/material/templates/${templateId}/${templateName}.${
+                              item.codeVariant === 'TS' ? 'tsx' : 'js'
+                            }`,
+                          })
+                          .replaceContent((content) => {
+                            if (typeof content === 'string') {
+                              return content
+                                .replace(/\.\.\/shared-theme\//g, './theme/')
+                                .replace('./App', `./${templateName}`);
+                            }
+                            return content;
+                          })
+                          .openStackBlitz(`/${templateName}`)
+                      }
+                      sx={{ alignSelf: 'center', borderRadius: 1 }}
+                    >
+                      <SvgIcon viewBox="0 0 19 28">
+                        <path d="M8.13378 16.1087H0L14.8696 0L10.8662 11.1522L19 11.1522L4.13043 27.2609L8.13378 16.1087Z" />
+                      </SvgIcon>
+                    </IconButton>
+                  </Tooltip>
+                  <Divider orientation="vertical" flexItem sx={{ mx: 1 }} />
+                  <ThemeSelector
+                    value={selectedTheme}
+                    onChange={(newTheme) => setSelectedTheme(newTheme)}
+                  />
+                  <ColorSchemeControls />
+                </Box>
+              </Toolbar>
+            </StyledAppBar>
+          </ThemeProvider>
+        )}
+        <Box sx={{ flex: '1 1', overflow: 'auto' }}>
+          {React.isValidElement(children)
+            ? React.cloneElement(children, { disableCustomTheme: selectedTheme === 'material2' })
+            : null}
+        </Box>
+      </Box>
+    </ThemeProvider>
+  );
+}
+
+export default TemplateFrame;
diff --git a/docs/src/modules/material/sourceMaterialTemplates.ts b/docs/src/modules/material/sourceMaterialTemplates.ts
new file mode 100644
index 00000000000000..0cb3cbfac64a9a
--- /dev/null
+++ b/docs/src/modules/material/sourceMaterialTemplates.ts
@@ -0,0 +1,42 @@
+const templateMap = new Map<string, { files: Record<string, string>; codeVariant: 'TS' | 'JS' }>();
+let sharedTheme: { files: Record<string, string>; codeVariant: 'TS' | 'JS' } | null = null;
+// @ts-ignore
+const req = require.context(
+  '../../../data/material/getting-started/templates/?raw',
+  true,
+  /^\.\/[^/]+\/.*\.(js|tsx|ts)$/,
+);
+req.keys().forEach((key: string) => {
+  const match = /\/(?<name>[^/]+)\/(?<filePath>.*)/.exec(key);
+  if (match) {
+    const name = match.groups?.name;
+    const filePath = match.groups?.filePath;
+    if (name && filePath?.match(/\.(ts|tsx)$/)) {
+      if (name === 'shared-theme') {
+        sharedTheme = {
+          files: { ...sharedTheme?.files, [`theme/${filePath}`]: req(key) },
+          codeVariant: 'TS',
+        };
+      } else {
+        templateMap.set(name, {
+          files: { ...templateMap.get(name)?.files, [filePath]: req(key) },
+          codeVariant: 'TS',
+        });
+      }
+    }
+  }
+});
+
+export interface TemplateData {
+  files: Record<string, string>;
+  codeVariant: 'TS' | 'JS';
+}
+
+export default function sourceMaterialTemplates() {
+  return {
+    names: Array.from(templateMap.keys()),
+    templates: Array.from(templateMap.values()),
+    map: new Map(templateMap),
+    sharedTheme,
+  };
+}
diff --git a/docs/src/modules/sandbox/CodeSandbox.test.js b/docs/src/modules/sandbox/CodeSandbox.test.js
index 16f745b352da2a..e4efab409e4a73 100644
--- a/docs/src/modules/sandbox/CodeSandbox.test.js
+++ b/docs/src/modules/sandbox/CodeSandbox.test.js
@@ -61,7 +61,7 @@ describe('CodeSandbox', () => {
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
     />
     <!-- Icons to support Material Design -->
     <link
@@ -155,7 +155,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
     />
     <!-- Icons to support Material Design -->
     <link
diff --git a/docs/src/modules/sandbox/CodeSandbox.ts b/docs/src/modules/sandbox/CodeSandbox.ts
index 3db3f2b12bf63e..505ebcab8fb889 100644
--- a/docs/src/modules/sandbox/CodeSandbox.ts
+++ b/docs/src/modules/sandbox/CodeSandbox.ts
@@ -198,7 +198,103 @@ ReactDOM.createRoot(document.querySelector("#root")${type}).render(
   };
 }
 
+function createMaterialTemplate(templateData: {
+  title: string;
+  files: Record<string, string>;
+  githubLocation: string;
+  codeVariant: CodeVariant;
+  codeStyling?: CodeStyling;
+}) {
+  const ext = getFileExtension(templateData.codeVariant);
+  const { title, githubLocation: description } = templateData;
+
+  // document.querySelector returns 'Element | null' but createRoot expects 'Element | DocumentFragment'.
+  const type = templateData.codeVariant === 'TS' ? '!' : '';
+
+  const files: Record<string, { content: string | Record<string, any> }> = {
+    'public/index.html': {
+      content: CRA.getHtml({
+        title: templateData.title,
+        language: 'en',
+        codeStyling: templateData.codeStyling ?? 'MUI System',
+      }),
+    },
+    [`index.${ext}`]: {
+      content: `import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { StyledEngineProvider } from '@mui/material/styles';
+import App from './App';
+
+ReactDOM.createRoot(document.querySelector("#root")${type}).render(
+  <React.StrictMode>
+    <StyledEngineProvider injectFirst>
+      <App />
+    </StyledEngineProvider>
+  </React.StrictMode>
+);`,
+    },
+    ...Object.entries(templateData.files).reduce(
+      (prev, curr) => ({
+        ...prev,
+        [curr[0]]: {
+          content: curr[1],
+        },
+      }),
+      {},
+    ),
+    ...(templateData.codeVariant === 'TS' && {
+      'tsconfig.json': {
+        content: CRA.getTsconfig(),
+      },
+    }),
+  };
+
+  const { dependencies, devDependencies } = SandboxDependencies(
+    {
+      codeVariant: templateData.codeVariant,
+      raw: Object.entries(templateData.files).reduce((prev, curr) => `${prev}\n${curr}`, ''),
+      productId: 'material-ui',
+    },
+    {
+      commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+    },
+  );
+
+  files['package.json'] = {
+    content: {
+      description,
+      dependencies,
+      devDependencies,
+      scripts: {
+        start: 'react-scripts start',
+        build: 'react-scripts build',
+        test: 'react-scripts test',
+        eject: 'react-scripts eject',
+      },
+      ...(templateData.codeVariant === 'TS' && {
+        main: 'index.tsx',
+      }),
+    },
+  };
+
+  return {
+    title,
+    files,
+    dependencies,
+    devDependencies,
+    replaceContent(updater: (content: string | Record<string, any>, filePath: string) => string) {
+      Object.keys(files).forEach((filePath) => {
+        files[filePath].content = updater(files[filePath].content, filePath);
+      });
+      return this;
+    },
+    openSandbox: (initialFile: string = '/App') =>
+      openSandbox({ files, codeVariant: templateData.codeVariant, initialFile }),
+  };
+}
+
 export default {
   createReactApp,
   createJoyTemplate,
+  createMaterialTemplate,
 };
diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts
index c376428ccdfaee..646f5467a350d0 100644
--- a/docs/src/modules/sandbox/CreateReactApp.ts
+++ b/docs/src/modules/sandbox/CreateReactApp.ts
@@ -22,7 +22,7 @@ export const getHtml = ({
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
     />
     <!-- Icons to support Material Design -->
     <link
diff --git a/docs/src/modules/sandbox/Dependencies.ts b/docs/src/modules/sandbox/Dependencies.ts
index 023fb4238c4d79..51ea8890d5589f 100644
--- a/docs/src/modules/sandbox/Dependencies.ts
+++ b/docs/src/modules/sandbox/Dependencies.ts
@@ -1,7 +1,14 @@
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import type { MuiProductId } from 'docs/src/modules/utils/getProductInfoFromUrl';
 
-const packagesWithBundledTypes = ['date-fns', '@emotion/react', '@emotion/styled', 'dayjs'];
+const packagesWithBundledTypes = [
+  'date-fns',
+  '@emotion/react',
+  '@emotion/styled',
+  'dayjs',
+  'clsx',
+  '@react-spring/web',
+];
 const muiNpmOrgs = ['@mui', '@base_ui', '@pigment-css', '@toolpad'];
 
 /**
diff --git a/docs/src/modules/sandbox/StackBlitz.test.js b/docs/src/modules/sandbox/StackBlitz.test.js
index 0d25c2a95c77b7..325a1bc079b2ed 100644
--- a/docs/src/modules/sandbox/StackBlitz.test.js
+++ b/docs/src/modules/sandbox/StackBlitz.test.js
@@ -42,7 +42,7 @@ describe('StackBlitz', () => {
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
     />
     <!-- Icons to support Material Design -->
     <link
@@ -119,7 +119,7 @@ ReactDOM.createRoot(document.querySelector("#root")).render(
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
     />
     <!-- Icons to support Material Design -->
     <link
diff --git a/docs/src/modules/sandbox/StackBlitz.ts b/docs/src/modules/sandbox/StackBlitz.ts
index 58d1f6aa1307d8..558527e34374ed 100644
--- a/docs/src/modules/sandbox/StackBlitz.ts
+++ b/docs/src/modules/sandbox/StackBlitz.ts
@@ -4,7 +4,46 @@ import SandboxDependencies from 'docs/src/modules/sandbox/Dependencies';
 import * as CRA from 'docs/src/modules/sandbox/CreateReactApp';
 import getFileExtension from 'docs/src/modules/sandbox/FileExtension';
 import flattenRelativeImports from 'docs/src/modules/sandbox/FlattenRelativeImports';
-import { DemoData } from 'docs/src/modules/sandbox/types';
+import { CodeStyling, CodeVariant, DemoData } from 'docs/src/modules/sandbox/types';
+
+function openStackBlitz({
+  title,
+  description,
+  dependencies,
+  devDependencies,
+  files,
+  codeVariant,
+  initialFile,
+}: {
+  title: string;
+  description: string;
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
+  files: Record<string, string>;
+  codeVariant: string;
+  initialFile: string;
+}) {
+  const extension = codeVariant === CODE_VARIANTS.TS ? '.tsx' : '.js';
+  // ref: https://developer.stackblitz.com/docs/platform/post-api/
+  const form = document.createElement('form');
+  form.method = 'POST';
+  form.target = '_blank';
+  form.action = `https://stackblitz.com/run?file=${initialFile}${
+    initialFile.match(/(\.tsx|\.ts|\.js)$/) ? '' : extension
+  }`;
+  addHiddenInput(form, 'project[template]', 'create-react-app');
+  addHiddenInput(form, 'project[title]', title);
+  addHiddenInput(form, 'project[description]', `# ${title}\n${description}`);
+  addHiddenInput(form, 'project[dependencies]', JSON.stringify(dependencies));
+  addHiddenInput(form, 'project[devDependencies]', JSON.stringify(devDependencies));
+  Object.keys(files).forEach((key) => {
+    const value = files[key];
+    addHiddenInput(form, `project[files][${key}]`, value);
+  });
+  document.body.appendChild(form);
+  form.submit();
+  document.body.removeChild(form);
+}
 
 function createReactApp(demoData: DemoData) {
   const ext = getFileExtension(demoData.codeVariant);
@@ -45,30 +84,92 @@ function createReactApp(demoData: DemoData) {
     dependencies,
     devDependencies,
     openSandbox: (initialFile = `Demo.${ext}`) => {
-      const extension = demoData.codeVariant === CODE_VARIANTS.TS ? '.tsx' : '.js';
-      // ref: https://developer.stackblitz.com/docs/platform/post-api/
-      const form = document.createElement('form');
-      form.method = 'POST';
-      form.target = '_blank';
-      form.action = `https://stackblitz.com/run?file=${initialFile}${
-        initialFile.match(/(\.tsx|\.ts|\.js)$/) ? '' : extension
-      }`;
-      addHiddenInput(form, 'project[template]', 'create-react-app');
-      addHiddenInput(form, 'project[title]', title);
-      addHiddenInput(form, 'project[description]', `# ${title}\n${description}`);
-      addHiddenInput(form, 'project[dependencies]', JSON.stringify(dependencies));
-      addHiddenInput(form, 'project[devDependencies]', JSON.stringify(devDependencies));
-      Object.keys(files).forEach((key) => {
-        const value = files[key];
-        addHiddenInput(form, `project[files][${key}]`, value);
+      openStackBlitz({
+        title,
+        description,
+        dependencies,
+        devDependencies,
+        files,
+        codeVariant: demoData.codeVariant,
+        initialFile,
+      });
+    },
+  };
+}
+
+function createMaterialTemplate(templateData: {
+  title: string;
+  files: Record<string, string>;
+  githubLocation: string;
+  codeVariant: CodeVariant;
+  codeStyling?: CodeStyling;
+}) {
+  const ext = getFileExtension(templateData.codeVariant);
+  const { title, githubLocation: description } = templateData;
+
+  // document.querySelector returns 'Element | null' but createRoot expects 'Element | DocumentFragment'.
+  const type = templateData.codeVariant === 'TS' ? '!' : '';
+
+  const files: Record<string, string> = {
+    'index.html': CRA.getHtml({
+      title: templateData.title,
+      language: 'en',
+      codeStyling: templateData.codeStyling ?? 'MUI System',
+    }),
+    [`index.${ext}`]: `import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { StyledEngineProvider } from '@mui/material/styles';
+import App from './App';
+
+ReactDOM.createRoot(document.querySelector("#root")${type}).render(
+  <React.StrictMode>
+    <StyledEngineProvider injectFirst>
+      <App />
+    </StyledEngineProvider>
+  </React.StrictMode>
+);`,
+    ...templateData.files,
+    ...(templateData.codeVariant === 'TS' && {
+      'tsconfig.json': CRA.getTsconfig(),
+    }),
+  };
+
+  const { dependencies, devDependencies } = SandboxDependencies(
+    {
+      codeVariant: templateData.codeVariant,
+      raw: Object.entries(templateData.files).reduce((prev, curr) => `${prev}\n${curr}`, ''),
+    },
+    {
+      // Waiting for https://github.com/stackblitz/core/issues/437
+      // commitRef: process.env.PULL_REQUEST_ID ? process.env.COMMIT_REF : undefined,
+    },
+  );
+
+  return {
+    title,
+    files,
+    dependencies,
+    devDependencies,
+    replaceContent(updater: (content: string | Record<string, any>, filePath: string) => string) {
+      Object.keys(files).forEach((filePath) => {
+        files[filePath] = updater(files[filePath], filePath);
       });
-      document.body.appendChild(form);
-      form.submit();
-      document.body.removeChild(form);
+      return this;
     },
+    openStackBlitz: (initialFile: string = '/App') =>
+      openStackBlitz({
+        title: templateData.title,
+        files,
+        description,
+        dependencies,
+        devDependencies,
+        codeVariant: templateData.codeVariant,
+        initialFile,
+      }),
   };
 }
 
 export default {
   createReactApp,
+  createMaterialTemplate,
 };
diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
index 885bb07692e7d9..daf54b626dadeb 100644
--- a/packages/mui-docs/src/branding/brandingTheme.ts
+++ b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -1264,6 +1264,51 @@ export function getThemedComponents(): ThemeOptions {
           iconFilled: {
             top: 'calc(50% - .25em)',
           },
+          root: ({ theme }) => ({
+            variants: [
+              {
+                props: { variant: 'outlined' },
+                style: {
+                  backgroundColor: alpha(theme.palette.primaryDark[50], 0.1),
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    border: `1px solid ${(theme.vars || theme).palette.primaryDark[100]}`,
+                    boxShadow: `#FFF 0 1px 0 inset, ${alpha(theme.palette.grey[200], 0.4)} 0 -1px 0 inset, ${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                  },
+                  '&:not(.Mui-focused):hover': {
+                    background: (theme.vars || theme).palette.grey[50],
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderColor: (theme.vars || theme).palette.grey[300],
+                      boxShadow: `${alpha(theme.palette.grey[200], 0.5)} 0 1px 2px 0`,
+                    },
+                  },
+                  ...theme.applyDarkStyles({
+                    color: (theme.vars || theme).palette.primary[300],
+                    backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      borderColor: alpha(theme.palette.primaryDark[600], 0.5),
+                      boxShadow: `${alpha(theme.palette.primaryDark[600], 0.3)} 0 1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 -1px 0 inset, ${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                    },
+                    '&:not(.Mui-focused):hover': {
+                      background: alpha(theme.palette.primaryDark[700], 0.8),
+                      '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: (theme.vars || theme).palette.primaryDark[600],
+                        boxShadow: `${(theme.vars || theme).palette.common.black} 0 1px 2px 0`,
+                      },
+                    },
+                  }),
+                },
+              },
+              {
+                props: { size: 'small' },
+                style: {
+                  minHeight: 32,
+                  '& [role="combobox"]': {
+                    paddingBlock: 5,
+                  },
+                },
+              },
+            ],
+          }),
         },
       },
       MuiTab: {