@mui/system 5.0.6 → 5.2.1

package/cssVars/createCssVarsProvider.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { Result, Mode } from './useCurrentColorScheme';
 
-type PartialDeep<T> = {
-  [K in keyof T]?: PartialDeep<T[K]>;
+type RequiredDeep<T> = {
+  [K in keyof T]-?: RequiredDeep<T[K]>;
 };
 
 export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
-  colorSchemes: Record<string, infer Colors>;
+  colorSchemes: Record<string, infer ColorSystems>;
 }
-  ? Omit<ThemeInput, 'colorSchemes'> & { vars: Omit<ThemeInput, 'colorSchemes'> & Colors }
+  ? Omit<ThemeInput, 'colorSchemes'> &
+      ColorSystems & { vars: Omit<ThemeInput, 'colorSchemes'> & ColorSystems }
   : never;
 
 /**
@@ -18,59 +20,107 @@ export type BuildCssVarsTheme<ThemeInput> = ThemeInput extends {
  * If yes, they must provide the palette of the extended colorScheme. Otherwise `theme` is optional.
  */
 type DecideTheme<
-  Theme extends { colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any> },
+  DesignSystemTheme extends { colorSchemes: Record<DesignSystemColorScheme, any> },
   DesignSystemColorScheme extends string,
+  ApplicationTheme extends { colorSchemes: Record<ApplicationColorScheme, any> },
   ApplicationColorScheme extends string | never,
 > = [ApplicationColorScheme] extends [never]
-  ? { theme?: PartialDeep<Theme> }
+  ? { theme?: DesignSystemTheme }
   : {
-      theme: PartialDeep<Omit<Theme, 'colorSchemes'>> & {
-        colorSchemes: PartialDeep<
-          Record<DesignSystemColorScheme, Theme['colorSchemes'][DesignSystemColorScheme]>
+      theme: Omit<ApplicationTheme, 'colorSchemes'> & {
+        colorSchemes: Partial<
+          Record<
+            DesignSystemColorScheme,
+            DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
+          >
         > &
-          Record<ApplicationColorScheme, Theme['colorSchemes'][ApplicationColorScheme]>;
+          RequiredDeep<
+            Record<ApplicationColorScheme, ApplicationTheme['colorSchemes'][ApplicationColorScheme]>
+          >;
       };
     };
 
-export interface ColorSchemeContextValue<DesignSystemColorScheme extends string> {
-  allColorSchemes: DesignSystemColorScheme[];
-  colorScheme: DesignSystemColorScheme | undefined;
-  setColorScheme: React.Dispatch<React.SetStateAction<DesignSystemColorScheme | undefined>>;
+export interface ColorSchemeContextValue<SupportedColorScheme extends string>
+  extends Result<SupportedColorScheme> {
+  allColorSchemes: SupportedColorScheme[];
 }
 
 export default function createCssVarsProvider<
-  ThemeInput extends {
-    colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>;
+  DesignSystemThemeInput extends {
+    colorSchemes: Record<DesignSystemColorScheme, any>;
   },
   DesignSystemColorScheme extends string,
+  ApplicationThemeInput extends {
+    colorSchemes: Record<ApplicationColorScheme, any>;
+  } = never,
   ApplicationColorScheme extends string = never,
->(
-  ThemeContext: React.Context<BuildCssVarsTheme<ThemeInput> | undefined>,
-  options: {
-    theme: Omit<ThemeInput, 'colorSchemes'> & {
-      colorSchemes: Record<
-        DesignSystemColorScheme,
-        ThemeInput['colorSchemes'][DesignSystemColorScheme]
-      > &
-        Partial<
-          Record<
-            ApplicationColorScheme,
-            ThemeInput['colorSchemes'][DesignSystemColorScheme | ApplicationColorScheme]
-          >
-        >;
-    };
-    defaultColorScheme: DesignSystemColorScheme;
-    prefix?: string;
-  },
-): {
+>(options: {
+  /**
+   * Design system default theme
+   */
+  theme: DesignSystemThemeInput;
+  /**
+   * Design system default color scheme
+   */
+  defaultColorScheme:
+    | DesignSystemColorScheme
+    | { light: DesignSystemColorScheme; dark: DesignSystemColorScheme };
+  /**
+   * Design system default mode
+   * @default 'light'
+   */
+  defaultMode?: Mode;
+  /**
+   * CSS variable prefix
+   * @default ''
+   */
+  prefix?: string;
+  /**
+   * A function to determine if the key, value should be attached as CSS Variable
+   * `keys` is an array that represents the object path keys.
+   *  Ex, if the theme is { foo: { bar: 'var(--test)' } }
+   *  then, keys = ['foo', 'bar']
+   *        value = 'var(--test)'
+   */
+  shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+}): {
   CssVarsProvider: (
     props: React.PropsWithChildren<
       {
-        defaultColorScheme?: DesignSystemColorScheme | ApplicationColorScheme;
-        storageKey?: string;
+        /**
+         * Application default mode (overrides design system `defaultMode` if specified)
+         */
+        defaultMode?: Mode;
+        /**
+         * Application default colorScheme (overrides design system `defaultColorScheme` if specified)
+         */
+        defaultColorScheme?:
+          | DesignSystemColorScheme
+          | ApplicationColorScheme
+          | {
+              light: DesignSystemColorScheme | ApplicationColorScheme;
+              dark: DesignSystemColorScheme | ApplicationColorScheme;
+            };
+        /**
+         * localStorage key used to store application `mode`
+         * @default 'mui-mode'
+         */
+        modeStorageKey?: string;
+        /**
+         * DOM attribute for applying color scheme
+         * @default 'data-mui-color-scheme'
+         */
         attribute?: string;
+        /**
+         * CSS variable prefix (overrides design system `prefix` if specified)
+         */
         prefix?: string;
-      } & DecideTheme<ThemeInput, DesignSystemColorScheme, ApplicationColorScheme>
+      } & DecideTheme<
+        DesignSystemThemeInput,
+        DesignSystemColorScheme,
+        ApplicationThemeInput,
+        ApplicationColorScheme
+      >
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<DesignSystemColorScheme | ApplicationColorScheme>;

package/cssVars/createCssVarsProvider.js

@@ -21,8 +21,12 @@ var _styledEngine = require("@mui/styled-engine");
 
 var _cssVarsParser = _interopRequireDefault(require("./cssVarsParser"));
 
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+
 var _getInitColorSchemeScript = _interopRequireWildcard(require("./getInitColorSchemeScript"));
 
+var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["colorSchemes"],
@@ -32,33 +36,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const resolveMode = (key, fallback, supportedColorSchemes) => {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-
-  let value;
-
-  try {
-    value = localStorage.getItem(key) || undefined;
-
-    if (!supportedColorSchemes.includes(value)) {
-      value = undefined;
-    }
-  } catch (e) {// Unsupported
-  }
-
-  return value || fallback;
-};
-
-function createCssVarsProvider(ThemeContext, options) {
+function createCssVarsProvider(options) {
   const {
     theme: baseTheme = {},
+    defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
-    prefix: designSystemPrefix = ''
+    prefix: designSystemPrefix = '',
+    shouldSkipGeneratingVar
   } = options;
 
-  if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
+  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
 
@@ -78,8 +65,9 @@ function createCssVarsProvider(ThemeContext, options) {
     children,
     theme: themeProp = {},
     prefix = designSystemPrefix,
-    storageKey = _getInitColorSchemeScript.DEFAULT_STORAGE_KEY,
+    modeStorageKey = _getInitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
     attribute = _getInitColorSchemeScript.DEFAULT_ATTRIBUTE,
+    defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
     const {
@@ -93,16 +81,47 @@ function createCssVarsProvider(ThemeContext, options) {
     let mergedTheme = (0, _utils.deepmerge)(restBaseTheme, restThemeProp);
     const colorSchemes = (0, _utils.deepmerge)(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
-    const joinedColorSchemes = allColorSchemes.join(',');
-    const [colorScheme, setColorScheme] = React.useState(() => resolveMode(storageKey, defaultColorScheme, allColorSchemes));
-    const resolvedColorScheme = colorScheme || defaultColorScheme;
+    const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
+    const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
+    const {
+      mode,
+      setMode,
+      lightColorScheme,
+      darkColorScheme,
+      colorScheme,
+      setColorScheme
+    } = (0, _useCurrentColorScheme.default)({
+      supportedColorSchemes: allColorSchemes,
+      defaultLightColorScheme,
+      defaultDarkColorScheme,
+      modeStorageKey,
+      defaultMode
+    });
+
+    const resolvedColorScheme = (() => {
+      if (!colorScheme) {
+        // This scope occurs on the server
+        if (defaultMode === 'dark') {
+          return defaultDarkColorScheme;
+        } // use light color scheme, if default mode is 'light' | 'auto'
+
+
+        return defaultLightColorScheme;
+      }
+
+      return colorScheme;
+    })();
+
     const {
       css: rootCss,
       vars: rootVars
     } = (0, _cssVarsParser.default)(mergedTheme, {
-      prefix
+      prefix,
+      basePrefix: designSystemPrefix,
+      shouldSkipGeneratingVar
     });
     mergedTheme = (0, _extends2.default)({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      colorSchemes,
       vars: rootVars
     });
     const styleSheet = {};
@@ -111,15 +130,26 @@ function createCssVarsProvider(ThemeContext, options) {
         css,
         vars
       } = (0, _cssVarsParser.default)(scheme, {
-        prefix
+        prefix,
+        basePrefix: designSystemPrefix,
+        shouldSkipGeneratingVar
       });
+      mergedTheme.vars = (0, _utils.deepmerge)(mergedTheme.vars, vars);
 
-      if (key === resolvedColorScheme) {
-        mergedTheme.vars = (0, _extends2.default)({}, mergedTheme.vars, vars);
-      }
+      const resolvedDefaultColorScheme = (() => {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
 
-      if (key === defaultColorScheme) {
-        styleSheet[':root'] = (0, _utils.deepmerge)(rootCss, css);
+        return defaultColorScheme.light;
+      })();
+
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
       } else {
         styleSheet[`[${attribute}="${key}"]`] = css;
       }
@@ -127,41 +157,26 @@ function createCssVarsProvider(ThemeContext, options) {
     React.useEffect(() => {
       if (colorScheme) {
         document.body.setAttribute(attribute, colorScheme);
-        localStorage.setItem(storageKey, colorScheme);
-      }
-    }, [colorScheme, attribute, storageKey]); // local storage modified in the context of another document
-
-    React.useEffect(() => {
-      const handleStorage = event => {
-        const storageColorScheme = event.newValue;
-
-        if (event.key === storageKey && joinedColorSchemes.match(storageColorScheme)) {
-          if (storageColorScheme) {
-            setColorScheme(storageColorScheme);
-          }
-        }
-      };
-
-      window.addEventListener('storage', handleStorage);
-      return () => window.removeEventListener('storage', handleStorage);
-    }, [setColorScheme, storageKey, joinedColorSchemes]);
-    const wrappedSetColorScheme = React.useCallback(val => {
-      if (typeof val === 'string' && !allColorSchemes.includes(val)) {
-        console.error(`\`${val}\` does not exist in \`theme.colorSchemes\`.`);
-      } else {
-        setColorScheme(val);
       }
-    }, [setColorScheme, allColorSchemes]);
+    }, [colorScheme, attribute]);
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ColorSchemeContext.Provider, {
       value: {
+        mode,
+        setMode,
+        lightColorScheme,
+        darkColorScheme,
         colorScheme,
-        setColorScheme: wrappedSetColorScheme,
+        setColorScheme,
         allColorSchemes
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+        styles: {
+          ':root': rootCss
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
         styles: styleSheet
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
-        value: mergedTheme,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+        theme: mergedTheme,
         children: children
       })]
     });
@@ -181,17 +196,22 @@ function createCssVarsProvider(ThemeContext, options) {
     /**
      * The initial color scheme used.
      */
-    defaultColorScheme: _propTypes.default.string,
+    defaultColorScheme: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
 
     /**
-     * css variable prefix
+     * The initial mode used.
      */
-    prefix: _propTypes.default.string,
+    defaultMode: _propTypes.default.string,
 
     /**
      * The key in the local storage used to store current color scheme.
      */
-    storageKey: _propTypes.default.string,
+    modeStorageKey: _propTypes.default.string,
+
+    /**
+     * css variable prefix
+     */
+    prefix: _propTypes.default.string,
 
     /**
      * The calculated theme object that will be passed through context.

package/cssVars/createCssVarsProvider.spec.d.ts

@@ -1 +1 @@
-export {};
+export {};

package/cssVars/cssVarsParser.d.ts

@@ -1,57 +1,68 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value) => void) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{ prefix?: string }} options
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
- *
- * @example
- * const { css, vars } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
- *
- * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
- * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
- */
-export default function cssVarsParser(obj: Record<string, any>, options?: {
-    prefix?: string;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+export default function cssVarsParser(theme: Record<string, any>, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+};
+export {};

package/cssVars/cssVarsParser.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,6 +9,8 @@ exports.assignNestedKeys = void 0;
 exports.default = cssVarsParser;
 exports.walkObjectDeep = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -62,7 +66,7 @@ const walkObjectDeep = (obj, callback) => {
         if (typeof value === 'object' && Object.keys(value).length > 0) {
           recurse(value, [...parentKeys, key]);
         } else {
-          callback([...parentKeys, key], value);
+          callback([...parentKeys, key], value, object);
         }
       }
     });
@@ -89,7 +93,16 @@ const getCssValue = (keys, value) => {
  * a function that parse theme and return { css, vars }
  *
  * @param {Object} theme
- * @param {{ prefix?: string }} options
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
  * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
  *
  * @example
@@ -104,19 +117,36 @@ const getCssValue = (keys, value) => {
  */
 
 
-function cssVarsParser(obj, options) {
+function cssVarsParser(theme, options) {
+  const clonedTheme = (0, _extends2.default)({}, theme);
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
   const {
-    prefix
+    prefix,
+    basePrefix = '',
+    shouldSkipGeneratingVar
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(obj, (keys, value) => {
-    if (typeof value === 'string' || typeof value === 'number') {
-      const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
-      Object.assign(css, {
-        [cssVar]: getCssValue(keys, value)
-      });
-      assignNestedKeys(vars, keys, `var(${cssVar})`);
+  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+    if (typeof val === 'string' || typeof val === 'number') {
+      let value = val;
+
+      if (typeof value === 'string' && value.startsWith('var')) {
+        // replace the value of the `scope` object with the prefix or remove basePrefix from the value
+        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+
+        scope[keys.slice(-1)[0]] = value;
+      }
+
+      if (!shouldSkipGeneratingVar || shouldSkipGeneratingVar && !shouldSkipGeneratingVar(keys, value)) {
+        // only create css & var if `shouldSkipGeneratingVar` return false
+        const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
+        Object.assign(css, {
+          [cssVar]: getCssValue(keys, value)
+        });
+        assignNestedKeys(vars, keys, `var(${cssVar})`);
+      }
     }
   });
   return {

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-export declare const DEFAULT_STORAGE_KEY = "mui-color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
-export default function getInitColorSchemeScript(options?: {
-    storageKey?: string;
-    attribute?: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
+export default function getInitColorSchemeScript(options?: {
+    enableSystem?: boolean;
+    defaultLightColorScheme?: string;
+    defaultDarkColorScheme?: string;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    attribute?: string;
+}): JSX.Element;