diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 2beefe68e9be37..dc51e174cac900 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -141,14 +141,19 @@ export default function createCssVarsProvider(options) { React.useEffect(() => { if (!mode || !enableColorScheme) { - return; + return undefined; } + const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark` if (mode === 'system') { document.documentElement.style.setProperty('color-scheme', systemMode); } else { document.documentElement.style.setProperty('color-scheme', mode); } + + return () => { + document.documentElement.style.setProperty('color-scheme', priorColorScheme); + }; }, [mode, systemMode]); React.useEffect(() => { diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js index 9f61f91436d36c..1553600ef935e9 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -245,7 +245,7 @@ describe('createCssVarsProvider', () => { }); describe('[option]: `enableColorScheme`', () => { - it('set `color-scheme` property to body with correct mode, given `enableColorScheme` is true and `mode` is `light` or `dark`', () => { + it('set `color-scheme` property on with correct mode, given `enableColorScheme` is true and `mode` is `light` or `dark`', () => { const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ theme: { colorSchemes: { light: {}, dark: {} }, @@ -273,7 +273,7 @@ describe('createCssVarsProvider', () => { }); }); - it('set `color-scheme` property to body with correct mode, given `enableColorScheme` is true and mode is `system`', () => { + it('set `color-scheme` property on with correct mode, given `enableColorScheme` is true and mode is `system`', () => { window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark' const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ @@ -303,10 +303,8 @@ describe('createCssVarsProvider', () => { }); }); - it('does not set `color-scheme` property to body with correct mode, given`enableColorScheme` is false', () => { - // TODO: Previous tests are leaking. - // `color-scheme` should be `'normal'` but prior tests retain their `color-scheme`. - const priorColorScheme = window + it('does not set `color-scheme` property on with correct mode, given`enableColorScheme` is false', () => { + const currentColorScheme = window .getComputedStyle(document.documentElement) .getPropertyValue('color-scheme'); const { CssVarsProvider } = createCssVarsProvider({ @@ -324,7 +322,27 @@ describe('createCssVarsProvider', () => { , ); expect(document.documentElement).toHaveComputedStyle({ - colorScheme: shouldSupportColorScheme ? priorColorScheme : '', + colorScheme: shouldSupportColorScheme ? currentColorScheme : '', + }); + }); + + it('cleans up `color-scheme` property on , given`enableColorScheme` is true', () => { + const previousColorScheme = window + .getComputedStyle(document.documentElement) + .getPropertyValue('color-scheme'); + const { CssVarsProvider } = createCssVarsProvider({ + theme: { + colorSchemes: { light: {}, dark: {} }, + }, + defaultColorScheme: 'light', + enableColorScheme: true, + }); + const { unmount } = render(); + + unmount(); + + expect(document.documentElement).toHaveComputedStyle({ + colorScheme: previousColorScheme, }); }); });