diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
index 285f5634485137..6a0b4b875f663f 100644
--- a/docs/src/modules/components/MarkdownDocs.js
+++ b/docs/src/modules/components/MarkdownDocs.js
@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useTheme } from '@mui/system';
 import { exactProp } from '@mui/utils';
-import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles';
+import {
+  CssVarsProvider as JoyCssVarsProvider,
+  useColorScheme as useJoyColorScheme,
+} from '@mui/joy/styles';
+import {
+  Experimental_CssVarsProvider as MuiCssVarsProvider,
+  useColorScheme as useMuiColorScheme,
+} from '@mui/material/styles';
 import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs';
@@ -12,7 +19,7 @@ import BrandingProvider from 'docs/src/BrandingProvider';
 import Ad from 'docs/src/modules/components/Ad';
 import AdGuest from 'docs/src/modules/components/AdGuest';
 
-function JoyModeObserver({ mode }) {
+function ModeObserver({ mode, useColorScheme }) {
   const { setMode } = useColorScheme();
   React.useEffect(() => {
     setMode(mode);
@@ -20,8 +27,9 @@ function JoyModeObserver({ mode }) {
   return null;
 }
 
-JoyModeObserver.propTypes = {
+ModeObserver.propTypes = {
   mode: PropTypes.oneOf(['light', 'dark']),
+  useColorScheme: PropTypes.func,
 };
 
 export default function MarkdownDocs(props) {
@@ -46,10 +54,22 @@ export default function MarkdownDocs(props) {
   const localizedDoc = docs[userLanguage] || docs.en;
 
   const isJoy = canonicalAs.startsWith('/joy-ui/') && !disableCssVarsProvider;
-  const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment;
-  const Wrapper = isJoy ? BrandingProvider : React.Fragment;
+  const isMui = canonicalAs.startsWith('/material-ui/') && !disableCssVarsProvider;
+  let CssVarsProvider = React.Fragment;
+  let useColorScheme;
+  if (isJoy) {
+    CssVarsProvider = JoyCssVarsProvider;
+    useColorScheme = useJoyColorScheme;
+  }
+
+  if (isMui) {
+    CssVarsProvider = MuiCssVarsProvider;
+    useColorScheme = useMuiColorScheme;
+  }
+
+  const Wrapper = isJoy || isMui ? BrandingProvider : React.Fragment;
   const wrapperProps = {
-    ...(isJoy && { mode: theme.palette.mode }),
+    ...((isJoy || isMui) && { mode: theme.palette.mode }),
   };
 
   return (
@@ -69,7 +89,9 @@ export default function MarkdownDocs(props) {
         </BrandingProvider>
       )}
       <CssVarsProvider>
-        {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
+        {(isJoy || isMui) && (
+          <ModeObserver mode={theme.palette.mode} useColorScheme={useColorScheme} />
+        )}
         {localizedDoc.rendered.map((renderedMarkdownOrDemo, index) => (
           <RichMarkdownElement
             key={`demos-section-${index}`}