diff --git a/docs/data/material/getting-started/templates/templates.md b/docs/data/material/getting-started/templates/templates.md
index 4d9a40ce5ef0a7..9e46486f534c8d 100644
--- a/docs/data/material/getting-started/templates/templates.md
+++ b/docs/data/material/getting-started/templates/templates.md
@@ -30,5 +30,10 @@ Please feel free to open an [issue](https://github.com/mui/material-ui/issues/ne
 Looking for something more? You can find complete templates and themes in the <a href="https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=templates-store">premium template section</a>.
 
 <a href="https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=templates-store">
-<img src="/static/images/themes-display.png" alt="react templates" width="2280" height="1200" />
+<span class="only-light-mode">
+<img src="/static/images/themes-display-light.png" alt="The MUI Store includes several carefully curated React templates using Material UI" width="2280" height="1200" />
+</span>
+<span class="only-dark-mode">
+<img src="/static/images/themes-display-dark.png" alt="The MUI Store includes several carefully curated React templates using Material UI" width="2280" height="1200" />
+</span>
 </a>
diff --git a/docs/public/static/images/templates/blog-dark.png b/docs/public/static/images/templates/blog-dark.png
new file mode 100644
index 00000000000000..03ad60a492a907
Binary files /dev/null and b/docs/public/static/images/templates/blog-dark.png differ
diff --git a/docs/public/static/images/templates/blog-light.png b/docs/public/static/images/templates/blog-light.png
new file mode 100644
index 00000000000000..ff252d1e7aa33e
Binary files /dev/null and b/docs/public/static/images/templates/blog-light.png differ
diff --git a/docs/public/static/images/templates/blog.png b/docs/public/static/images/templates/blog.png
deleted file mode 100644
index debe0f3ed3a9b4..00000000000000
Binary files a/docs/public/static/images/templates/blog.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
new file mode 100644
index 00000000000000..6269d11fed5dd8
Binary files /dev/null and b/docs/public/static/images/templates/checkout-dark.png differ
diff --git a/docs/public/static/images/templates/checkout-light.png b/docs/public/static/images/templates/checkout-light.png
new file mode 100644
index 00000000000000..6bdda36f908a5a
Binary files /dev/null and b/docs/public/static/images/templates/checkout-light.png differ
diff --git a/docs/public/static/images/templates/checkout.png b/docs/public/static/images/templates/checkout.png
deleted file mode 100644
index e5cfba2cd01c55..00000000000000
Binary files a/docs/public/static/images/templates/checkout.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
new file mode 100644
index 00000000000000..42984725db85dc
Binary files /dev/null and b/docs/public/static/images/templates/dashboard-dark.png differ
diff --git a/docs/public/static/images/templates/dashboard-light.png b/docs/public/static/images/templates/dashboard-light.png
new file mode 100644
index 00000000000000..e93b5e52c57954
Binary files /dev/null and b/docs/public/static/images/templates/dashboard-light.png differ
diff --git a/docs/public/static/images/templates/dashboard.png b/docs/public/static/images/templates/dashboard.png
deleted file mode 100644
index 2a10b08116f94f..00000000000000
Binary files a/docs/public/static/images/templates/dashboard.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
new file mode 100644
index 00000000000000..e48adbb205b1f3
Binary files /dev/null and b/docs/public/static/images/templates/landing-page-dark.png differ
diff --git a/docs/public/static/images/templates/landing-page-light.png b/docs/public/static/images/templates/landing-page-light.png
new file mode 100644
index 00000000000000..b6d375da2a36c0
Binary files /dev/null and b/docs/public/static/images/templates/landing-page-light.png differ
diff --git a/docs/public/static/images/templates/landing-page.png b/docs/public/static/images/templates/landing-page.png
deleted file mode 100644
index a6dfeac3242598..00000000000000
Binary files a/docs/public/static/images/templates/landing-page.png and /dev/null differ
diff --git a/docs/public/static/images/templates/pricing.png b/docs/public/static/images/templates/pricing.png
deleted file mode 100644
index 745f03cbeb7689..00000000000000
Binary files a/docs/public/static/images/templates/pricing.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
new file mode 100644
index 00000000000000..a67406f45f8a81
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-dark.png differ
diff --git a/docs/public/static/images/templates/sign-in-light.png b/docs/public/static/images/templates/sign-in-light.png
new file mode 100644
index 00000000000000..888b41cff9c4f5
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-light.png 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
new file mode 100644
index 00000000000000..b3332ca4079314
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-side-dark.png 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
new file mode 100644
index 00000000000000..b8180488e28e20
Binary files /dev/null and b/docs/public/static/images/templates/sign-in-side-light.png differ
diff --git a/docs/public/static/images/templates/sign-in-side.png b/docs/public/static/images/templates/sign-in-side.png
deleted file mode 100644
index fb00a2d01160fb..00000000000000
Binary files a/docs/public/static/images/templates/sign-in-side.png and /dev/null differ
diff --git a/docs/public/static/images/templates/sign-in.png b/docs/public/static/images/templates/sign-in.png
deleted file mode 100644
index 597b57ae1d1356..00000000000000
Binary files a/docs/public/static/images/templates/sign-in.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
new file mode 100644
index 00000000000000..ad19c16a0de062
Binary files /dev/null and b/docs/public/static/images/templates/sign-up-dark.png differ
diff --git a/docs/public/static/images/templates/sign-up-light.png b/docs/public/static/images/templates/sign-up-light.png
new file mode 100644
index 00000000000000..514db1bcce3d1a
Binary files /dev/null and b/docs/public/static/images/templates/sign-up-light.png differ
diff --git a/docs/public/static/images/templates/sign-up.png b/docs/public/static/images/templates/sign-up.png
deleted file mode 100644
index b92eca0b42a10a..00000000000000
Binary files a/docs/public/static/images/templates/sign-up.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
new file mode 100644
index 00000000000000..276cd14a764555
Binary files /dev/null and b/docs/public/static/images/templates/sticky-footer-dark.png differ
diff --git a/docs/public/static/images/templates/sticky-footer-light.png b/docs/public/static/images/templates/sticky-footer-light.png
new file mode 100644
index 00000000000000..5a44b3e9168bfb
Binary files /dev/null and b/docs/public/static/images/templates/sticky-footer-light.png differ
diff --git a/docs/public/static/images/templates/sticky-footer.png b/docs/public/static/images/templates/sticky-footer.png
deleted file mode 100644
index 72f56aab9cc854..00000000000000
Binary files a/docs/public/static/images/templates/sticky-footer.png and /dev/null differ
diff --git a/docs/public/static/images/themes-display-dark.png b/docs/public/static/images/themes-display-dark.png
new file mode 100644
index 00000000000000..bf9e83555f2b25
Binary files /dev/null and b/docs/public/static/images/themes-display-dark.png differ
diff --git a/docs/public/static/images/themes-display-light.png b/docs/public/static/images/themes-display-light.png
new file mode 100644
index 00000000000000..4b18dd868eb00f
Binary files /dev/null and b/docs/public/static/images/themes-display-light.png differ
diff --git a/docs/public/static/images/themes-display.png b/docs/public/static/images/themes-display.png
deleted file mode 100644
index 43069c6f6855bf..00000000000000
Binary files a/docs/public/static/images/themes-display.png and /dev/null differ
diff --git a/docs/src/modules/components/MaterialFreeTemplatesCollection.js b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
index c548c841bd70fb..656bf7d01677cd 100644
--- a/docs/src/modules/components/MaterialFreeTemplatesCollection.js
+++ b/docs/src/modules/components/MaterialFreeTemplatesCollection.js
@@ -9,64 +9,66 @@ 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(t) {
+function layouts(translatation, theme) {
+  const imageSuffix = theme.palette.mode === 'dark' ? '-dark' : '-light';
   return [
     {
-      title: t('dashboardTitle'),
-      description: t('dashboardDescr'),
-      src: '/static/images/templates/dashboard.png',
+      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`,
     },
     {
-      title: t('landingPageTitle'),
-      description: t('landingPageDescr'),
-      src: '/static/images/templates/landing-page.png',
+      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`,
     },
     {
-      title: t('checkoutTitle'),
-      description: t('checkoutDescr'),
-      src: '/static/images/templates/checkout.png',
+      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`,
     },
     {
-      title: t('signInTitle'),
-      description: t('signInDescr'),
-      src: '/static/images/templates/sign-in.png',
+      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`,
     },
     {
-      title: t('signInSideTitle'),
-      description: t('signInSideDescr'),
-      src: '/static/images/templates/sign-in-side.png',
+      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`,
     },
     {
-      title: t('signUpTitle'),
-      description: t('signUpDescr'),
-      src: '/static/images/templates/sign-up.png',
+      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`,
     },
     {
-      title: t('blogTitle'),
-      description: t('blogDescr'),
-      src: '/static/images/templates/blog.png',
+      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: t('stickyFooterTitle'),
-      description: t('stickyFooterDescr'),
-      src: '/static/images/templates/sticky-footer.png',
+      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`,
     },
@@ -74,11 +76,12 @@ function layouts(t) {
 }
 
 export default function Templates() {
-  const t = useTranslate();
+  const translatation = useTranslate();
+  const theme = useTheme();
 
   return (
     <Grid container spacing={2} sx={{ py: 2 }}>
-      {layouts(t).map((layout) => (
+      {layouts(translatation, theme).map((layout) => (
         <Grid item xs={12} sm={6} key={layout.title}>
           <Card
             variant="outlined"