[CssVarsProvider][Material UI] Exclude dark mode variables from :root stylesheet

packages/mui-material/src/styles/CssVarsProvider.tsx

@@ -1,6 +1,7 @@
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import experimental_extendTheme, { SupportedColorScheme } from './experimental_extendTheme';
 import createTypography from './createTypography';
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 
 const shouldSkipGeneratingVar = (keys: string[]) =>
   !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) ||
@@ -27,6 +28,7 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } =
       return newTheme;
     },
     shouldSkipGeneratingVar,
+    excludeVariablesFromRoot,
   });
 
 export {

packages/mui-material/src/styles/excludeVariablesFromRoot.test.ts

@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+
+describe('excludeVariablesFromRoot', () => {
+  it('should return true', () => {
+    [...Array(25)].forEach((_, index) => {
+      if (index !== 0) {
+        expect(excludeVariablesFromRoot(`--mui-overlays-${index}`)).to.equal(true);
+      }
+    });
+    expect(excludeVariablesFromRoot(`--mui-palette-AppBar-darkBg`)).to.equal(true);
+    expect(excludeVariablesFromRoot(`--mui-palette-AppBar-darkColor`)).to.equal(true);
+  });
+
+  it('should return true for custom prefix', () => {
+    [...Array(25)].forEach((_, index) => {
+      if (index !== 0) {
+        expect(excludeVariablesFromRoot(`--foo-bar-overlays-${index}`)).to.equal(true);
+      }
+    });
+    expect(excludeVariablesFromRoot(`--foo-bar-palette-AppBar-darkBg`)).to.equal(true);
+    expect(excludeVariablesFromRoot(`--foo-bar-palette-AppBar-darkColor`)).to.equal(true);
+  });
+});

packages/mui-material/src/styles/excludeVariablesFromRoot.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ */
+const excludeVariablesFromRoot = (cssVar: string) =>
+  !!cssVar.match(/(overlays-[0-9]|palette-AppBar-darkBg|palette-AppBar-darkColor)/);
+
+export default excludeVariablesFromRoot;

packages/mui-system/src/cssVars/createCssVarsProvider.d.ts

@@ -124,6 +124,14 @@ export default function createCssVarsProvider<ColorScheme extends string>(
      * variants from those tokens.
      */
     resolveTheme?: (theme: any) => any; // the type is any because it depends on the design system.
+    /**
+     * @internal
+     * If the function return `true`, the variable is excluded from the `colorSchemeSelector` (:root by default)
+     *
+     * Some variables are intended to be used in a specific color scheme only. They should be excluded when the default mode is set to the color scheme.
+     * This is introduced to fix https://github.com/mui/material-ui/issues/34084
+     */
+    excludeVariablesFromRoot?: (cssVar: string) => boolean;
   },
 ): CreateCssVarsProviderResult<ColorScheme>;
 

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

@@ -27,6 +27,7 @@ export default function createCssVarsProvider(options) {
     enableColorScheme: designSystemEnableColorScheme = true,
     shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar,
     resolveTheme,
+    excludeVariablesFromRoot,
   } = options;
 
   if (
@@ -156,7 +157,19 @@ export default function createCssVarsProvider(options) {
         return defaultColorScheme.light;
       })();
       if (key === resolvedDefaultColorScheme) {
+        const excludedVariables = {};
+        if (excludeVariablesFromRoot) {
+          Object.keys(css).forEach((cssVar) => {
+            if (excludeVariablesFromRoot(cssVar)) {
+              excludedVariables[cssVar] = css[cssVar];
+              delete css[cssVar];
+            }
+          });
+        }
         defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
+        if (excludeVariablesFromRoot) {
+          defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables;
+        }
       } else {
         otherColorSchemesStyleSheet[
           `${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`

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

@@ -125,7 +125,7 @@ export default function cssVarsParser<T extends Record<string, any>>(
   },
 ) {
   const { prefix, shouldSkipGeneratingVar } = options || {};
-  const css = {} as NestedRecord<string>;
+  const css = {} as Record<string, string | number>;
   const vars = {} as NestedRecord<string>;
   const parsedTheme = {} as T;