diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index 90cd0733dd72a7..3f6d742bbc8a17 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,9 +1,9 @@
-'use client';
 // do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
 /* eslint-disable @typescript-eslint/no-unused-vars */
 // @ts-ignore
 import * as React from 'react';
-import { unstable_createCssVarsProvider as createCssVarsProvider, SxProps } from '@mui/system';
+import { SxProps } from '@mui/system';
+import createCssVarsProvider from '@mui/system/cssVars';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import experimental_extendTheme, {
   SupportedColorScheme,
@@ -12,18 +12,19 @@ import experimental_extendTheme, {
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
+import { CONSTANT } from './getInitColorSchemeScript';
 
 const defaultTheme = experimental_extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
+const { CssVarsProvider, useColorScheme } = createCssVarsProvider<
   SupportedColorScheme,
   typeof THEME_ID
 >({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
+  attribute: CONSTANT.ATTRIBUTE,
+  modeStorageKey: CONSTANT.MODE_KEY,
+  colorSchemeStorageKey: CONSTANT.COLOR_SCHEME_KEY,
   defaultColorScheme: {
     light: 'light',
     dark: 'dark',
@@ -46,8 +47,4 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
   excludeVariablesFromRoot,
 });
 
-export {
-  useColorScheme,
-  getInitColorSchemeScript,
-  CssVarsProvider as Experimental_CssVarsProvider,
-};
+export { useColorScheme, CssVarsProvider as Experimental_CssVarsProvider };
diff --git a/packages/mui-material/src/styles/defaultTheme.js b/packages/mui-material/src/styles/defaultTheme.js
index 094155f2e31e4a..aa830ab16354db 100644
--- a/packages/mui-material/src/styles/defaultTheme.js
+++ b/packages/mui-material/src/styles/defaultTheme.js
@@ -1,4 +1,3 @@
-'use client';
 import createTheme from './createTheme';
 
 const defaultTheme = createTheme();
diff --git a/packages/mui-material/src/styles/getInitColorSchemeScript.ts b/packages/mui-material/src/styles/getInitColorSchemeScript.ts
new file mode 100644
index 00000000000000..61e0557774b60d
--- /dev/null
+++ b/packages/mui-material/src/styles/getInitColorSchemeScript.ts
@@ -0,0 +1,29 @@
+// do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// @ts-ignore
+import * as React from 'react';
+import { getInitColorSchemeScript as systemGetInitColorSchemeScript } from '@mui/system/cssVars';
+
+const ATTRIBUTE = 'data-mui-color-scheme';
+const MODE_KEY = 'mui-mode';
+const COLOR_SCHEME_KEY = 'mui-color-scheme';
+
+export const CONSTANT = {
+  ATTRIBUTE,
+  MODE_KEY,
+  COLOR_SCHEME_KEY,
+};
+
+export default function getInitColorSchemeScript(
+  ...params: Parameters<typeof systemGetInitColorSchemeScript>
+) {
+  return systemGetInitColorSchemeScript({
+    attribute: ATTRIBUTE,
+    colorSchemeStorageKey: COLOR_SCHEME_KEY,
+    defaultMode: 'light',
+    defaultLightColorScheme: 'light',
+    defaultDarkColorScheme: 'dark',
+    modeStorageKey: MODE_KEY,
+    ...params,
+  });
+}
diff --git a/packages/mui-material/src/styles/index.d.ts b/packages/mui-material/src/styles/index.d.ts
index 234aed07d592ce..594cd9341558ce 100644
--- a/packages/mui-material/src/styles/index.d.ts
+++ b/packages/mui-material/src/styles/index.d.ts
@@ -98,6 +98,7 @@ export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
 export * from './CssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export type {
diff --git a/packages/mui-material/src/styles/index.js b/packages/mui-material/src/styles/index.js
index 34ea0230b89a82..ec4566db351e55 100644
--- a/packages/mui-material/src/styles/index.js
+++ b/packages/mui-material/src/styles/index.js
@@ -1,4 +1,3 @@
-'use client';
 import MuiError from '@mui-internal/babel-macros/MuiError.macro';
 
 export { default as THEME_ID } from './identifier';
@@ -45,6 +44,7 @@ export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
 export * from './CssVarsProvider';
+export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';