[docs] Force light theme mode when activePage is null (#35575)

mui · Dec 23, 2022 · 648e121 · 648e121
1 parent 68ef353
commit 648e121
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -13,6 +13,7 @@ import {
  getThemedComponents,
  getMetaThemeColor,
 } from 'docs/src/modules/brandingTheme';
+import PageContext from './PageContext';
 
 const languageMap = {
  en: enUS,
@@ -115,7 +116,10 @@ if (process.env.NODE_ENV !== 'production') {
 export function ThemeProvider(props) {
  const { children } = props;
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
- const preferredMode = prefersDarkMode ? 'dark' : 'light';
+ const pageContextValue = React.useContext(PageContext);
+ // `activePage` does not exist for playground pages
+ // forcing light mode in playground avoids the need for a wrapping theme in playground pages
+ const preferredMode = pageContextValue.activePage && prefersDarkMode ? 'dark' : 'light';
 
  const [themeOptions, dispatch] = React.useReducer(
  (state, action) => {