diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 4066cfa16bfc1c..718c9a2e882fec 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -145,7 +145,7 @@ export default class MyDocument extends Document {
           />
         </Head>
         <body>
-          {getMuiInitColorSchemeScript()}
+          {getMuiInitColorSchemeScript({ defaultMode: 'system' })}
           <Main />
           <script
             // eslint-disable-next-line react/no-danger
diff --git a/docs/src/BrandingCssVarsProvider.tsx b/docs/src/BrandingCssVarsProvider.tsx
index 0afdf2a35a3a5d..110267144b9a58 100644
--- a/docs/src/BrandingCssVarsProvider.tsx
+++ b/docs/src/BrandingCssVarsProvider.tsx
@@ -51,7 +51,7 @@ const theme = extendTheme({
 
 export default function BrandingCssVarsProvider({ children }: { children: React.ReactNode }) {
   return (
-    <CssVarsProvider theme={theme} disableTransitionOnChange>
+    <CssVarsProvider theme={theme} defaultMode="system" disableTransitionOnChange>
       <NextNProgressBar />
       <CssBaseline />
       {children}
diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx
index 5b0fe564e5ab03..b7466dd7c1ac3d 100644
--- a/docs/src/components/header/ThemeModeToggle.tsx
+++ b/docs/src/components/header/ThemeModeToggle.tsx
@@ -11,24 +11,24 @@ function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
   React.useEffect(() => {
     setMounted(true);
   }, []);
+  const calculatedMode = mode === 'system' ? systemMode : mode;
   return (
-    <Tooltip title={mode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
+    <Tooltip title={calculatedMode === 'dark' ? 'Turn on the light' : 'Turn off the light'}>
       <IconButton
         color="primary"
         disableTouchRipple
-        disabled={!mode}
+        disabled={!calculatedMode}
         onClick={() => {
-          props.onChange(mode === 'light' || systemMode === 'light');
-          setMode(mode === 'dark' ? 'light' : 'dark');
+          props.onChange(calculatedMode === 'light');
+          setMode(calculatedMode === 'dark' ? 'light' : 'dark');
         }}
       >
-        {!mode || !mounted
+        {!calculatedMode || !mounted
           ? null
           : {
               light: <DarkModeOutlined fontSize="small" />,
-              system: <DarkModeOutlined fontSize="small" />,
               dark: <LightModeOutlined fontSize="small" />,
-            }[mode]}
+            }[calculatedMode]}
       </IconButton>
     </Tooltip>
   );
