diff --git a/docs/data/joy/getting-started/templates/email/components/Header.tsx b/docs/data/joy/getting-started/templates/email/components/Header.tsx
index 1f280e487d0f11..c076216cdc0cfa 100644
--- a/docs/data/joy/getting-started/templates/email/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/email/components/Header.tsx
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
   return (
     <Tooltip title="Change theme" variant="outlined">
       <IconButton
-        id="toggle-mode"
+        data-screenshot="toggle-mode"
         size="sm"
         variant="plain"
         color="neutral"
diff --git a/docs/data/joy/getting-started/templates/files/components/Header.tsx b/docs/data/joy/getting-started/templates/files/components/Header.tsx
index 5d8f58d9ca2c10..a884779524ad74 100644
--- a/docs/data/joy/getting-started/templates/files/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/files/components/Header.tsx
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
   return (
     <Tooltip title="Change theme" variant="outlined">
       <IconButton
-        id="toggle-mode"
+        data-screenshot="toggle-mode"
         size="sm"
         variant="plain"
         color="neutral"
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
index b31f5fa690a8c4..3300d3447a3bf4 100644
--- a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
+++ b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
@@ -30,7 +30,7 @@ function ColorSchemeToggle() {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="lg"
       variant="soft"
       color="neutral"
diff --git a/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
index aa2c7db9c9196e..68c2e4785cc28a 100644
--- a/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/messages/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"
diff --git a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
index 53ba8799124900..4ad09e85b5774d 100644
--- a/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/order-dashboard/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"
diff --git a/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
index 9f28fd75f22a17..a7830313ecd324 100644
--- a/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/profile-dashboard/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
index aa2c7db9c9196e..68c2e4785cc28a 100644
--- a/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
+++ b/docs/data/joy/getting-started/templates/rental-dashboard/components/ColorSchemeToggle.tsx
@@ -26,7 +26,7 @@ export default function ColorSchemeToggle(props: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"
diff --git a/docs/data/joy/getting-started/templates/team/components/Header.tsx b/docs/data/joy/getting-started/templates/team/components/Header.tsx
index a6479e9e9b2023..c9a2c9b5fd10cf 100644
--- a/docs/data/joy/getting-started/templates/team/components/Header.tsx
+++ b/docs/data/joy/getting-started/templates/team/components/Header.tsx
@@ -42,7 +42,7 @@ function ColorSchemeToggle() {
   return (
     <Tooltip title="Change theme" variant="outlined">
       <IconButton
-        id="toggle-mode"
+        data-screenshot="toggle-mode"
         size="sm"
         variant="plain"
         color="neutral"
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index 03d9dd649634f3..b847651c5a246b 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -60,7 +60,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -203,7 +205,11 @@ export default function Checkout() {
                 height: 150,
               }}
             >
-              <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
               <Stepper
                 id="desktop-stepper"
                 activeStep={activeStep}
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
index 3e1b33fdecafe8..85cf9383c00c19 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -68,7 +68,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -203,7 +205,11 @@ export default function Checkout() {
                 height: 150,
               }}
             >
-              <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+              <ToggleColorMode
+                data-screenshot="toggle-mode"
+                mode={mode}
+                toggleColorMode={toggleColorMode}
+              />
               <Stepper
                 id="desktop-stepper"
                 activeStep={activeStep}
diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js
index 7e4305a7698c28..ef5bf33fef968f 100644
--- a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.js
@@ -6,12 +6,13 @@ import IconButton from '@mui/material/IconButton';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx
index 1fd99c941fe0ab..faf35370cc8841 100644
--- a/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/checkout/ToggleColorMode.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
@@ -14,12 +14,14 @@ interface ToggleColorModeProps {
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
index 2c184af4d10dce..ab6199b2e459aa 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/MenuButton.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import Badge from '@mui/material/Badge';
 import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
-interface StyledMenuButtonProps extends IconButtonProps {
+export interface MenuButtonProps extends IconButtonProps {
   showBadge?: boolean;
 }
 
 export default function MenuButton({
   showBadge = false,
   ...props
-}: StyledMenuButtonProps) {
+}: MenuButtonProps) {
   return (
     <Badge
       color="error"
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
index e794c1df1b440e..ebcd6b161f8a6f 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.js
@@ -83,7 +83,11 @@ function Navbar({ mode, toggleColorMode }) {
               <NotificationsRoundedIcon />
             </MenuButton>
             <OptionsMenu />
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
           </Stack>
         </Stack>
         <Stack
diff --git a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
index b9392639604de9..d285db6c481ec8 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/Navbar.tsx
@@ -87,7 +87,11 @@ export default function Navbar({ mode, toggleColorMode }: NavBarProps) {
               <NotificationsRoundedIcon />
             </MenuButton>
             <OptionsMenu />
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
           </Stack>
         </Stack>
         <Stack
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
index 317b5b764c06c4..d39c66311f97ab 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.js
@@ -5,12 +5,13 @@ import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import MenuButton from './MenuButton';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <MenuButton
       onClick={toggleColorMode}
       size="small"
       aria-label="button to toggle theme"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
index 9642c2d2f21fcb..67010c166ca6e9 100644
--- a/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/components/ToggleColorMode.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import { PaletteMode } from '@mui/material';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
-import MenuButton from './MenuButton';
+import MenuButton, { MenuButtonProps } from './MenuButton';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends MenuButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
@@ -12,12 +12,14 @@ interface ToggleColorModeProps {
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <MenuButton
       onClick={toggleColorMode}
       size="small"
       aria-label="button to toggle theme"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
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
index 21a8f10f6e75b1..bb68fd96580df4 100644
--- a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.js
@@ -34,7 +34,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</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/internals/components/ToggleCustomTheme.tsx b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
index 58df9e79a64226..f4b1b7c218b4a8 100644
--- a/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/internals/components/ToggleCustomTheme.tsx
@@ -41,7 +41,9 @@ export default function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.js b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
index 93382f406f9515..7452a774a757fc 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.js
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.js
@@ -48,7 +48,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
index cd4441df77760f..22518445b61a31 100644
--- a/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
@@ -55,7 +55,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js
index 4f99929a231e3e..e32edf9b9e7905 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.js
@@ -118,7 +118,11 @@ function AppAppBar({ mode, toggleColorMode }) {
               alignItems: 'center',
             }}
           >
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
             <Button color="primary" variant="text" size="small">
               Sign in
             </Button>
diff --git a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
index d20f27a5d97b55..762b760ccd456e 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/AppAppBar.tsx
@@ -122,7 +122,11 @@ export default function AppAppBar({ mode, toggleColorMode }: AppAppBarProps) {
               alignItems: 'center',
             }}
           >
-            <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+            <ToggleColorMode
+              data-screenshot="toggle-mode"
+              mode={mode}
+              toggleColorMode={toggleColorMode}
+            />
             <Button color="primary" variant="text" size="small">
               Sign in
             </Button>
diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js
index bcb83d384743d2..27779e7809b43d 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.js
@@ -6,13 +6,14 @@ import IconButton from '@mui/material/IconButton';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
       size="small"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx
index 9ccb9982009d24..0997dbf26c79f5 100644
--- a/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/landing-page/components/ToggleColorMode.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
@@ -13,6 +13,7 @@ interface ToggleColorModeProps {
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
@@ -20,6 +21,7 @@ export default function ToggleColorMode({
       color="primary"
       aria-label="Theme toggle button"
       size="small"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.js b/docs/data/material/getting-started/templates/sign-in-side/Content.js
index f00cf55020cf4d..1df78fe8ea5220 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/Content.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/Content.js
@@ -45,8 +45,8 @@ export default function Content() {
       <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
         <SitemarkIcon />
       </Box>
-      {items.map((item) => (
-        <Stack direction="row" sx={{ gap: 2 }}>
+      {items.map((item, index) => (
+        <Stack key={index} direction="row" sx={{ gap: 2 }}>
           {item.icon}
           <div>
             <Typography gutterBottom sx={{ fontWeight: 'medium' }}>
diff --git a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx b/docs/data/material/getting-started/templates/sign-in-side/Content.tsx
index f00cf55020cf4d..1df78fe8ea5220 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/Content.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/Content.tsx
@@ -45,8 +45,8 @@ export default function Content() {
       <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
         <SitemarkIcon />
       </Box>
-      {items.map((item) => (
-        <Stack direction="row" sx={{ gap: 2 }}>
+      {items.map((item, index) => (
+        <Stack key={index} direction="row" sx={{ gap: 2 }}>
           {item.icon}
           <div>
             <Typography gutterBottom sx={{ fontWeight: 'medium' }}>
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
index 9d799332986b63..1672577cc1e9de 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.js
@@ -45,7 +45,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -111,7 +113,11 @@ export default function SignInSide() {
           >
             Back
           </Button>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ToggleColorMode
+            data-screenshot="toggle-mode"
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
         </Stack>
         <Stack
           direction={{ xs: 'column-reverse', md: 'row' }}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
index 90135015907f4a..b9a6b86df0a991 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
@@ -53,7 +53,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -112,7 +114,11 @@ export default function SignInSide() {
           >
             Back
           </Button>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ToggleColorMode
+            data-screenshot="toggle-mode"
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
         </Stack>
         <Stack
           direction={{ xs: 'column-reverse', md: 'row' }}
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
index 7e4305a7698c28..ef5bf33fef968f 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.js
@@ -6,12 +6,13 @@ import IconButton from '@mui/material/IconButton';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
index 1fd99c941fe0ab..faf35370cc8841 100644
--- a/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/sign-in-side/ToggleColorMode.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
@@ -14,12 +14,14 @@ interface ToggleColorModeProps {
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
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 efb745d7f356d3..ea032553d972a2 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -54,7 +54,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -185,7 +187,11 @@ export default function SignIn() {
           >
             Back
           </Button>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ToggleColorMode
+            data-screenshot="toggle-mode"
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
         </Stack>
         <Stack
           sx={{
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 09a28bd01fd6f0..aafc4a92b4c314 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -61,7 +61,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -185,7 +187,11 @@ export default function SignIn() {
           >
             Back
           </Button>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ToggleColorMode
+            data-screenshot="toggle-mode"
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
         </Stack>
         <Stack
           sx={{
diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
index 7e4305a7698c28..ef5bf33fef968f 100644
--- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.js
@@ -6,12 +6,13 @@ import IconButton from '@mui/material/IconButton';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
index 1fd99c941fe0ab..faf35370cc8841 100644
--- a/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/ToggleColorMode.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
@@ -14,12 +14,14 @@ interface ToggleColorModeProps {
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.js b/docs/data/material/getting-started/templates/sign-up/SignUp.js
index cfb26f9cf621f7..8a97fac45b5395 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -53,7 +53,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -189,7 +191,11 @@ export default function SignUp() {
           >
             Back
           </Button>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ToggleColorMode
+            data-screenshot="toggle-mode"
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
         </Stack>
         <Stack
           sx={{
diff --git a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
index 67b5291ec77bcf..3f8dce5d9df335 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -60,7 +60,9 @@ function ToggleCustomTheme({
           <AutoAwesomeRoundedIcon sx={{ fontSize: '20px', mr: 1 }} />
           Custom theme
         </ToggleButton>
-        <ToggleButton value={false}>Material Design 2</ToggleButton>
+        <ToggleButton data-screenshot="toggle-default-theme" value={false}>
+          Material Design 2
+        </ToggleButton>
       </ToggleButtonGroup>
     </Box>
   );
@@ -189,7 +191,11 @@ export default function SignUp() {
           >
             Back
           </Button>
-          <ToggleColorMode mode={mode} toggleColorMode={toggleColorMode} />
+          <ToggleColorMode
+            data-screenshot="toggle-mode"
+            mode={mode}
+            toggleColorMode={toggleColorMode}
+          />
         </Stack>
         <Stack
           sx={{
diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
index 7e4305a7698c28..ef5bf33fef968f 100644
--- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
+++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.js
@@ -6,12 +6,13 @@ import IconButton from '@mui/material/IconButton';
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-function ToggleColorMode({ mode, toggleColorMode }) {
+function ToggleColorMode({ mode, toggleColorMode, ...props }) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
index 1fd99c941fe0ab..faf35370cc8841 100644
--- a/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/ToggleColorMode.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 import { PaletteMode } from '@mui/material';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
 
 import ModeNightRoundedIcon from '@mui/icons-material/ModeNightRounded';
 import WbSunnyRoundedIcon from '@mui/icons-material/WbSunnyRounded';
 
-interface ToggleColorModeProps {
+interface ToggleColorModeProps extends IconButtonProps {
   mode: PaletteMode;
   toggleColorMode: () => void;
 }
@@ -14,12 +14,14 @@ interface ToggleColorModeProps {
 export default function ToggleColorMode({
   mode,
   toggleColorMode,
+  ...props
 }: ToggleColorModeProps) {
   return (
     <IconButton
       onClick={toggleColorMode}
       color="primary"
       aria-label="Theme toggle button"
+      {...props}
     >
       {mode === 'dark' ? (
         <WbSunnyRoundedIcon fontSize="small" />
diff --git a/docs/pages/experiments/joy/toggle-button.tsx b/docs/pages/experiments/joy/toggle-button.tsx
index bc09c1dddcf4ed..d2a251dfc07e00 100644
--- a/docs/pages/experiments/joy/toggle-button.tsx
+++ b/docs/pages/experiments/joy/toggle-button.tsx
@@ -21,7 +21,7 @@ function ColorSchemeToggle({ onClick, sx, ...props }: IconButtonProps) {
   }
   return (
     <IconButton
-      id="toggle-mode"
+      data-screenshot="toggle-mode"
       size="sm"
       variant="outlined"
       color="neutral"
diff --git a/docs/public/static/images/templates/blog-dark.png b/docs/public/static/images/templates/blog-dark.png
deleted file mode 100644
index 03ad60a492a907..00000000000000
Binary files a/docs/public/static/images/templates/blog-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/blog-light.png b/docs/public/static/images/templates/blog-light.png
deleted file mode 100644
index ff252d1e7aa33e..00000000000000
Binary files a/docs/public/static/images/templates/blog-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/checkout-dark.png b/docs/public/static/images/templates/checkout-dark.png
deleted file mode 100644
index 6269d11fed5dd8..00000000000000
Binary files a/docs/public/static/images/templates/checkout-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/checkout-light.png b/docs/public/static/images/templates/checkout-light.png
deleted file mode 100644
index 6bdda36f908a5a..00000000000000
Binary files a/docs/public/static/images/templates/checkout-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/dashboard-dark.png b/docs/public/static/images/templates/dashboard-dark.png
deleted file mode 100644
index 5caee83f9c31a3..00000000000000
Binary files a/docs/public/static/images/templates/dashboard-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/dashboard-light.png b/docs/public/static/images/templates/dashboard-light.png
deleted file mode 100644
index 721390ed90afe6..00000000000000
Binary files a/docs/public/static/images/templates/dashboard-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/landing-page-dark.png b/docs/public/static/images/templates/landing-page-dark.png
deleted file mode 100644
index e48adbb205b1f3..00000000000000
Binary files a/docs/public/static/images/templates/landing-page-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/landing-page-light.png b/docs/public/static/images/templates/landing-page-light.png
deleted file mode 100644
index b6d375da2a36c0..00000000000000
Binary files a/docs/public/static/images/templates/landing-page-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in-dark.png b/docs/public/static/images/templates/sign-in-dark.png
deleted file mode 100644
index a67406f45f8a81..00000000000000
Binary files a/docs/public/static/images/templates/sign-in-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in-light.png b/docs/public/static/images/templates/sign-in-light.png
deleted file mode 100644
index 888b41cff9c4f5..00000000000000
Binary files a/docs/public/static/images/templates/sign-in-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in-side-dark.png b/docs/public/static/images/templates/sign-in-side-dark.png
deleted file mode 100644
index b3332ca4079314..00000000000000
Binary files a/docs/public/static/images/templates/sign-in-side-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in-side-light.png b/docs/public/static/images/templates/sign-in-side-light.png
deleted file mode 100644
index b8180488e28e20..00000000000000
Binary files a/docs/public/static/images/templates/sign-in-side-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-up-dark.png b/docs/public/static/images/templates/sign-up-dark.png
deleted file mode 100644
index ad19c16a0de062..00000000000000
Binary files a/docs/public/static/images/templates/sign-up-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-up-light.png b/docs/public/static/images/templates/sign-up-light.png
deleted file mode 100644
index 514db1bcce3d1a..00000000000000
Binary files a/docs/public/static/images/templates/sign-up-light.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sticky-footer-dark.png b/docs/public/static/images/templates/sticky-footer-dark.png
deleted file mode 100644
index 276cd14a764555..00000000000000
Binary files a/docs/public/static/images/templates/sticky-footer-dark.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sticky-footer-light.png b/docs/public/static/images/templates/sticky-footer-light.png
deleted file mode 100644
index 5a44b3e9168bfb..00000000000000
Binary files a/docs/public/static/images/templates/sticky-footer-light.png and /dev/null differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg
new file mode 100644
index 00000000000000..5777bfc219860e
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/blog.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg
new file mode 100644
index 00000000000000..542defc17c12fa
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg
new file mode 100644
index 00000000000000..ccf78b9f16d3d7
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg
new file mode 100644
index 00000000000000..be06590566b50a
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout-default.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg
new file mode 100644
index 00000000000000..e475c76a61987b
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/checkout.jpg differ
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
new file mode 100644
index 00000000000000..24a0ddd2867494
Binary files /dev/null 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-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg
new file mode 100644
index 00000000000000..1bf29415cb7404
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.jpg
new file mode 100644
index 00000000000000..58f1d87303142b
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/dashboard-default.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
new file mode 100644
index 00000000000000..18a9e5d4a436b1
Binary files /dev/null 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/landing-page-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-dark.jpg
new file mode 100644
index 00000000000000..b16c5722bb4457
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg
new file mode 100644
index 00000000000000..ccb13fe7a4347f
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg
new file mode 100644
index 00000000000000..bb84e7d0599121
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page-default.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg
new file mode 100644
index 00000000000000..7eecd3d2080767
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/landing-page.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.jpg
new file mode 100644
index 00000000000000..e0e9f3dd6413cb
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/pricing.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
new file mode 100644
index 00000000000000..b6183b9adf31a3
Binary files /dev/null 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-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg
new file mode 100644
index 00000000000000..51de0c4899e497
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg
new file mode 100644
index 00000000000000..b9099cb8941a34
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-default.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg
new file mode 100644
index 00000000000000..93a6fe9cf7321b
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg
new file mode 100644
index 00000000000000..4c657259c7696e
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg
new file mode 100644
index 00000000000000..9c076011cc68d7
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side-default.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.jpg
new file mode 100644
index 00000000000000..cdd0d453911c3c
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in-side.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
new file mode 100644
index 00000000000000..0478ba24fff31f
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-in.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg
new file mode 100644
index 00000000000000..c693258477631e
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg
new file mode 100644
index 00000000000000..3643e04f6b7f5d
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default-dark.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg
new file mode 100644
index 00000000000000..4529898295ff53
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up-default.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg
new file mode 100644
index 00000000000000..6834c2e34e1295
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sign-up.jpg differ
diff --git a/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg b/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg
new file mode 100644
index 00000000000000..df6b861675bdca
Binary files /dev/null and b/docs/public/static/screenshots/material-ui/getting-started/templates/sticky-footer.jpg differ
diff --git a/docs/scripts/generateTemplateScreenshots.ts b/docs/scripts/generateTemplateScreenshots.ts
index 8b87cc455f489d..946db3e1eacd66 100644
--- a/docs/scripts/generateTemplateScreenshots.ts
+++ b/docs/scripts/generateTemplateScreenshots.ts
@@ -3,68 +3,121 @@ import path from 'path';
 import { chromium } from 'playwright';
 
 /**
+ * README
+ *
  * Usage:
  * - `yarn screenshot` to generate all screenshots
- * - `yarn screenshot order-dashboard` to generate screenshots for `docs/pages/joy-ui/getting-started/templates/order-dashboard.tsx`
- * - `yarn screenshot [...templates]` to generate screenshots for the templates in `docs/pages/joy-ui/getting-started/templates/*`
+ * - `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
+ *
+ * Note:
+ * - The screenshot with `-dark` suffix is generated if the page has a button with id `toggle-mode`
+ *   <button data-screenshot="toggle-mode" onClick={toggleMode}>Toggle Mode</button>
+ *
+ * - The screenshot with `-default` suffix is generated if the page has a button with id `toggle-default-theme`
+ *   <button data-screenshot="toggle-default-theme" onClick={toggleDefaultTheme}>Toggle Default Theme</button>
+ *
+ * - The screenshot with `-default-dark` suffix is generated if the page has both buttons
+ *
+ * Debug:
+ * - Set `chromium.launch({ headless: false })` in line:50 to see the browser
  */
 
 const host = process.env.DEPLOY_PREVIEW || 'http://localhost:3000';
-const directory = 'docs/public/static/screenshots';
+
+/**
+ * project key should be `mui.com/<project-key>/*`
+ */
+const projects = {
+  'material-ui': {
+    input: path.join(process.cwd(), 'docs/pages/material-ui/getting-started/templates'),
+    output: 'docs/public/static/screenshots',
+    viewport: { width: 1680, height: 1092 },
+  },
+  'joy-ui': {
+    input: path.join(process.cwd(), 'docs/pages/joy-ui/getting-started/templates'),
+    output: 'docs/public/static/screenshots',
+    viewport: { width: 1600, height: 800 },
+  },
+};
 
 const names = new Set(process.argv.slice(2));
 
 (async () => {
   // eslint-disable-next-line no-console
   console.info('Host:', host);
-  const browser = await chromium.launch();
-  const page = await browser.newPage({
-    viewport: { width: 1600, height: 800 },
-    reducedMotion: 'reduce',
-  });
+  const browser = await chromium.launch({ headless: true });
 
-  const files = await fs.readdir(
-    path.join(process.cwd(), 'docs/pages/joy-ui/getting-started/templates'),
-  );
-  const urls = files
-    .filter(
-      (file) =>
-        !file.startsWith('index') &&
-        (names.size === 0 || names.has(file.replace(/\.(js|tsx)$/, ''))),
-    )
-    .map((file) => `/joy-ui/getting-started/templates/${file.replace(/\.(js|tsx)$/, '/')}`);
-
-  try {
-    await Promise.resolve().then(() =>
-      urls.reduce(async (sequence, aUrl) => {
-        await sequence;
-        await page.goto(`${host}${aUrl}`, { waitUntil: 'networkidle' });
-
-        const filePath = `${directory}${aUrl.replace(/\/$/, '')}.jpg`;
-        // eslint-disable-next-line no-console
-        console.info('Saving screenshot to:', filePath);
-        await page.screenshot({ path: filePath, animations: 'disabled' });
-
-        // capture dark mode
-        const toggle = await page.$('#toggle-mode');
-        if (toggle) {
-          await page.click('#toggle-mode');
-          await page.reload({ waitUntil: 'networkidle' });
-          await page.screenshot({
-            path: filePath.replace('.jpg', '-dark.jpg'),
-            animations: 'disabled',
-          });
-
-          await page.click('#toggle-mode'); // switch back to light
+  await Promise.all(
+    Object.entries(projects)
+      .filter(([project]) => names.size === 0 || names.has(project))
+      .map(async ([project, { input, output, viewport }]) => {
+        const page = await browser.newPage({
+          viewport,
+          reducedMotion: 'reduce',
+        });
+
+        names.delete(project);
+
+        const files = await fs.readdir(input);
+        const urls = files
+          .filter(
+            (file) =>
+              !file.startsWith('index') &&
+              (names.size === 0 || names.has(file.replace(/\.(js|tsx)$/, ''))),
+          )
+          .map(
+            (file) => `/${project}/getting-started/templates/${file.replace(/\.(js|tsx)$/, '/')}`,
+          );
+
+        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
+          }
         }
 
-        return Promise.resolve();
-      }, Promise.resolve()),
-    );
-  } catch (error) {
-    // eslint-disable-next-line no-console
-    console.log(error);
-  }
+        try {
+          await Promise.resolve().then(() =>
+            urls.reduce(async (sequence, aUrl) => {
+              await sequence;
+              await page.goto(`${host}${aUrl}`, { waitUntil: 'networkidle' });
+
+              const filePath = `${output}${aUrl.replace(/\/$/, '')}.jpg`;
+              // eslint-disable-next-line no-console
+              console.info('Saving screenshot to:', filePath);
+              await page.screenshot({ path: filePath, animations: 'disabled' });
+
+              await captureDarkMode(filePath.replace('.jpg', '-dark.jpg'));
+
+              // capture custom theme
+              const toggleTheme = await page.$('[data-screenshot="toggle-default-theme"]');
+              if (toggleTheme) {
+                await page.click('[data-screenshot="toggle-default-theme"]');
+                await page.screenshot({
+                  path: filePath.replace('.jpg', '-default.jpg'),
+                  animations: 'disabled',
+                });
+
+                await captureDarkMode(filePath.replace('.jpg', '-default-dark.jpg'));
+              }
+
+              return Promise.resolve();
+            }, Promise.resolve()),
+          );
+        } catch (error) {
+          console.error(error);
+        }
+      }),
+  );
 
   await browser.close();
 })();
diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
index 7c47261a7de654..a8e09df4015baa 100644
--- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js
+++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
@@ -9,66 +9,62 @@ import Typography from '@mui/material/Typography';
 import Visibility from '@mui/icons-material/Visibility';
 import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
 import { useTranslate } from '@mui/docs/i18n';
-import { useTheme } from '@mui/material/styles';
 
 const sourcePrefix = `${process.env.SOURCE_CODE_REPO}/tree/v${process.env.LIB_VERSION}`;
 
-function layouts(translatation, theme) {
-  const imageSuffix = theme.palette.mode === 'dark' ? '-dark' : '-light';
+function layouts(translatation) {
   return [
     {
       title: translatation('dashboardTitle'),
       description: translatation('dashboardDescr'),
-      src: `/static/images/templates/dashboard${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/dashboard/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/dashboard`,
+      hasDarkMode: true,
     },
     {
       title: translatation('landingPageTitle'),
       description: translatation('landingPageDescr'),
-      src: `/static/images/templates/landing-page${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/landing-page/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/landing-page`,
+      hasDarkMode: true,
     },
     {
       title: translatation('checkoutTitle'),
       description: translatation('checkoutDescr'),
-      src: `/static/images/templates/checkout${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/checkout/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/checkout`,
+      hasDarkMode: true,
     },
     {
       title: translatation('signInTitle'),
       description: translatation('signInDescr'),
-      src: `/static/images/templates/sign-in${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sign-in/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in`,
+      hasDarkMode: true,
     },
     {
       title: translatation('signInSideTitle'),
       description: translatation('signInSideDescr'),
-      src: `/static/images/templates/sign-in-side${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sign-in-side/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-in-side`,
+      hasDarkMode: true,
     },
     {
       title: translatation('signUpTitle'),
       description: translatation('signUpDescr'),
-      src: `/static/images/templates/sign-up${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sign-up/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sign-up`,
+      hasDarkMode: true,
     },
     {
       title: translatation('blogTitle'),
       description: translatation('blogDescr'),
-      src: `/static/images/templates/blog${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/blog/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/blog`,
     },
     {
       title: translatation('stickyFooterTitle'),
       description: translatation('stickyFooterDescr'),
-      src: `/static/images/templates/sticky-footer${imageSuffix}.png`,
       href: '/material-ui/getting-started/templates/sticky-footer/',
       source: `${sourcePrefix}/docs/data/material/getting-started/templates/sticky-footer`,
     },
@@ -77,11 +73,10 @@ function layouts(translatation, theme) {
 
 export default function Templates() {
   const translatation = useTranslate();
-  const theme = useTheme();
 
   return (
     <Grid container spacing={2} sx={{ py: 2 }}>
-      {layouts(translatation, theme).map((layout) => (
+      {layouts(translatation).map((layout) => (
         <Grid item xs={12} sm={6} key={layout.title}>
           <Card
             variant="outlined"
@@ -94,13 +89,22 @@ export default function Templates() {
           >
             <CardMedia
               component="img"
-              image={layout.src}
+              // The image source is generated from `pnpm template:screenshot material-ui`, do not modify the image manually.
+              image={`/static/screenshots${layout.href.replace(/\/$/, '')}.jpg`}
               title={layout.title}
-              sx={{
+              sx={(theme) => ({
                 aspectRatio: '16 / 9',
                 objectPosition: 'top',
                 borderBottom: '1px solid',
                 borderColor: 'divider',
+                ...theme.applyStyles('dark', {
+                  content: 'var(--src)',
+                }),
+              })}
+              style={{
+                '--src': layout.hasDarkMode
+                  ? `url(/static/screenshots${layout.href.replace(/\/$/, '')}-dark.jpg)`
+                  : `url(/static/screenshots${layout.href.replace(/\/$/, '')}.jpg)`,
               }}
             />
             <Box sx={{ p: 2, pt: 1.5 }}>