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/blog/Blog.tsx b/docs/data/material/getting-started/templates/blog/Blog.tsx
index e5acb7000a7b51..f96d669499b961 100644
--- a/docs/data/material/getting-started/templates/blog/Blog.tsx
+++ b/docs/data/material/getting-started/templates/blog/Blog.tsx
@@ -48,7 +48,7 @@ export default function Blog() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? blogTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
 
         <AppAppBar />
         <Container
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/checkout/Checkout.tsx b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
index 77ec0da872ed75..a50a6a9caaa719 100644
--- a/docs/data/material/getting-started/templates/checkout/Checkout.tsx
+++ b/docs/data/material/getting-started/templates/checkout/Checkout.tsx
@@ -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
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/dashboard/Dashboard.tsx b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
index fc3ca12e77c3ab..f8f6608011af97 100644
--- a/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
+++ b/docs/data/material/getting-started/templates/dashboard/Dashboard.tsx
@@ -53,7 +53,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/marketing-page/MarketingPage.tsx b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
index 4af5e1f2a4a6be..ba44db4f49fe37 100644
--- a/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/MarketingPage.tsx
@@ -53,7 +53,7 @@ export default function MarketingPage() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? MPTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
 
         <AppAppBar />
         <Hero />
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-side/SignInSide.tsx b/docs/data/material/getting-started/templates/sign-in-side/SignInSide.tsx
index 807265ef5da7fd..ed202630073b53 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
@@ -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-in/SignIn.tsx b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
index 12c395f0edf70e..dda0da4471c689 100644
--- a/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
+++ b/docs/data/material/getting-started/templates/sign-in/SignIn.tsx
@@ -142,7 +142,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={{
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 30604cb84e36c5..ce73b97e4438c2 100644
--- a/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
+++ b/docs/data/material/getting-started/templates/sign-up/SignUp.tsx
@@ -145,7 +145,7 @@ export default function SignUp() {
       toggleColorMode={toggleColorMode}
     >
       <ThemeProvider theme={showCustomTheme ? SignUpTheme : defaultTheme}>
-        <CssBaseline />
+        <CssBaseline enableColorScheme />
 
         <SignUpContainer direction="column" justifyContent="space-between">
           <Stack