[system] Fix mode blink when open multiple sessions

packages/mui-system/src/cssVars/createCssVarsProvider.test.js

@@ -611,7 +611,6 @@ describe('createCssVarsProvider', () => {
       );
 
       expect(screen.getByTestId('current-mode').textContent).to.equal('dark');
-      expect(global.localStorage.setItem.calledWith(customModeStorageKey, 'dark')).to.equal(true);
     });
 
     it('support custom storage window', () => {

packages/mui-system/src/cssVars/useCurrentColorScheme.ts

@@ -90,13 +90,17 @@ export function getColorScheme<SupportedColorScheme extends string>(
   });
 }
 
-function resolveValue(key: string, defaultValue?: string) {
+function initializeValue(key: string, defaultValue: string) {
   if (typeof window === 'undefined') {
     return undefined;
   }
   let value;
   try {
     value = localStorage.getItem(key) || undefined;
+    if (!value) {
+      // the first time that user enters the site.
+      localStorage.setItem(key, defaultValue);
+    }
   } catch (e) {
     // Unsupported
   }
@@ -129,12 +133,20 @@ export default function useCurrentColorScheme<SupportedColorScheme extends strin
   const joinedColorSchemes = supportedColorSchemes.join(',');
 
   const [state, setState] = React.useState(() => {
-    const initialMode = resolveValue(modeStorageKey, defaultMode);
+    const initialMode = initializeValue(modeStorageKey, defaultMode);
+    const lightColorScheme = initializeValue(
+      `${colorSchemeStorageKey}-light`,
+      defaultLightColorScheme,
+    );
+    const darkColorScheme = initializeValue(
+      `${colorSchemeStorageKey}-dark`,
+      defaultDarkColorScheme,
+    );
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
-      lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
-      darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme,
+      lightColorScheme,
+      darkColorScheme,
     } as State<SupportedColorScheme>;
   });
 
@@ -243,21 +255,6 @@ export default function useCurrentColorScheme<SupportedColorScheme extends strin
     return () => media.removeListener(handler);
   }, []);
 
-  // Save mode, lightColorScheme & darkColorScheme to localStorage
-  React.useEffect(() => {
-    if (state.mode) {
-      localStorage.setItem(modeStorageKey, state.mode);
-    }
-    processState(state, (mode) => {
-      if (mode === 'light') {
-        localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
-      }
-      if (mode === 'dark') {
-        localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-      }
-    });
-  }, [state, colorSchemeStorageKey, modeStorageKey]);
-
   // Handle when localStorage has changed
   React.useEffect(() => {
     const handleStorage = (event: StorageEvent) => {

test/regressions/fixtures/CssVarsProvider/ColorSchemeSelector.js

@@ -15,12 +15,13 @@ const { CssVarsProvider } = createCssVarsProvider({
   },
   defaultColorScheme: {
     light: 'light',
+    dark: 'dark',
   },
 });
 
-export default function DarkModeSpecificity() {
+export default function ColorSchemeSelector() {
   return (
-    <CssVarsProvider modeStorageKey="dark-mode-specificity">
+    <CssVarsProvider>
       <Box
         sx={(theme) => ({
           p: 2,

test/regressions/fixtures/CssVarsProvider/DarkModeSpecificity.js

@@ -33,7 +33,7 @@ const DarkMode = () => {
 
 export default function DarkModeSpecificity() {
   return (
-    <CssVarsProvider modeStorageKey="dark-mode-specificity">
+    <CssVarsProvider>
       <DarkMode />
       <div style={{ background: 'var(--background-default)', color: '#888', padding: '1rem' }}>
         Background should be #000.

test/regressions/fixtures/CssVarsProvider/ForceColorSchemes.js

@@ -22,9 +22,9 @@ const { CssVarsProvider } = createCssVarsProvider({
   },
 });
 
-export default function DarkModeSpecificity() {
+export default function ForceColorSchemes() {
   return (
-    <CssVarsProvider modeStorageKey="force-color-schemes">
+    <CssVarsProvider>
       <div
         data-color-scheme="dark"
         style={{

test/regressions/index.test.js

@@ -77,6 +77,12 @@ async function main() {
   await fse.emptyDir(screenshotDir);
 
   describe('visual regressions', () => {
+    beforeEach(async () => {
+      await page.evaluate(() => {
+        localStorage.clear();
+      });
+    });
+
     after(async () => {
       await browser.close();
     });