From 648e121e65d03beac54e6ccae3ea34fa3159e206 Mon Sep 17 00:00:00 2001 From: Lukas Date: Fri, 23 Dec 2022 08:55:58 +0200 Subject: [PATCH] [docs] Force `light` theme mode when `activePage` is null (#35575) --- docs/src/modules/components/ThemeContext.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index fba40295138215..4819ca12f831bb 100644 --- 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) => {