diff --git a/docs/data/material/getting-started/templates/blog/Blog.js b/docs/data/material/getting-started/templates/blog/Blog.js
index 503bcf9b86e2b9..a83c67b23ce951 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.js
+++ b/docs/data/material/getting-started/templates/blog/Blog.js
@@ -48,7 +48,7 @@ export default function Blog() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <AppAppBar />
         <Container
           maxWidth="lg"
diff --git a/docs/data/material/getting-started/templates/checkout/Checkout.js b/docs/data/material/getting-started/templates/checkout/Checkout.js
index 4020d860658ff1..04e198cc97fa91 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.js
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.js
@@ -78,7 +78,7 @@ export default function Checkout() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? checkoutTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <Grid container sx={{ height: { xs: '100%', sm: '100dvh' } }}>
           <Grid
             size={{ xs: 12, sm: 5, lg: 4 }}
diff --git a/docs/data/material/getting-started/templates/dashboard/Dashboard.js b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
index 1466dbb4d15545..ee7881bb20a2e1 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.js
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.js
@@ -48,7 +48,7 @@ export default function Dashboard() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? dashboardTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <Box sx={{ display: 'flex' }}>
           <SideMenu />
           <AppNavbar />
diff --git a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
index b47bd852458432..4017861b3a17f9 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.js
@@ -53,7 +53,7 @@ export default function MarketingPage() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <AppAppBar />
         <Hero />
         <div>
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 434479bbf22623..e905157adc4a27 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,7 @@ export default function SignInSide() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? SignInSideTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <Stack
           direction="column"
           component="main"
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 c5f91f409ed25f..c7963f131aec18 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.js
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.js
@@ -137,7 +137,7 @@ export default function SignIn() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? SignInTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <SignInContainer direction="column" justifyContent="space-between">
           <Card variant="outlined">
             <SitemarkIcon />
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 7418f33db16285..dd1d788aab5982 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.js
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.js
@@ -140,7 +140,7 @@ export default function SignUp() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
         <SignUpContainer direction="column" justifyContent="space-between">
           <Stack
             sx={{