@mui/material 6.0.0-beta.2 → 6.0.0-beta.3

package/node/styles/extendTheme.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createGetCssVar = void 0;
 exports.default = extendTheme;
+var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _system = require("@mui/system");
 var _spacing = require("@mui/system/spacing");
@@ -76,65 +77,103 @@ const silent = fn => {
 };
 const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
 exports.createGetCssVar = createGetCssVar;
+function getOpacity(mode) {
+  return {
+    inputPlaceholder: mode === 'dark' ? 0.5 : 0.42,
+    inputUnderline: mode === 'dark' ? 0.7 : 0.42,
+    switchTrackDisabled: mode === 'dark' ? 0.2 : 0.12,
+    switchTrack: mode === 'dark' ? 0.3 : 0.38
+  };
+}
+function getOverlays(mode) {
+  return mode === 'dark' ? defaultDarkOverlays : [];
+}
+function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
+  var _scheme, _scheme2, _scheme3;
+  if (!scheme) {
+    return undefined;
+  }
+  scheme = scheme === true ? {} : scheme;
+  const mode = colorScheme === 'dark' ? 'dark' : 'light';
+  const {
+    palette,
+    ...muiTheme
+  } = (0, _createTheme.default)({
+    ...restTheme,
+    palette: {
+      mode,
+      ...((_scheme = scheme) == null ? void 0 : _scheme.palette)
+    }
+  });
+  colorSchemes[colorScheme] = {
+    ...scheme,
+    palette,
+    opacity: {
+      ...getOpacity(mode),
+      ...((_scheme2 = scheme) == null ? void 0 : _scheme2.opacity)
+    },
+    overlays: ((_scheme3 = scheme) == null ? void 0 : _scheme3.overlays) || getOverlays(mode)
+  };
+  return muiTheme;
+}
+
+/**
+ * A default `extendTheme` comes with a single color scheme, either `light` or `dark` based on the `defaultColorScheme`.
+ * This is better suited for apps that only need a single color scheme.
+ *
+ * To enable built-in `light` and `dark` color schemes, either:
+ * 1. provide a `colorSchemeSelector` to define how the color schemes will change.
+ * 2. provide `colorSchemes.dark` will set `colorSchemeSelector: 'media'` by default.
+ */
 function extendTheme(options = {}, ...args) {
-  var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
   const {
-    colorSchemes: colorSchemesInput = {},
+    colorSchemes: colorSchemesInput = {
+      light: true
+    },
+    defaultColorScheme: defaultColorSchemeInput,
+    disableCssColorScheme = false,
     cssVarPrefix = 'mui',
     shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
-    getSelector,
+    colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
     ...input
   } = options;
+  const firstColorScheme = Object.keys(colorSchemesInput)[0];
+  const defaultColorScheme = defaultColorSchemeInput || (colorSchemesInput.light && firstColorScheme !== 'light' ? 'light' : firstColorScheme);
   const getCssVar = createGetCssVar(cssVarPrefix);
   const {
-    palette: lightPalette,
-    ...muiTheme
-  } = (0, _createTheme.default)({
-    ...input,
-    ...(colorSchemesInput.light && {
-      palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
-    })
-  });
-  const {
-    palette: darkPalette
-  } = (0, _createTheme.default)({
-    palette: {
-      mode: 'dark',
-      ...((_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
-    }
-  });
+    [defaultColorScheme]: defaultSchemeInput,
+    light: builtInLight,
+    dark: builtInDark,
+    ...customColorSchemes
+  } = colorSchemesInput;
+  const colorSchemes = {
+    ...customColorSchemes
+  };
+  let defaultScheme = defaultSchemeInput;
+
+  // For built-in light and dark color schemes, ensure that the value is valid if they are the default color scheme.
+  if (defaultColorScheme === 'dark' && !('dark' in colorSchemesInput) || defaultColorScheme === 'light' && !('light' in colorSchemesInput)) {
+    defaultScheme = true;
+  }
+  if (!defaultScheme) {
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The provided \`colorSchemes.${defaultColorScheme}\` to the \`extendTheme\` function is either missing or invalid.` : (0, _formatMuiErrorMessage2.default)(23, defaultColorScheme));
+  }
+
+  // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
+  const muiTheme = attachColorScheme(colorSchemes, defaultScheme, input, defaultColorScheme);
+  if (builtInLight && !colorSchemes.light) {
+    attachColorScheme(colorSchemes, builtInLight, undefined, 'light');
+  }
+  if (builtInDark && !colorSchemes.dark) {
+    attachColorScheme(colorSchemes, builtInDark, undefined, 'dark');
+  }
   let theme = {
-    defaultColorScheme: 'light',
+    defaultColorScheme,
     ...muiTheme,
     cssVarPrefix,
+    colorSchemeSelector: selector,
     getCssVar,
-    colorSchemes: {
-      ...colorSchemesInput,
-      light: {
-        ...colorSchemesInput.light,
-        palette: lightPalette,
-        opacity: {
-          inputPlaceholder: 0.42,
-          inputUnderline: 0.42,
-          switchTrackDisabled: 0.12,
-          switchTrack: 0.38,
-          ...((_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity)
-        },
-        overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
-      },
-      dark: {
-        ...colorSchemesInput.dark,
-        palette: darkPalette,
-        opacity: {
-          inputPlaceholder: 0.5,
-          inputUnderline: 0.7,
-          switchTrackDisabled: 0.2,
-          switchTrack: 0.3,
-          ...((_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity)
-        },
-        overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
-      }
-    },
+    colorSchemes,
     font: {
       ...(0, _cssVars.prepareTypographyVars)(muiTheme.typography),
       ...muiTheme.font
@@ -151,17 +190,18 @@ function extendTheme(options = {}, ...args) {
     };
 
     // attach black & white channels to common node
-    if (key === 'light') {
+    if (palette.mode === 'light') {
       setColor(palette.common, 'background', '#fff');
       setColor(palette.common, 'onBackground', '#000');
-    } else {
+    }
+    if (palette.mode === 'dark') {
       setColor(palette.common, 'background', '#000');
       setColor(palette.common, 'onBackground', '#fff');
     }
 
     // assign component variables
     assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
-    if (key === 'light') {
+    if (palette.mode === 'light') {
       setColor(palette.Alert, 'errorColor', (0, _colorManipulator.private_safeDarken)(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', (0, _colorManipulator.private_safeDarken)(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', (0, _colorManipulator.private_safeDarken)(palette.success.light, 0.6));
@@ -170,10 +210,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
       setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-main'));
-      setColor(palette.Alert, 'errorFilledColor', silent(() => lightPalette.getContrastText(palette.error.main)));
-      setColor(palette.Alert, 'infoFilledColor', silent(() => lightPalette.getContrastText(palette.info.main)));
-      setColor(palette.Alert, 'successFilledColor', silent(() => lightPalette.getContrastText(palette.success.main)));
-      setColor(palette.Alert, 'warningFilledColor', silent(() => lightPalette.getContrastText(palette.warning.main)));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => palette.getContrastText(palette.error.main)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.main)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.main)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.main)));
       setColor(palette.Alert, 'errorStandardBg', (0, _colorManipulator.private_safeLighten)(palette.error.light, 0.9));
       setColor(palette.Alert, 'infoStandardBg', (0, _colorManipulator.private_safeLighten)(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', (0, _colorManipulator.private_safeLighten)(palette.success.light, 0.9));
@@ -207,7 +247,7 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Slider, 'warningTrack', (0, _colorManipulator.private_safeLighten)(palette.warning.main, 0.62));
       const snackbarContentBackground = (0, _colorManipulator.private_safeEmphasize)(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => lightPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _colorManipulator.private_safeEmphasize)(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
@@ -221,7 +261,8 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Switch, 'warningDisabledColor', (0, _colorManipulator.private_safeLighten)(palette.warning.main, 0.62));
       setColor(palette.TableCell, 'border', (0, _colorManipulator.private_safeLighten)((0, _colorManipulator.private_safeAlpha)(palette.divider, 1), 0.88));
       setColor(palette.Tooltip, 'bg', (0, _colorManipulator.private_safeAlpha)(palette.grey[700], 0.92));
-    } else {
+    }
+    if (palette.mode === 'dark') {
       setColor(palette.Alert, 'errorColor', (0, _colorManipulator.private_safeLighten)(palette.error.light, 0.6));
       setColor(palette.Alert, 'infoColor', (0, _colorManipulator.private_safeLighten)(palette.info.light, 0.6));
       setColor(palette.Alert, 'successColor', (0, _colorManipulator.private_safeLighten)(palette.success.light, 0.6));
@@ -230,10 +271,10 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
       setColor(palette.Alert, 'warningFilledBg', setCssVarColor('palette-warning-dark'));
-      setColor(palette.Alert, 'errorFilledColor', silent(() => darkPalette.getContrastText(palette.error.dark)));
-      setColor(palette.Alert, 'infoFilledColor', silent(() => darkPalette.getContrastText(palette.info.dark)));
-      setColor(palette.Alert, 'successFilledColor', silent(() => darkPalette.getContrastText(palette.success.dark)));
-      setColor(palette.Alert, 'warningFilledColor', silent(() => darkPalette.getContrastText(palette.warning.dark)));
+      setColor(palette.Alert, 'errorFilledColor', silent(() => palette.getContrastText(palette.error.dark)));
+      setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.dark)));
+      setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.dark)));
+      setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.dark)));
       setColor(palette.Alert, 'errorStandardBg', (0, _colorManipulator.private_safeDarken)(palette.error.light, 0.9));
       setColor(palette.Alert, 'infoStandardBg', (0, _colorManipulator.private_safeDarken)(palette.info.light, 0.9));
       setColor(palette.Alert, 'successStandardBg', (0, _colorManipulator.private_safeDarken)(palette.success.light, 0.9));
@@ -269,7 +310,7 @@ function extendTheme(options = {}, ...args) {
       setColor(palette.Slider, 'warningTrack', (0, _colorManipulator.private_safeDarken)(palette.warning.main, 0.5));
       const snackbarContentBackground = (0, _colorManipulator.private_safeEmphasize)(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => darkPalette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _colorManipulator.private_safeEmphasize)(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
@@ -332,16 +373,15 @@ function extendTheme(options = {}, ...args) {
   theme = args.reduce((acc, argument) => (0, _deepmerge.default)(acc, argument), theme);
   const parserConfig = {
     prefix: cssVarPrefix,
+    disableCssColorScheme,
     shouldSkipGeneratingVar,
-    getSelector: getSelector || (0, _createGetSelector.default)(theme)
+    getSelector: (0, _createGetSelector.default)(theme)
   };
   const {
     vars,
     generateThemeVars,
     generateStyleSheets
   } = (0, _cssVars.prepareCssVars)(theme, parserConfig);
-  theme.attribute = 'data-mui-color-scheme';
-  theme.colorSchemeSelector = ':root';
   theme.vars = vars;
   Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
     theme[key] = value;
@@ -351,7 +391,7 @@ function extendTheme(options = {}, ...args) {
   theme.generateSpacing = function generateSpacing() {
     return (0, _system.createSpacing)(input.spacing, (0, _spacing.createUnarySpacing)(this));
   };
-  theme.getColorSchemeSelector = colorScheme => `[${theme.attribute}="${colorScheme}"] &`;
+  theme.getColorSchemeSelector = (0, _cssVars.createGetColorSchemeSelector)(selector);
   theme.spacing = theme.generateSpacing();
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
   theme.unstable_sxConfig = {

package/node/styles/shouldSkipGeneratingVar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = shouldSkipGeneratingVar;
 function shouldSkipGeneratingVar(keys) {
   var _keys$;
-  return !!keys[0].match(/(cssVarPrefix|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
 }

package/node/utils/getChildRef.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getChildRef;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function getChildRef(child) {
+  if (!child || ! /*#__PURE__*/React.isValidElement(child)) {
+    return null;
+  }
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in React 18
+  // below check is to ensure 'ref' is accessible in both cases
+  return child.props.propertyIsEnumerable('ref') ? child.props.ref : child.ref;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.0-beta.2",
+  "version": "6.0.0-beta.3",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.0.0-beta.2",
-    "@mui/utils": "6.0.0-beta.1",
-    "@mui/system": "6.0.0-beta.1",
-    "@mui/types": "^7.2.14"
+    "@mui/system": "6.0.0-beta.3",
+    "@mui/core-downloads-tracker": "^6.0.0-beta.3",
+    "@mui/types": "^7.2.14",
+    "@mui/utils": "6.0.0-beta.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "@mui/material-pigment-css": "^6.0.0-beta.1"
+    "@mui/material-pigment-css": "^6.0.0-beta.3"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/CssVarsProvider.d.ts

@@ -4,15 +4,16 @@ declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@
     theme?: {
         cssVarPrefix?: string | undefined;
         colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+        colorSchemeSelector?: string | undefined;
     } | {
         $$material: {
             cssVarPrefix?: string | undefined;
             colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+            colorSchemeSelector?: string | undefined;
         };
     } | undefined;
     documentNode?: Document | null | undefined;
     colorSchemeNode?: Element | null | undefined;
-    colorSchemeSelector?: string | undefined;
     storageWindow?: Window | null | undefined;
     disableNestedContext?: boolean | undefined;
     disableStyleSheetGeneration?: boolean | undefined;

package/styles/CssVarsProvider.js

@@ -16,7 +16,6 @@ const {
 } = createCssVarsProvider({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: defaultConfig.attribute,
   colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
   modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {

package/styles/createGetSelector.d.ts

@@ -1,10 +1,14 @@
 declare const _default: <T extends {
-    attribute: string;
-    colorSchemeSelector: string;
+    colorSchemeSelector?: string | undefined;
     colorSchemes?: Record<string, any> | undefined;
     defaultColorScheme?: string | undefined;
     cssVarPrefix?: string | undefined;
 }>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
+    ':root': Record<string, any>;
+    '@media (prefers-color-scheme: dark) { :root': Record<string, any>;
+} | {
     [x: string]: Record<string, any>;
+    ':root': Record<string, any>;
+    '@media (prefers-color-scheme: dark) { :root'?: undefined;
 };
 export default _default;

package/styles/createGetSelector.js

@@ -1,5 +1,17 @@
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 export default (theme => (colorScheme, css) => {
+  const selector = theme.colorSchemeSelector;
+  let rule = selector;
+  if (selector === 'class') {
+    rule = '.%s';
+  }
+  if (selector === 'data') {
+    rule = '[data-%s]';
+  }
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
+    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+    rule = `[${selector}="%s"]`;
+  }
   if (theme.defaultColorScheme === colorScheme) {
     if (colorScheme === 'dark') {
       const excludedVariables = {};
@@ -7,15 +19,32 @@ export default (theme => (colorScheme, css) => {
         excludedVariables[cssVar] = css[cssVar];
         delete css[cssVar];
       });
+      if (rule === 'media') {
+        return {
+          ':root': css,
+          '@media (prefers-color-scheme: dark) { :root': excludedVariables
+        };
+      }
+      if (rule) {
+        return {
+          [rule.replace('%s', colorScheme)]: excludedVariables,
+          ':root': css
+        };
+      }
       return {
-        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
-        [theme.colorSchemeSelector]: css
+        ':root': {
+          ...css,
+          ...excludedVariables
+        }
       };
     }
-    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
-  }
-  if (colorScheme) {
-    return `[${theme.attribute}="${String(colorScheme)}"]`;
+  } else if (colorScheme) {
+    if (rule === 'media') {
+      return `@media (prefers-color-scheme: ${String(colorScheme)}) { :root`;
+    }
+    if (rule) {
+      return rule.replace('%s', String(colorScheme));
+    }
   }
-  return theme.colorSchemeSelector;
+  return ':root';
 });

package/styles/excludeVariablesFromRoot.d.ts

@@ -1,5 +1,5 @@
 /**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
 declare const excludeVariablesFromRoot: (cssVarPrefix?: string) => string[];
 export default excludeVariablesFromRoot;

package/styles/excludeVariablesFromRoot.js

@@ -1,5 +1,5 @@
 /**
- * @internal These variables should not appear in the :root stylesheet when the `defaultMode="dark"`
+ * @internal These variables should not appear in the :root stylesheet when the `defaultColorScheme="dark"`
  */
 const excludeVariablesFromRoot = cssVarPrefix => [...[...Array(24)].map((_, index) => `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}overlays-${index + 1}`), `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkBg`, `--${cssVarPrefix ? `${cssVarPrefix}-` : ''}palette-AppBar-darkColor`];
 export default excludeVariablesFromRoot;

package/styles/extendTheme.d.ts

@@ -276,6 +276,10 @@ export interface ColorSystem {
 }
 
 export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  /**
+   * @default 'light'
+   */
+  defaultColorScheme?: SupportedColorScheme;
   /**
    * Prefix of the generated CSS variables
    * @default 'mui'
@@ -288,27 +292,27 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
   /**
    * Color schemes configuration
    */
-  colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+  colorSchemes?: Partial<Record<DefaultColorScheme, boolean | ColorSystemOptions>> &
+    (ExtendedColorScheme extends string ? Record<ExtendedColorScheme, ColorSystemOptions> : {});
   /**
-   * If provided, it will be used to create a selector for the color scheme.
-   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   * The strategy to generate CSS variables
    *
-   * The callback receives the colorScheme with the possible values of:
-   * - undefined: the selector for tokens that are not color scheme dependent
-   * - string: the selector for the color scheme
+   * @example 'media'
+   * Generate CSS variables using [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
    *
-   * @example
-   * // class selector
-   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   * @example '.mode-%s'
+   * Generate CSS variables within a class .mode-light, .mode-dark
    *
-   * @example
-   * // data-* attribute selector
-   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   * @example '[data-mode-%s]'
+   * Generate CSS variables within a data attribute [data-mode-light], [data-mode-dark]
+   */
+  colorSchemeSelector?: 'media' | 'class' | 'data' | string;
+  /**
+   * If `true`, the CSS color-scheme will not be set.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+   * @default false
    */
-  getSelector?: (
-    colorScheme: SupportedColorScheme | undefined,
-    css: Record<string, any>,
-  ) => string | Record<string, any>;
+  disableCssColorScheme?: boolean;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.
@@ -427,6 +431,7 @@ export type ThemeCssVar = OverridableStringUnion<
  */
 export interface CssVarsTheme extends ColorSystem {
   colorSchemes: Record<SupportedColorScheme, ColorSystem>;
+  colorSchemeSelector: 'media' | 'class' | 'data' | string;
   cssVarPrefix: string;
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;