diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js
index 96d1bffa50a0ec..b551c12ca11001 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.js
@@ -2,9 +2,9 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
-import { useTheme } from '@mui/system';
+import { useColorScheme } from '@mui/material/styles';
 
-const whiteLogos = [
+const darkModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
@@ -13,7 +13,7 @@ const whiteLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
 ];
 
-const darkLogos = [
+const lightModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
@@ -30,8 +30,19 @@ const logoStyle = {
 };
 
 export default function LogoCollection() {
-  const theme = useTheme();
-  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
+  const { mode, systemMode } = useColorScheme();
+  let logos;
+  if (mode === 'system') {
+    if (systemMode === 'light') {
+      logos = lightModeLogos;
+    } else {
+      logos = darkModeLogos;
+    }
+  } else if (mode === 'light') {
+    logos = lightModeLogos;
+  } else {
+    logos = darkModeLogos;
+  }
 
   return (
     <Box id="logoCollection" sx={{ py: 4 }}>
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx
index 96d1bffa50a0ec..b551c12ca11001 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/LogoCollection.tsx
@@ -2,9 +2,9 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
-import { useTheme } from '@mui/system';
+import { useColorScheme } from '@mui/material/styles';
 
-const whiteLogos = [
+const darkModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
@@ -13,7 +13,7 @@ const whiteLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
 ];
 
-const darkLogos = [
+const lightModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
@@ -30,8 +30,19 @@ const logoStyle = {
 };
 
 export default function LogoCollection() {
-  const theme = useTheme();
-  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
+  const { mode, systemMode } = useColorScheme();
+  let logos;
+  if (mode === 'system') {
+    if (systemMode === 'light') {
+      logos = lightModeLogos;
+    } else {
+      logos = darkModeLogos;
+    }
+  } else if (mode === 'light') {
+    logos = lightModeLogos;
+  } else {
+    logos = darkModeLogos;
+  }
 
   return (
     <Box id="logoCollection" sx={{ py: 4 }}>
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js
index a236c9aab6ae38..cef5cd74c7b6a3 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.js
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
-import { useTheme } from '@mui/system';
+import { useColorScheme } from '@mui/material/styles';
 
 const userTestimonials = [
   {
@@ -54,7 +54,7 @@ const userTestimonials = [
   },
 ];
 
-const whiteLogos = [
+const darkModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
@@ -63,7 +63,7 @@ const whiteLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
 ];
 
-const darkLogos = [
+const lightModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
@@ -78,8 +78,20 @@ const logoStyle = {
 };
 
 export default function Testimonials() {
-  const theme = useTheme();
-  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
+  const { mode, systemMode } = useColorScheme();
+
+  let logos;
+  if (mode === 'system') {
+    if (systemMode === 'light') {
+      logos = lightModeLogos;
+    } else {
+      logos = darkModeLogos;
+    }
+  } else if (mode === 'light') {
+    logos = lightModeLogos;
+  } else {
+    logos = darkModeLogos;
+  }
 
   return (
     <Container
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx
index a236c9aab6ae38..cef5cd74c7b6a3 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/Testimonials.tsx
@@ -7,7 +7,7 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
-import { useTheme } from '@mui/system';
+import { useColorScheme } from '@mui/material/styles';
 
 const userTestimonials = [
   {
@@ -54,7 +54,7 @@ const userTestimonials = [
   },
 ];
 
-const whiteLogos = [
+const darkModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628e8573c43893fe0ace_Sydney-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d520d0517ae8e8ddf13_Bern-white.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f46794c159024c1af6d44_Montreal-white.svg',
@@ -63,7 +63,7 @@ const whiteLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f5caa77bf7d69fb78792e_Ankara-white.svg',
 ];
 
-const darkLogos = [
+const lightModeLogos = [
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/6560628889c3bdf1129952dc_Sydney-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f4d4d8b829a89976a419c_Bern-black.svg',
   'https://assets-global.website-files.com/61ed56ae9da9fd7e0ef0a967/655f467502f091ccb929529d_Montreal-black.svg',
@@ -78,8 +78,20 @@ const logoStyle = {
 };
 
 export default function Testimonials() {
-  const theme = useTheme();
-  const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;
+  const { mode, systemMode } = useColorScheme();
+
+  let logos;
+  if (mode === 'system') {
+    if (systemMode === 'light') {
+      logos = lightModeLogos;
+    } else {
+      logos = darkModeLogos;
+    }
+  } else if (mode === 'light') {
+    logos = lightModeLogos;
+  } else {
+    logos = darkModeLogos;
+  }
 
   return (
     <Container