diff --git a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
index 8f131e2f95fb48..c3dda97d7bd701 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.test.tsx
@@ -5,9 +5,11 @@ import { styled, CssVarsProvider, useTheme } from '@mui/joy/styles';
 import defaultTheme from './defaultTheme';
 
 describe('[Joy] CssVarsProvider', () => {
+  let originalMatchmedia: typeof window.matchMedia;
   const render = createClientRender();
   const storage: Record<string, string> = {};
-  before(() => {
+  beforeEach(() => {
+    originalMatchmedia = window.matchMedia;
     // Create mocks of localStorage getItem and setItem functions
     Object.defineProperty(global, 'localStorage', {
       value: {
@@ -18,6 +20,14 @@ describe('[Joy] CssVarsProvider', () => {
       },
       configurable: true,
     });
+    window.matchMedia = () =>
+      ({
+        addListener: () => {},
+        removeListener: () => {},
+      } as unknown as MediaQueryList);
+  });
+  afterEach(() => {
+    window.matchMedia = originalMatchmedia;
   });
   describe('All CSS vars', () => {
     it('palette', () => {
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx
index f006cbe1023023..fbc998a0aec8ed 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx
@@ -12,22 +12,23 @@ type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
 
 type ColorScheme = 'light';
 
-interface JoyThemeInput extends StaticTheme {
-  colorSchemes: Record<ColorScheme | ExtendedColorScheme, ColorSystems>;
-}
+type JoyThemeInput = PartialDeep<Omit<StaticTheme, 'typography'>> & {
+  colorSchemes: Record<ColorScheme, PartialDeep<ColorSystems>>;
+  typography?: Partial<StaticTheme['typography']>;
+};
 
-type ApplicationThemeInput = {
-  colorSchemes: Record<ColorScheme | ExtendedColorScheme, PartialDeep<ColorSystems>>;
+type ApplicationThemeInput = PartialDeep<Omit<StaticTheme, 'typography'>> & {
+  colorSchemes: Record<ExtendedColorScheme, ColorSystems>;
   typography?: Partial<StaticTheme['typography']>;
-} & PartialDeep<Omit<StaticTheme, 'typography'>>;
+};
 
 const { palette, ...rest } = defaultTheme;
 
 const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
   JoyThemeInput,
   ColorScheme,
-  ExtendedColorScheme,
-  ApplicationThemeInput
+  ApplicationThemeInput,
+  ExtendedColorScheme
 >({
   theme: {
     colorSchemes: {
@@ -36,7 +37,7 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
       },
     },
     ...rest,
-  } as unknown as JoyThemeInput, // prevent error from module augmentation inside the repository
+  },
   defaultColorScheme: 'light',
   prefix: 'joy',
 });
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index 28531d472c4dc7..5bd5ca0f99f586 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Result, Mode } from './useCurrentColorScheme';
 
 type RequiredDeep<T> = {
   [K in keyof T]-?: RequiredDeep<T[K]>;
@@ -19,61 +20,93 @@ 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?: Theme }
+  ? { theme?: DesignSystemTheme }
   : {
-      theme: Omit<Theme, 'colorSchemes'> & {
+      theme: Omit<ApplicationTheme, 'colorSchemes'> & {
         colorSchemes: Partial<
-          Record<DesignSystemColorScheme, Theme['colorSchemes'][DesignSystemColorScheme]>
+          Record<
+            DesignSystemColorScheme,
+            DesignSystemTheme['colorSchemes'][DesignSystemColorScheme]
+          >
         > &
           RequiredDeep<
-            Record<ApplicationColorScheme, Theme['colorSchemes'][ApplicationColorScheme]>
+            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<
   DesignSystemThemeInput extends {
-    colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>;
+    colorSchemes: Record<DesignSystemColorScheme, any>;
   },
   DesignSystemColorScheme extends string,
-  ApplicationColorScheme extends string = never,
   ApplicationThemeInput extends {
-    colorSchemes: Record<DesignSystemColorScheme | ApplicationColorScheme, any>;
-  } = DesignSystemThemeInput,
+    colorSchemes: Record<ApplicationColorScheme, any>;
+  } = never,
+  ApplicationColorScheme extends string = never,
 >(options: {
-  theme: Omit<DesignSystemThemeInput, 'colorSchemes'> & {
-    colorSchemes: Record<
-      DesignSystemColorScheme,
-      DesignSystemThemeInput['colorSchemes'][DesignSystemColorScheme]
-    > &
-      Partial<
-        Record<
-          ApplicationColorScheme,
-          DesignSystemThemeInput['colorSchemes'][DesignSystemColorScheme | ApplicationColorScheme]
-        >
-      >;
-  };
-  defaultColorScheme: DesignSystemColorScheme;
+  theme: DesignSystemThemeInput;
+  defaultColorScheme:
+    | DesignSystemColorScheme
+    | { light: DesignSystemColorScheme; dark: DesignSystemColorScheme };
+  /**
+   * Design system default mode
+   * @default 'light'
+   */
+  defaultMode?: Mode;
+  /**
+   * CSS variable prefix
+   * @default ''
+   */
   prefix?: string;
 }): {
   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<ApplicationThemeInput, DesignSystemColorScheme, ApplicationColorScheme>
+      } & DecideTheme<
+        DesignSystemThemeInput,
+        DesignSystemColorScheme,
+        ApplicationThemeInput,
+        ApplicationColorScheme
+      >
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<DesignSystemColorScheme | ApplicationColorScheme>;
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 12c7ac5eb12ebc..b54e809c06d74a 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -7,33 +7,27 @@ import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, {
   DEFAULT_ATTRIBUTE,
-  DEFAULT_STORAGE_KEY,
+  DEFAULT_MODE_STORAGE_KEY,
 } from './getInitColorSchemeScript';
-
-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;
-};
+import useCurrentColorScheme from './useCurrentColorScheme';
 
 export default function createCssVarsProvider(options) {
   const {
     theme: baseTheme = {},
+    defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
     prefix: designSystemPrefix = '',
   } = options;
 
-  if (!baseTheme.colorSchemes || !baseTheme.colorSchemes[designSystemColorScheme]) {
+  if (
+    !baseTheme.colorSchemes ||
+    (typeof designSystemColorScheme === 'string' &&
+      !baseTheme.colorSchemes[designSystemColorScheme]) ||
+    (typeof designSystemColorScheme === 'object' &&
+      !baseTheme.colorSchemes[designSystemColorScheme?.light]) ||
+    (typeof designSystemColorScheme === 'object' &&
+      !baseTheme.colorSchemes[designSystemColorScheme?.dark])
+  ) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
   }
   const ColorSchemeContext = React.createContext(undefined);
@@ -50,23 +44,42 @@ export default function createCssVarsProvider(options) {
     children,
     theme: themeProp = {},
     prefix = designSystemPrefix,
-    storageKey = DEFAULT_STORAGE_KEY,
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
+    defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme,
   }) {
     const { colorSchemes: baseColorSchemes = {}, ...restBaseTheme } = baseTheme;
     const { colorSchemes: colorSchemesProp = {}, ...restThemeProp } = themeProp;
 
     let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
-    const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
 
+    const colorSchemes = 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 } =
+      useCurrentColorScheme({
+        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 } = cssVarsParser(mergedTheme, { prefix });
 
@@ -86,8 +99,17 @@ export default function createCssVarsProvider(options) {
           ...vars,
         };
       }
-      if (key === defaultColorScheme) {
-        styleSheet[':root'] = deepmerge(rootCss, css);
+      const resolvedDefaultColorScheme = (() => {
+        if (typeof defaultColorScheme === 'string') {
+          return defaultColorScheme;
+        }
+        if (defaultMode === 'dark') {
+          return defaultColorScheme.dark;
+        }
+        return defaultColorScheme.light;
+      })();
+      if (key === resolvedDefaultColorScheme) {
+        styleSheet[':root'] = css;
       } else {
         styleSheet[`[${attribute}="${key}"]`] = css;
       }
@@ -96,43 +118,22 @@ export default function createCssVarsProvider(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 (
       <ColorSchemeContext.Provider
         value={{
+          mode,
+          setMode,
+          lightColorScheme,
+          darkColorScheme,
           colorScheme,
-          setColorScheme: wrappedSetColorScheme,
+          setColorScheme,
           allColorSchemes,
         }}
       >
+        <GlobalStyles styles={{ ':root': rootCss }} />
         <GlobalStyles styles={styleSheet} />
         <ThemeProvider theme={mergedTheme}>{children}</ThemeProvider>
       </ColorSchemeContext.Provider>
@@ -151,15 +152,19 @@ export default function createCssVarsProvider(options) {
     /**
      * The initial color scheme used.
      */
-    defaultColorScheme: PropTypes.string,
+    defaultColorScheme: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     /**
-     * css variable prefix
+     * The initial mode used.
      */
-    prefix: PropTypes.string,
+    defaultMode: PropTypes.string,
     /**
      * The key in the local storage used to store current color scheme.
      */
-    storageKey: PropTypes.string,
+    modeStorageKey: PropTypes.string,
+    /**
+     * css variable prefix
+     */
+    prefix: PropTypes.string,
     /**
      * The calculated theme object that will be passed through context.
      */
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.spec.tsx b/packages/mui-system/src/cssVars/createCssVarsProvider.spec.tsx
index d43dee6b8827fb..8fd5c6e769d22b 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.spec.tsx
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.spec.tsx
@@ -138,7 +138,13 @@ interface JoyColors {
 }
 
 interface JoyThemeInput {
-  colorSchemes: Record<JoyColorScheme | JoyExtendedColorScheme, JoyColors>;
+  colorSchemes: Record<JoyColorScheme, JoyColors>;
+  fontSize: string;
+  fontFamily: string;
+}
+
+interface ApplicationThemeInput {
+  colorSchemes: Record<JoyExtendedColorScheme, JoyColors>;
   fontSize: string;
   fontFamily: string;
 }
@@ -151,6 +157,7 @@ interface JoyColorSchemeOverrides {
 const { CssVarsProvider } = createCssVarsProvider<
   JoyThemeInput,
   JoyColorScheme,
+  ApplicationThemeInput,
   JoyExtendedColorScheme
 >({
   theme: {
@@ -226,7 +233,13 @@ interface Joy2Colors {
 }
 
 interface Joy2ThemeInput {
-  colorSchemes: Record<Joy2ColorScheme | Joy2ExtendedColorScheme, Joy2Colors>;
+  colorSchemes: Record<Joy2ColorScheme, Joy2Colors>;
+  fontSize: string;
+  fontFamily: string;
+}
+
+interface Application2ThemeInput {
+  colorSchemes: Record<Joy2ExtendedColorScheme, Joy2Colors>;
   fontSize: string;
   fontFamily: string;
 }
@@ -240,6 +253,7 @@ interface Joy2ColorSchemeOverrides {
 const { CssVarsProvider: CssVarsProvider2, useColorScheme } = createCssVarsProvider<
   Joy2ThemeInput,
   Joy2ColorScheme,
+  Application2ThemeInput,
   Joy2ExtendedColorScheme
 >({
   theme: {
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index 1a625e07c82a2a..0fb4faeba94ab0 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -3,13 +3,22 @@ import { expect } from 'chai';
 import { spy } from 'sinon';
 import { createClientRender, screen, fireEvent } from 'test/utils';
 import createCssVarsProvider from './createCssVarsProvider';
-import { DEFAULT_ATTRIBUTE, DEFAULT_STORAGE_KEY } from './getInitColorSchemeScript';
+import { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useTheme from '../useTheme';
 
 describe('createCssVarsProvider', () => {
   const render = createClientRender();
+  let originalMatchmedia;
   let storage = {};
-  before(() => {
+  const createMatchMedia = (matches) => () => ({
+    matches,
+    addListener: () => {},
+    removeListener: () => {},
+  });
+
+  beforeEach(() => {
+    originalMatchmedia = window.matchMedia;
+
     // Create mocks of localStorage getItem and setItem functions
     Object.defineProperty(global, 'localStorage', {
       value: {
@@ -20,11 +29,13 @@ describe('createCssVarsProvider', () => {
       },
       configurable: true,
     });
-  });
 
-  beforeEach(() => {
     // clear the localstorage
     storage = {};
+    window.matchMedia = createMatchMedia(false);
+  });
+  afterEach(() => {
+    window.matchMedia = originalMatchmedia;
   });
 
   describe('[Design System] CssVarsProvider', () => {
@@ -197,30 +208,34 @@ describe('createCssVarsProvider', () => {
       defaultColorScheme: 'light',
     });
     const Consumer = () => {
-      const { colorScheme, setColorScheme } = useColorScheme();
+      const { mode, setMode } = useColorScheme();
       return (
         <div>
-          <div data-testid="current-color-scheme">{colorScheme}</div>
-          <button onClick={() => setColorScheme('dark')}>change to dark</button>
+          <div data-testid="current-mode">{mode}</div>
+          <button onClick={() => setMode('dark')}>change to dark</button>
         </div>
       );
     };
-    it('should save colorScheme to localStorage', () => {
+    it('should save mode to localStorage', () => {
       render(
         <CssVarsProvider>
           <Consumer />
         </CssVarsProvider>,
       );
 
-      expect(global.localStorage.setItem.lastCall.args).to.eql([DEFAULT_STORAGE_KEY, 'light']);
+      expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'light')).to.equal(
+        true,
+      );
 
       fireEvent.click(screen.getByRole('button', { name: 'change to dark' }));
 
-      expect(global.localStorage.setItem.lastCall.args).to.eql([DEFAULT_STORAGE_KEY, 'dark']);
+      expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'dark')).to.equal(
+        true,
+      );
     });
 
-    it('should use colorScheme from localStorage if exists', () => {
-      storage[DEFAULT_STORAGE_KEY] = 'dark';
+    it('should use mode from localStorage if exists', () => {
+      storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
 
       render(
         <CssVarsProvider>
@@ -228,21 +243,21 @@ describe('createCssVarsProvider', () => {
         </CssVarsProvider>,
       );
 
-      expect(screen.getByTestId('current-color-scheme').textContent).to.equal('dark');
+      expect(screen.getByTestId('current-mode').textContent).to.equal('dark');
     });
 
-    it('use custom storageKey', () => {
-      const customStorageKey = 'foo-colorScheme';
-      storage[customStorageKey] = 'dark';
+    it('use custom modeStorageKey', () => {
+      const customModeStorageKey = 'foo-mode';
+      storage[customModeStorageKey] = 'dark';
 
       render(
-        <CssVarsProvider storageKey={customStorageKey}>
+        <CssVarsProvider modeStorageKey={customModeStorageKey}>
           <Consumer />
         </CssVarsProvider>,
       );
 
-      expect(screen.getByTestId('current-color-scheme').textContent).to.equal('dark');
-      expect(global.localStorage.setItem.lastCall.args).to.eql([customStorageKey, 'dark']);
+      expect(screen.getByTestId('current-mode').textContent).to.equal('dark');
+      expect(global.localStorage.setItem.calledWith(customModeStorageKey, 'dark')).to.equal(true);
     });
   });
 
@@ -273,7 +288,7 @@ describe('createCssVarsProvider', () => {
       return <div data-testid="color">{theme.vars.color}</div>;
     };
     it('use default color scheme if the storage value does not exist', () => {
-      storage[DEFAULT_STORAGE_KEY] = 'unknown';
+      storage[DEFAULT_MODE_STORAGE_KEY] = 'unknown';
 
       render(
         <CssVarsProvider>
@@ -407,5 +422,65 @@ describe('createCssVarsProvider', () => {
 
       expect(screen.getByTestId('text').textContent).to.equal('var(--foo-bar-fontSize)');
     });
+
+    it('`defaultMode` is specified', () => {
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
+        theme: {
+          colorSchemes: { light: {}, dark: {} },
+        },
+        defaultColorScheme: 'light',
+      });
+      const Text = () => {
+        const { mode } = useColorScheme();
+        return <div>{mode}</div>;
+      };
+      const { container } = render(
+        <CssVarsProvider defaultMode="dark">
+          <Text />
+        </CssVarsProvider>,
+      );
+      expect(container.firstChild.textContent).to.equal('dark');
+    });
+
+    it('`defaultColorScheme` is specified as string', () => {
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
+        theme: {
+          colorSchemes: { light: {} },
+        },
+        defaultColorScheme: 'light',
+      });
+      const Text = () => {
+        const { colorScheme } = useColorScheme();
+        return <div>{colorScheme}</div>;
+      };
+      const { container } = render(
+        <CssVarsProvider theme={{ colorSchemes: { paper: {} } }} defaultColorScheme="paper">
+          <Text />
+        </CssVarsProvider>,
+      );
+      expect(container.firstChild.textContent).to.equal('paper');
+    });
+
+    it('`defaultColorScheme` is specified as object', () => {
+      const { CssVarsProvider, useColorScheme } = createCssVarsProvider({
+        theme: {
+          colorSchemes: { light: {} },
+        },
+        defaultColorScheme: 'light',
+      });
+      const Text = () => {
+        const { colorScheme } = useColorScheme();
+        return <div>{colorScheme}</div>;
+      };
+      const { container } = render(
+        <CssVarsProvider
+          theme={{ colorSchemes: { paper: {} } }}
+          defaultColorScheme={{ light: 'paper' }}
+        >
+          <Text />
+        </CssVarsProvider>,
+      );
+      expect(container.firstChild.textContent).to.equal('paper');
+    });
   });
 });
diff --git a/packages/mui-system/src/cssVars/cssVarsParser.ts b/packages/mui-system/src/cssVars/cssVarsParser.ts
index 4a7142f8dd9f4c..bcdf190eaad5da 100644
--- a/packages/mui-system/src/cssVars/cssVarsParser.ts
+++ b/packages/mui-system/src/cssVars/cssVarsParser.ts
@@ -96,12 +96,16 @@ const getCssValue = (keys: string[], value: string | number) => {
  * 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 }) {
+export default function cssVarsParser(theme: Record<string, any>, options?: { prefix?: string }) {
+  const clonedTheme = { ...theme };
+
+  delete clonedTheme.vars; // remove 'vars' from the structure
+
   const { prefix } = options || {};
   const css = {} as NestedRecord<string>;
   const vars = {} as NestedRecord<string>;
 
-  walkObjectDeep(obj, (keys, value) => {
+  walkObjectDeep(clonedTheme, (keys, value) => {
     if (typeof value === 'string' || typeof value === 'number') {
       const cssVar = `--${prefix ? `${prefix}-` : ''}${keys.join('-')}`;
       Object.assign(css, { [cssVar]: getCssValue(keys, value) });
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
index 8a490c54f5e9f5..889a570da7e0e9 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -1,19 +1,47 @@
 import * as React from 'react';
 
-export const DEFAULT_STORAGE_KEY = 'mui-color-scheme';
+export const DEFAULT_MODE_STORAGE_KEY = 'mui-mode';
+export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'mui-color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-mui-color-scheme';
 
 export default function getInitColorSchemeScript(options?: {
-  storageKey?: string;
+  defaultMode?: 'light' | 'dark' | 'system';
+  defaultLightColorScheme?: string;
+  defaultDarkColorScheme?: string;
+  modeStorageKey?: string;
+  colorSchemeStorageKey?: string;
   attribute?: string;
 }) {
-  const { storageKey = DEFAULT_STORAGE_KEY, attribute = DEFAULT_ATTRIBUTE } = options || {};
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme = 'light',
+    defaultDarkColorScheme = 'dark',
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+    attribute = DEFAULT_ATTRIBUTE,
+  } = options || {};
   return (
     <script
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `(function() { try {
-        var colorScheme = localStorage.getItem('${storageKey}');
+        var mode = localStorage.getItem('${modeStorageKey}');
+        var colorScheme = '';
+        if (mode === 'system' || (!mode && ${defaultMode} === 'system')) {
+          // handle system mode
+          var mql = window.matchMedia('(prefers-color-scheme: dark)');
+          if (mql.matches) {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultLightColorScheme};
+          } else {
+            colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultDarkColorScheme};
+          }
+        }
+        if (mode === 'light') {
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-light') || ${defaultLightColorScheme};
+        }
+        if (mode === 'dark') {
+          colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || ${defaultDarkColorScheme};
+        }
         if (colorScheme) {
           document.body.setAttribute('${attribute}', colorScheme);
         }
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
new file mode 100644
index 00000000000000..4248a4a4a664f8
--- /dev/null
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -0,0 +1,628 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { createClientRender, fireEvent, act, screen } from 'test/utils';
+import {
+  DEFAULT_MODE_STORAGE_KEY,
+  DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+} from './getInitColorSchemeScript';
+import useCurrentColorScheme, { getColorScheme } from './useCurrentColorScheme';
+
+describe('useCurrentColorScheme', () => {
+  const render = createClientRender();
+  let originalMatchmedia;
+  let originalAddEventListener;
+  let storage = {};
+  let storageHandler = {};
+  let trigger;
+
+  const createMatchMedia = (matches) => () => ({
+    matches,
+    addListener: (listener) => {
+      trigger = listener;
+    },
+    removeListener: () => {},
+  });
+  before(() => {
+    originalAddEventListener = window.addEventListener;
+    window.addEventListener = (key, handler) => {
+      storageHandler[key] = handler;
+    };
+  });
+  after(() => {
+    window.addEventListener = originalAddEventListener;
+  });
+
+  beforeEach(() => {
+    originalMatchmedia = window.matchMedia;
+    // clear the localstorage
+    storage = {};
+    // Create mocks of localStorage getItem and setItem functions
+    Object.defineProperty(global, 'localStorage', {
+      value: {
+        getItem: spy((key) => storage[key]),
+        setItem: spy((key, value) => {
+          storage[key] = value;
+        }),
+      },
+      configurable: true,
+    });
+
+    storageHandler = {};
+    window.matchMedia = createMatchMedia(false);
+  });
+  afterEach(() => {
+    window.matchMedia = originalMatchmedia;
+  });
+
+  describe('getColorScheme', () => {
+    it('use lightColorScheme given mode=light', () => {
+      expect(getColorScheme({ mode: 'light', lightColorScheme: 'light' })).to.equal('light');
+    });
+
+    it('use darkColorScheme given mode=dark', () => {
+      expect(getColorScheme({ mode: 'dark', darkColorScheme: 'dark' })).to.equal('dark');
+    });
+
+    it('use lightColorScheme given mode=system, systemMode=light', () => {
+      expect(
+        getColorScheme({ mode: 'system', systemMode: 'light', lightColorScheme: 'light' }),
+      ).to.equal('light');
+    });
+
+    it('use lightColorScheme given mode=system, systemMode=dark', () => {
+      expect(
+        getColorScheme({ mode: 'system', systemMode: 'dark', darkColorScheme: 'dark' }),
+      ).to.equal('dark');
+    });
+
+    it('return undefined if no conditions are matched', () => {
+      expect(
+        getColorScheme({ mode: undefined, lightColorScheme: 'light', darkColorScheme: 'dark' }),
+      ).to.equal(undefined);
+      expect(
+        getColorScheme({ mode: 'unknown', lightColorScheme: 'light', darkColorScheme: 'dark' }),
+      ).to.equal(undefined);
+      expect(
+        getColorScheme({
+          mode: 'system',
+          systemMode: undefined,
+          lightColorScheme: 'light',
+          darkColorScheme: 'dark',
+        }),
+      ).to.equal(undefined);
+    });
+  });
+
+  describe('Client', () => {
+    it('has default mode=`light`', () => {
+      const Data = () => {
+        const data = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <div>{JSON.stringify(data)}</div>;
+      };
+      const { container } = render(<Data />);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'light',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'light',
+      });
+    });
+
+    it('defaultMode=`dark`', () => {
+      const Data = () => {
+        const data = useCurrentColorScheme({
+          defaultMode: 'dark',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <div>{JSON.stringify(data)}</div>;
+      };
+      const { container } = render(<Data />);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('defaultMode=`system`', () => {
+      const Data = () => {
+        const data = useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <div>{JSON.stringify(data)}</div>;
+      };
+      const { container } = render(<Data />);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'light',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'light',
+      });
+
+      act(() => {
+        trigger({ matches: true }); // system matches 'prefers-color-scheme: dark'
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('change to `dark` mode', () => {
+      const Data = () => {
+        const { setMode, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <button onClick={() => setMode('dark')}>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('change to `system` mode', () => {
+      window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
+      const Data = () => {
+        const { setMode, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <button onClick={() => setMode('system')}>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('reset mode', () => {
+      const Data = () => {
+        const { setMode, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return (
+          <div>
+            <div data-testid="data">{JSON.stringify(data)}</div>
+            <button data-testid="dark" onClick={() => setMode('dark')} />
+            <button data-testid="reset" onClick={() => setMode(null)} />
+          </div>
+        );
+      };
+      render(<Data />);
+
+      fireEvent.click(screen.getByTestId('dark'));
+
+      fireEvent.click(screen.getByTestId('reset'));
+
+      expect(JSON.parse(screen.getByTestId('data').textContent)).to.deep.equal({
+        mode: 'light',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'light',
+      });
+    });
+
+    it('change colorScheme when mode is `light` should change `lightColorScheme`', () => {
+      const Data = () => {
+        const { setColorScheme, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'paper', 'dark'],
+        });
+        return <button onClick={() => setColorScheme('paper')}>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'light',
+        lightColorScheme: 'paper',
+        darkColorScheme: 'dark',
+        colorScheme: 'paper',
+      });
+    });
+
+    it('change colorScheme when mode is `system` should look at systemMode', () => {
+      window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
+      const Data = () => {
+        const { setColorScheme, ...data } = useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'paper', 'dark', 'dim'],
+        });
+        return <button onClick={() => setColorScheme('dim')}>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dim',
+        colorScheme: 'dim',
+      });
+    });
+
+    it('change both light & dark color scheme at the same time', () => {
+      const Data = () => {
+        const { setColorScheme, ...data } = useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'paper', 'dark', 'dim'],
+        });
+        return (
+          <button onClick={() => setColorScheme({ light: 'paper', dark: 'dim' })}>
+            {JSON.stringify(data)}
+          </button>
+        );
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'light',
+        lightColorScheme: 'paper',
+        darkColorScheme: 'dim',
+        colorScheme: 'paper',
+      });
+
+      act(() => {
+        trigger({ matches: true }); // system matches 'prefers-color-scheme: dark'
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'dark',
+        lightColorScheme: 'paper',
+        darkColorScheme: 'dim',
+        colorScheme: 'dim',
+      });
+    });
+
+    it('reset colorScheme', () => {
+      const Data = () => {
+        const { setColorScheme, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return (
+          <div>
+            <div data-testid="data">{JSON.stringify(data)}</div>
+            <button data-testid="dark" onClick={() => setColorScheme('dark')} />
+            <button data-testid="reset" onClick={() => setColorScheme(null)} />
+          </div>
+        );
+      };
+      render(<Data />);
+
+      fireEvent.click(screen.getByTestId('dark'));
+
+      fireEvent.click(screen.getByTestId('reset'));
+
+      expect(JSON.parse(screen.getByTestId('data').textContent)).to.deep.equal({
+        mode: 'light',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'light',
+      });
+    });
+
+    it('reset light & dark colorScheme', () => {
+      const Data = () => {
+        const { setColorScheme, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark', 'light-dim', 'dark-dim'],
+        });
+        return (
+          <div>
+            <div data-testid="data">{JSON.stringify(data)}</div>
+            <button
+              data-testid="dark"
+              onClick={() => setColorScheme({ light: 'light-dim', dark: 'dark-dim' })}
+            />
+            <button
+              data-testid="reset"
+              onClick={() => setColorScheme({ light: null, dark: null })}
+            />
+          </div>
+        );
+      };
+      render(<Data />);
+
+      fireEvent.click(screen.getByTestId('dark'));
+
+      fireEvent.click(screen.getByTestId('reset'));
+
+      expect(JSON.parse(screen.getByTestId('data').textContent)).to.deep.equal({
+        mode: 'light',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'light',
+      });
+    });
+  });
+
+  describe('Storage', () => {
+    it('save dark mode', () => {
+      const Data = () => {
+        const { setMode, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return (
+          <button
+            onClick={() => {
+              setMode('dark');
+            }}
+          >
+            {JSON.stringify(data)}
+          </button>
+        );
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'dark')).to.equal(
+        true,
+      );
+    });
+
+    it('save system mode', () => {
+      const Data = () => {
+        useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return null;
+      };
+      render(<Data />);
+      expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'system')).to.equal(
+        true,
+      );
+    });
+
+    it('save lightColorScheme and darkColorScheme', () => {
+      const Data = () => {
+        const { setMode, setColorScheme, ...data } = useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark', 'dim'],
+        });
+        return (
+          <button
+            onClick={() => {
+              setMode('dark');
+              setColorScheme('dim');
+            }}
+          >
+            {JSON.stringify(data)}
+          </button>
+        );
+      };
+      const { container } = render(<Data />);
+
+      fireEvent.click(container.firstChild);
+
+      expect(global.localStorage.setItem.calledWith(DEFAULT_MODE_STORAGE_KEY, 'dark')).to.equal(
+        true,
+      );
+      expect(
+        global.localStorage.setItem.calledWith(`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`, 'dim'),
+      ).to.equal(true);
+    });
+
+    it('use mode from localStorage if exists', () => {
+      storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
+      const Data = () => {
+        const { setMode, setColorScheme, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <div>{JSON.stringify(data)}</div>;
+      };
+      const { container } = render(<Data />);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('use mode & colorScheme from localStorage if exists', () => {
+      storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
+      storage[`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`] = 'dim';
+      const Data = () => {
+        const { setMode, setColorScheme, ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark', 'dim'],
+        });
+        return <div>{JSON.stringify(data)}</div>;
+      };
+      const { container } = render(<Data />);
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dim',
+        colorScheme: 'dim',
+      });
+    });
+
+    it('storage mode changes from `light` to `dark`', () => {
+      const Data = () => {
+        const { ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <button>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      act(() => {
+        storageHandler.storage?.({ key: DEFAULT_MODE_STORAGE_KEY, newValue: 'dark' });
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('storage mode changes from `light` to `auto`', () => {
+      window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark'
+      const Data = () => {
+        const { ...data } = useCurrentColorScheme({
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <button>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      act(() => {
+        storageHandler.storage?.({ key: DEFAULT_MODE_STORAGE_KEY, newValue: 'system' });
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'dark',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'dark',
+      });
+    });
+
+    it('storage mode is deleted', () => {
+      storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
+      const Data = () => {
+        const { ...data } = useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark'],
+        });
+        return <button>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      act(() => {
+        storageHandler.storage?.({ key: DEFAULT_MODE_STORAGE_KEY, newValue: null });
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'light',
+        lightColorScheme: 'light',
+        darkColorScheme: 'dark',
+        colorScheme: 'light',
+      });
+    });
+
+    it('storage lightColorScheme & darkColorScheme changes', () => {
+      const Data = () => {
+        const { ...data } = useCurrentColorScheme({
+          defaultMode: 'system',
+          defaultLightColorScheme: 'light',
+          defaultDarkColorScheme: 'dark',
+          supportedColorSchemes: ['light', 'dark', 'light-dim', 'dark-dim'],
+        });
+        return <button>{JSON.stringify(data)}</button>;
+      };
+      const { container } = render(<Data />);
+
+      act(() => {
+        storageHandler.storage?.({
+          key: `${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-light`,
+          newValue: 'light-dim',
+        });
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'light',
+        lightColorScheme: 'light-dim',
+        darkColorScheme: 'dark',
+        colorScheme: 'light-dim',
+      });
+
+      act(() => {
+        storageHandler.storage?.({
+          key: `${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`,
+          newValue: 'dark-dim',
+        });
+      });
+
+      act(() => {
+        trigger({ matches: true });
+      });
+
+      expect(JSON.parse(container.firstChild.textContent)).to.deep.equal({
+        mode: 'system',
+        systemMode: 'dark',
+        lightColorScheme: 'light-dim',
+        darkColorScheme: 'dark-dim',
+        colorScheme: 'dark-dim',
+      });
+    });
+  });
+});
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
new file mode 100644
index 00000000000000..4a94bfcd633abb
--- /dev/null
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
@@ -0,0 +1,290 @@
+import * as React from 'react';
+import {
+  DEFAULT_MODE_STORAGE_KEY,
+  DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+} from './getInitColorSchemeScript';
+
+export type Mode = 'light' | 'dark' | 'system';
+export type SystemMode = Exclude<Mode, 'system'>;
+
+export interface State<SupportedColorScheme extends string> {
+  /**
+   * User selected mode.
+   * Note: on the server, mode is always undefined
+   */
+  mode: Mode | undefined;
+  /**
+   * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+   */
+  systemMode: SystemMode | undefined;
+  /**
+   * The color scheme for the light mode.
+   */
+  lightColorScheme: SupportedColorScheme;
+  /**
+   * The color scheme for the dark mode.
+   */
+  darkColorScheme: SupportedColorScheme;
+}
+
+export type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+  /**
+   * The current application color scheme. It is always `undefined` on the server.
+   */
+  colorScheme: SupportedColorScheme | undefined;
+  /**
+   * `mode` is saved to internal state and localStorage
+   * If `mode` is null, it will be reset to the defaultMode
+   */
+  setMode: (mode: Mode | null) => void;
+  /**
+   * `colorScheme` is saved to internal state and localStorage
+   * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+   */
+  setColorScheme: (
+    colorScheme:
+      | SupportedColorScheme
+      | Partial<{
+          light: SupportedColorScheme | null;
+          dark: SupportedColorScheme | null;
+        }>
+      | null,
+  ) => void;
+};
+
+export function getSystemMode(mode: undefined | string): SystemMode | undefined {
+  if (typeof window !== 'undefined' && mode === 'system') {
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mql.matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+  return undefined;
+}
+
+function processState<T>(
+  state: { mode: Mode | undefined; systemMode: SystemMode | undefined },
+  callback: (mode: SystemMode) => T,
+) {
+  if (state.mode === 'light' || (state.mode === 'system' && state.systemMode === 'light')) {
+    return callback('light');
+  }
+  if (state.mode === 'dark' || (state.mode === 'system' && state.systemMode === 'dark')) {
+    return callback('dark');
+  }
+  return undefined;
+}
+
+export function getColorScheme<SupportedColorScheme extends string>(
+  state: State<SupportedColorScheme>,
+) {
+  return processState(state, (mode) => {
+    if (mode === 'light') {
+      return state.lightColorScheme;
+    }
+    if (mode === 'dark') {
+      return state.darkColorScheme;
+    }
+    return undefined;
+  });
+}
+
+function resolveValue(key: string, defaultValue?: string) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  let value;
+  try {
+    value = localStorage.getItem(key) || undefined;
+  } catch (e) {
+    // Unsupported
+  }
+  return value || defaultValue;
+}
+
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
+  defaultLightColorScheme: SupportedColorScheme;
+  defaultDarkColorScheme: SupportedColorScheme;
+  supportedColorSchemes: Array<SupportedColorScheme>;
+  defaultMode?: Mode;
+  modeStorageKey?: string;
+  colorSchemeStorageKey?: string;
+}): Result<SupportedColorScheme> {
+  const {
+    defaultMode = 'light',
+    defaultLightColorScheme,
+    defaultDarkColorScheme,
+    supportedColorSchemes = [],
+    modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
+    colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
+  } = options;
+
+  const joinedColorSchemes = supportedColorSchemes.join(',');
+
+  const [state, setState] = React.useState(() => {
+    const initialMode = resolveValue(modeStorageKey, defaultMode);
+    return {
+      mode: initialMode,
+      systemMode: getSystemMode(initialMode),
+      lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
+      darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme,
+    } as State<SupportedColorScheme>;
+  });
+
+  const colorScheme = getColorScheme(state);
+
+  const setMode: Result<SupportedColorScheme>['setMode'] = React.useCallback(
+    (mode) => {
+      setState((currentState) => {
+        const newMode = !mode ? defaultMode : mode;
+        if (typeof localStorage !== 'undefined') {
+          localStorage.setItem(modeStorageKey, newMode);
+        }
+        return {
+          ...currentState,
+          mode: newMode,
+          systemMode: getSystemMode(newMode),
+        };
+      });
+    },
+    [modeStorageKey, defaultMode],
+  );
+
+  const setColorScheme: Result<SupportedColorScheme>['setColorScheme'] = React.useCallback(
+    (value) => {
+      if (!value || typeof value === 'string') {
+        if (value && !supportedColorSchemes.includes(value)) {
+          console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+        } else {
+          setState((currentState) => {
+            const newState = { ...currentState };
+            if (!value) {
+              // reset to default color scheme
+              newState.lightColorScheme = defaultLightColorScheme;
+              newState.darkColorScheme = defaultDarkColorScheme;
+              return newState;
+            }
+            processState(currentState, (mode) => {
+              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
+              if (mode === 'light') {
+                newState.lightColorScheme = value;
+              }
+              if (mode === 'dark') {
+                newState.darkColorScheme = value;
+              }
+            });
+            return newState;
+          });
+        }
+      } else if (
+        (value.light && !supportedColorSchemes.includes(value.light)) ||
+        (value.dark && !supportedColorSchemes.includes(value.dark))
+      ) {
+        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
+      } else {
+        setState((currentState) => {
+          const newState = { ...currentState };
+          if (value.light || value.light === null) {
+            newState.lightColorScheme =
+              value.light === null ? defaultLightColorScheme : value.light;
+          }
+          if (value.dark || value.dark === null) {
+            newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+          }
+          return newState;
+        });
+        if (value.light) {
+          localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+        }
+        if (value.dark) {
+          localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
+        }
+      }
+    },
+    [colorSchemeStorageKey, supportedColorSchemes, defaultLightColorScheme, defaultDarkColorScheme],
+  );
+
+  const handleMediaQuery = React.useCallback(
+    (e?) => {
+      if (state.mode === 'system') {
+        setState((currentState) => ({
+          ...currentState,
+          systemMode: e.matches ? 'dark' : 'light',
+        }));
+      }
+    },
+    [state.mode],
+  );
+
+  // Ref hack to avoid adding handleMediaQuery as a dep
+  const mediaListener = React.useRef(handleMediaQuery);
+  mediaListener.current = handleMediaQuery;
+
+  React.useEffect(() => {
+    const handler = (...args: any) => mediaListener.current(...args);
+
+    // Always listen to System preference
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // Intentionally use deprecated listener methods to support iOS & old browsers
+    media.addListener(handler);
+    handler(media);
+
+    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) => {
+      const value = event.newValue;
+      if (
+        typeof event.key === 'string' &&
+        event.key.startsWith(colorSchemeStorageKey) &&
+        (!value || joinedColorSchemes.match(value))
+      ) {
+        // If the key is deleted, value will be null then reset color scheme to the default one.
+        if (event.key.endsWith('light')) {
+          setColorScheme({ light: value as SupportedColorScheme | null });
+        }
+        if (event.key.endsWith('dark')) {
+          setColorScheme({ dark: value as SupportedColorScheme | null });
+        }
+      }
+      if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+        setMode((value as Mode) || defaultMode);
+      }
+    };
+    window.addEventListener('storage', handleStorage);
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [
+    setColorScheme,
+    setMode,
+    modeStorageKey,
+    colorSchemeStorageKey,
+    joinedColorSchemes,
+    defaultMode,
+  ]);
+
+  return {
+    ...state,
+    colorScheme,
+    setMode,
+    setColorScheme,
+  };
+}