[blog] Fix dark mode support (#35969)

mui · Feb 4, 2023 · 163b187 · 163b187
1 parent 1dc2782
commit 163b187
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 43 deletions.
diff --git a/docs/src/modules/components/SkipLink.tsx b/docs/src/modules/components/SkipLink.tsx
@@ -6,7 +6,7 @@ import { useTranslate } from 'docs/src/modules/utils/i18n';
 const StyledLink = styled(MuiLink)(({ theme }) => ({
   position: 'fixed',
   padding: theme.spacing(1),
-  background: theme.palette.background.paper,
+  background: (theme.vars || theme).palette.background.paper,
   transition: theme.transitions.create('top', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.leavingScreen,

diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -13,7 +13,6 @@ import {
   getThemedComponents,
   getMetaThemeColor,
 } from 'docs/src/modules/brandingTheme';
-import PageContext from './PageContext';
 
 const languageMap = {
   en: enUS,
@@ -109,11 +108,8 @@ if (process.env.NODE_ENV !== 'production') {
 
 export function ThemeProvider(props) {
   const { children } = props;
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  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 prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)', { noSsr: true });
+  const preferredMode = prefersDarkMode ? 'dark' : 'light';
 
   const [themeOptions, dispatch] = React.useReducer(
     (state, action) => {
@@ -162,34 +158,41 @@ export function ThemeProvider(props) {
           throw new Error(`Unrecognized type ${action.type}`);
       }
     },
-    { ...themeInitialOptions, paletteMode: preferredMode },
+    { ...themeInitialOptions, paletteMode: 'light' },
   );
 
   const userLanguage = useUserLanguage();
   const { dense, direction, paletteColors, paletteMode, spacing } = themeOptions;
 
   useLazyCSS('/static/styles/prism-okaidia.css', '#prismjs');
 
-  React.useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
-      let nextPaletteMode = localStorage.getItem('mui-mode') || preferredMode; // syncing with homepage, can be removed once all pages are migrated to CSS variables
-      if (nextPaletteMode === 'system') {
-        nextPaletteMode = preferredMode;
-      }
-
-      dispatch({
-        type: 'CHANGE',
-        payload: { paletteColors: nextPaletteColors, paletteMode: nextPaletteMode },
-      });
+  useEnhancedEffect(() => {
+    const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
+    let nextPaletteMode = localStorage.getItem('mui-mode') || preferredMode; // syncing with homepage, can be removed once all pages are migrated to CSS variables
+    if (nextPaletteMode === 'system') {
+      nextPaletteMode = preferredMode;
     }
+
+    dispatch({
+      type: 'CHANGE',
+      payload: { paletteColors: nextPaletteColors, paletteMode: nextPaletteMode },
+    });
   }, [preferredMode]);
 
   useEnhancedEffect(() => {
     document.body.dir = direction;
   }, [direction]);
 
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
+    // To support light and dark mode images in the docs
+    if (paletteMode === 'dark') {
+      document.body.classList.remove('mode-light');
+      document.body.classList.add('mode-dark');
+    } else {
+      document.body.classList.remove('mode-dark');
+      document.body.classList.add('mode-light');
+    }
+
     const metas = document.querySelectorAll('meta[name="theme-color"]');
     metas.forEach((meta) => {
       meta.setAttribute('content', getMetaThemeColor(paletteMode));
@@ -238,23 +241,10 @@ export function ThemeProvider(props) {
 
   React.useEffect(() => {
     // Expose the theme as a global variable so people can play with it.
-    if (typeof window !== 'undefined') {
-      window.theme = theme;
-      window.createTheme = createTheme;
-    }
+    window.theme = theme;
+    window.createTheme = createTheme;
   }, [theme]);
 
-  useEnhancedEffect(() => {
-    // To support light and dark mode images in the docs
-    if (theme.palette.mode === 'dark') {
-      document.body.classList.remove('mode-light');
-      document.body.classList.add('mode-dark');
-    } else {
-      document.body.classList.remove('mode-dark');
-      document.body.classList.add('mode-light');
-    }
-  }, [theme.palette.mode]);
-
   return (
     <MuiThemeProvider theme={theme}>
       <DispatchContext.Provider value={dispatch}>{children}</DispatchContext.Provider>

diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -108,14 +108,14 @@ export default function createCssVarsProvider(options) {
     }
 
     const calculatedMode = (() => {
-      if (!mode) {
-        // This scope occurs on the server
-        if (defaultMode === 'system') {
-          return designSystemMode;
-        }
-        return defaultMode;
+      if (mode) {
+        return mode;
+      }
+      // This scope occurs on the server
+      if (defaultMode === 'system') {
+        return designSystemMode;
       }
-      return mode;
+      return defaultMode;
     })();
     const calculatedColorScheme = (() => {
       if (!colorScheme) {