From 82d72402a7f0ae4357ab8dc99885a07d164b256b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 15 May 2024 09:13:22 -0400
Subject: [PATCH 01/21] add InitColorSchemeScript

---
 .../src/styles/CssVarsProvider.tsx            | 47 +++++++++----------
 .../src/cssVars/createCssVarsProvider.d.ts    |  3 ++
 .../src/cssVars/createCssVarsProvider.js      |  6 ++-
 .../src/cssVars/getInitColorSchemeScript.tsx  |  5 ++
 4 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index e7779777a3094c..473e543c36eb72 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -14,35 +14,34 @@ import THEME_ID from './identifier';
 
 const defaultTheme = experimental_extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
-  SupportedColorScheme,
-  typeof THEME_ID
->({
-  themeId: THEME_ID,
-  theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
-  defaultColorScheme: {
-    light: 'light',
-    dark: 'dark',
-  },
-  resolveTheme: (theme) => {
-    const newTheme = {
-      ...theme,
-      typography: createTypography(theme.palette, theme.typography),
-    };
+const { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript } =
+  createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
+    themeId: THEME_ID,
+    theme: defaultTheme,
+    attribute: 'data-mui-color-scheme',
+    modeStorageKey: 'mui-mode',
+    colorSchemeStorageKey: 'mui-color-scheme',
+    defaultColorScheme: {
+      light: 'light',
+      dark: 'dark',
+    },
+    resolveTheme: (theme) => {
+      const newTheme = {
+        ...theme,
+        typography: createTypography(theme.palette, theme.typography),
+      };
 
-    newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
-      return styleFunctionSx({ sx: props, theme: this });
-    };
+      newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
+        return styleFunctionSx({ sx: props, theme: this });
+      };
 
-    return newTheme;
-  },
-});
+      return newTheme;
+    },
+  });
 
 export {
   useColorScheme,
   getInitColorSchemeScript,
   CssVarsProvider as Experimental_CssVarsProvider,
+  InitColorSchemeScript,
 };
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index b8dc3ff9a2d703..ca1c88caee85bf 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -93,6 +93,9 @@ export interface CreateCssVarsProviderResult<
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  InitColorSchemeScript: (
+    props: Parameters<typeof getInitColorSchemeScript>[0],
+  ) => React.ReactElement;
 }
 
 export default function createCssVarsProvider<
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 22f781020af1a5..36137054fae962 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -368,5 +368,9 @@ export default function createCssVarsProvider(options) {
       ...params,
     });
 
-  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
+  const InitColorSchemeScript = React.memo(function InitColorSchemeScript(props) {
+    return getInitColorSchemeScript(props);
+  });
+
+  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript };
 }
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
index d392ddbc8d053d..5094225f71dea9 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -40,6 +40,8 @@ export interface GetInitColorSchemeScriptOptions {
    * @default 'data-color-scheme'
    */
   attribute?: string;
+  /** Nonce string to pass to the inline script for CSP headers */
+  nonce?: string | undefined;
 }
 
 export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
@@ -51,10 +53,13 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
+    nonce,
   } = options || {};
   return (
     <script
       key="mui-color-scheme-init"
+      suppressHydrationWarning
+      nonce={typeof window === 'undefined' ? nonce : ''}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `(function() {

From 38de969710662832a2109e2502505921fca36768 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 17 May 2024 10:22:38 -0400
Subject: [PATCH 02/21] Revert "add InitColorSchemeScript"

This reverts commit 82d72402a7f0ae4357ab8dc99885a07d164b256b.
---
 .../src/styles/CssVarsProvider.tsx            | 47 ++++++++++---------
 .../src/cssVars/createCssVarsProvider.d.ts    |  3 --
 .../src/cssVars/createCssVarsProvider.js      |  6 +--
 .../src/cssVars/getInitColorSchemeScript.tsx  |  5 --
 4 files changed, 25 insertions(+), 36 deletions(-)

diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index 473e543c36eb72..e7779777a3094c 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -14,34 +14,35 @@ import THEME_ID from './identifier';
 
 const defaultTheme = experimental_extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript } =
-  createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
-    themeId: THEME_ID,
-    theme: defaultTheme,
-    attribute: 'data-mui-color-scheme',
-    modeStorageKey: 'mui-mode',
-    colorSchemeStorageKey: 'mui-color-scheme',
-    defaultColorScheme: {
-      light: 'light',
-      dark: 'dark',
-    },
-    resolveTheme: (theme) => {
-      const newTheme = {
-        ...theme,
-        typography: createTypography(theme.palette, theme.typography),
-      };
+const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
+  SupportedColorScheme,
+  typeof THEME_ID
+>({
+  themeId: THEME_ID,
+  theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark',
+  },
+  resolveTheme: (theme) => {
+    const newTheme = {
+      ...theme,
+      typography: createTypography(theme.palette, theme.typography),
+    };
 
-      newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
-        return styleFunctionSx({ sx: props, theme: this });
-      };
+    newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
+      return styleFunctionSx({ sx: props, theme: this });
+    };
 
-      return newTheme;
-    },
-  });
+    return newTheme;
+  },
+});
 
 export {
   useColorScheme,
   getInitColorSchemeScript,
   CssVarsProvider as Experimental_CssVarsProvider,
-  InitColorSchemeScript,
 };
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index ca1c88caee85bf..b8dc3ff9a2d703 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -93,9 +93,6 @@ export interface CreateCssVarsProviderResult<
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
-  InitColorSchemeScript: (
-    props: Parameters<typeof getInitColorSchemeScript>[0],
-  ) => React.ReactElement;
 }
 
 export default function createCssVarsProvider<
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 36137054fae962..22f781020af1a5 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -368,9 +368,5 @@ export default function createCssVarsProvider(options) {
       ...params,
     });
 
-  const InitColorSchemeScript = React.memo(function InitColorSchemeScript(props) {
-    return getInitColorSchemeScript(props);
-  });
-
-  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript };
+  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
 }
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
index 5094225f71dea9..d392ddbc8d053d 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -40,8 +40,6 @@ export interface GetInitColorSchemeScriptOptions {
    * @default 'data-color-scheme'
    */
   attribute?: string;
-  /** Nonce string to pass to the inline script for CSP headers */
-  nonce?: string | undefined;
 }
 
 export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
@@ -53,13 +51,10 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
-    nonce,
   } = options || {};
   return (
     <script
       key="mui-color-scheme-init"
-      suppressHydrationWarning
-      nonce={typeof window === 'undefined' ? nonce : ''}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `(function() {

From c2ce63da56de7a2f4971335cee11eef36ff4a37a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 17 May 2024 10:25:31 -0400
Subject: [PATCH 03/21] Revert "Revert "add InitColorSchemeScript""

This reverts commit 38de969710662832a2109e2502505921fca36768.
---
 .../src/styles/CssVarsProvider.tsx            | 47 +++++++++----------
 .../src/cssVars/createCssVarsProvider.d.ts    |  3 ++
 .../src/cssVars/createCssVarsProvider.js      |  6 ++-
 .../src/cssVars/getInitColorSchemeScript.tsx  |  5 ++
 4 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index e7779777a3094c..473e543c36eb72 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -14,35 +14,34 @@ import THEME_ID from './identifier';
 
 const defaultTheme = experimental_extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
-  SupportedColorScheme,
-  typeof THEME_ID
->({
-  themeId: THEME_ID,
-  theme: defaultTheme,
-  attribute: 'data-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
-  defaultColorScheme: {
-    light: 'light',
-    dark: 'dark',
-  },
-  resolveTheme: (theme) => {
-    const newTheme = {
-      ...theme,
-      typography: createTypography(theme.palette, theme.typography),
-    };
+const { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript } =
+  createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
+    themeId: THEME_ID,
+    theme: defaultTheme,
+    attribute: 'data-mui-color-scheme',
+    modeStorageKey: 'mui-mode',
+    colorSchemeStorageKey: 'mui-color-scheme',
+    defaultColorScheme: {
+      light: 'light',
+      dark: 'dark',
+    },
+    resolveTheme: (theme) => {
+      const newTheme = {
+        ...theme,
+        typography: createTypography(theme.palette, theme.typography),
+      };
 
-    newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
-      return styleFunctionSx({ sx: props, theme: this });
-    };
+      newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
+        return styleFunctionSx({ sx: props, theme: this });
+      };
 
-    return newTheme;
-  },
-});
+      return newTheme;
+    },
+  });
 
 export {
   useColorScheme,
   getInitColorSchemeScript,
   CssVarsProvider as Experimental_CssVarsProvider,
+  InitColorSchemeScript,
 };
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index b8dc3ff9a2d703..ca1c88caee85bf 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -93,6 +93,9 @@ export interface CreateCssVarsProviderResult<
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  InitColorSchemeScript: (
+    props: Parameters<typeof getInitColorSchemeScript>[0],
+  ) => React.ReactElement;
 }
 
 export default function createCssVarsProvider<
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 22f781020af1a5..36137054fae962 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -368,5 +368,9 @@ export default function createCssVarsProvider(options) {
       ...params,
     });
 
-  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
+  const InitColorSchemeScript = React.memo(function InitColorSchemeScript(props) {
+    return getInitColorSchemeScript(props);
+  });
+
+  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript };
 }
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
index d392ddbc8d053d..5094225f71dea9 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -40,6 +40,8 @@ export interface GetInitColorSchemeScriptOptions {
    * @default 'data-color-scheme'
    */
   attribute?: string;
+  /** Nonce string to pass to the inline script for CSP headers */
+  nonce?: string | undefined;
 }
 
 export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
@@ -51,10 +53,13 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     attribute = DEFAULT_ATTRIBUTE,
     colorSchemeNode = 'document.documentElement',
+    nonce,
   } = options || {};
   return (
     <script
       key="mui-color-scheme-init"
+      suppressHydrationWarning
+      nonce={typeof window === 'undefined' ? nonce : ''}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{
         __html: `(function() {

From e18a6d0e8cd2809407338ae5291037fd40d2ea59 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 10 Jun 2024 15:30:59 +0700
Subject: [PATCH 04/21] reexport InitColorSchemeScript as component

---
 .../src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx  | 4 ++++
 packages/mui-material/src/InitColorSchemeScript/index.ts      | 1 +
 packages/mui-material/src/styles/CssVarsProvider.tsx          | 1 -
 3 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/index.ts

diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
new file mode 100644
index 00000000000000..f15ec8bd67dcf1
--- /dev/null
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+<InitColorSchemeScript />;
diff --git a/packages/mui-material/src/InitColorSchemeScript/index.ts b/packages/mui-material/src/InitColorSchemeScript/index.ts
new file mode 100644
index 00000000000000..0440410ceabf95
--- /dev/null
+++ b/packages/mui-material/src/InitColorSchemeScript/index.ts
@@ -0,0 +1 @@
+export { InitColorSchemeScript as default } from '../styles/CssVarsProvider';
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index fa4d8ff41212c4..aea24f0fca3703 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,4 +1,3 @@
-'use client';
 import * as React from 'react';
 import { unstable_createCssVarsProvider as createCssVarsProvider, SxProps } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';

From 10683e607bac9bde709581fea40e451dc1bd7891 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 10 Jun 2024 15:34:29 +0700
Subject: [PATCH 05/21] add test

---
 .../InitColorSchemeScript.test.tsx                  | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx

diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
new file mode 100644
index 00000000000000..f2a5a6b417292f
--- /dev/null
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+describe('InitColorSchemeScript', () => {
+  const { render } = createRenderer();
+
+  it('should render as expected', () => {
+    const { container } = render(<InitColorSchemeScript />);
+    expect(container.firstChild).to.have.tagName('script');
+  });
+});

From 394b59e1a588ce474b1d180229a87cccf7c7315b Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 10 Jun 2024 15:47:45 +0700
Subject: [PATCH 06/21] update docs

---
 .../css-theme-variables/configuration.md      |  6 ++--
 .../css-theme-variables/usage/usage.md        | 33 ++++++++++++++-----
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
index 5dad4c5f7f4b44..9c41e28fa611d3 100644
--- a/docs/data/material/customization/css-theme-variables/configuration.md
+++ b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -286,12 +286,10 @@ function App() {
 }
 ```
 
-For a server-side application, provide the same value to [`getInitColorSchemeScript()`](/material-ui/customization/css-theme-variables/usage/#server-side-rendering):
+For a server-side application, provide the same value to [`InitColorSchemeScript`](/material-ui/customization/css-theme-variables/usage/#server-side-rendering):
 
 ```js
-getInitColorSchemeScript({
-  defaultMode: 'dark',
-});
+<InitColorSchemeScript defaultMode="dark" />
 ```
 
 :::warning
diff --git a/docs/data/material/customization/css-theme-variables/usage/usage.md b/docs/data/material/customization/css-theme-variables/usage/usage.md
index 2b42442d16138a..f04d4be8458b2a 100644
--- a/docs/data/material/customization/css-theme-variables/usage/usage.md
+++ b/docs/data/material/customization/css-theme-variables/usage/usage.md
@@ -115,15 +115,34 @@ The structure of this object is nearly identical to the theme structure, the onl
 
 ## Server-side rendering
 
-Place `getInitColorSchemeScript()` before the `<Main />` tag to prevent the dark-mode SSR flickering during the hydration phase.
+Place `<InitColorSchemeScript />` before the `<Main />` tag to prevent the dark-mode SSR flickering during the hydration phase.
+
+### Next.js App Router
+
+Add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) file:
+
+```jsx title="app/layout.js"
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>
+        <InitColorSchemeScript /> {/* must come before the <main> element */}
+        <main>{children}</main>
+      </body>
+    </html>
+  );
+}
+```
 
 ### Next.js Pages Router
 
 Add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document) file:
 
-```jsx
+```jsx title="pages/_document.js"
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { getInitColorSchemeScript } from '@mui/material/styles';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 
 export default class MyDocument extends Document {
   render() {
@@ -131,7 +150,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript /> {/* must come before the <Main> element */}
           <Main />
           <NextScript />
         </body>
@@ -158,7 +177,7 @@ const StyledComponent = styled('button')(({ theme }) => ({
 
 ## API
 
-### `<CssVarsProvider>` props
+### `<CssVarsProvider>` &nbsp;props
 
 - `defaultMode?: 'light' | 'dark' | 'system'` - Application's default mode (`light` by default)
 - `disableTransitionOnChange : boolean` - Disable CSS transitions when switching between modes
@@ -171,9 +190,7 @@ const StyledComponent = styled('button')(({ theme }) => ({
 - `mode: string` - The user's selected mode
 - `setMode: mode => {…}` - Function for setting the `mode`. The `mode` is saved to internal state and local storage; if `mode` is null, it will be reset to the default mode
 
-### `getInitColorSchemeScript: (options) => React.ReactElement`
-
-**options**
+### `<InitColorSchemeScript>` &nbsp;props
 
 - `defaultMode?: 'light' | 'dark' | 'system'`: - Application's default mode before React renders the tree (`light` by default)
 - `modeStorageKey?: string`: - localStorage key used to store application `mode`

From 1ef5f65eb5a607aeefdef658d3bce777fcc075e1 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 10 Jun 2024 15:58:52 +0700
Subject: [PATCH 07/21] spec

---
 .../src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
index f15ec8bd67dcf1..6201877fec9e3c 100644
--- a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
@@ -1,4 +1,4 @@
 import * as React from 'react';
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 
-<InitColorSchemeScript />;
+<InitColorSchemeScript nonce="foo-bar" />;

From bef0a772156be191e44da2e9ef4e353643be8cac Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 10 Jun 2024 16:03:50 +0700
Subject: [PATCH 08/21] add nonce type

---
 .../material/customization/css-theme-variables/usage/usage.md    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/data/material/customization/css-theme-variables/usage/usage.md b/docs/data/material/customization/css-theme-variables/usage/usage.md
index f04d4be8458b2a..0f26739d4fed9b 100644
--- a/docs/data/material/customization/css-theme-variables/usage/usage.md
+++ b/docs/data/material/customization/css-theme-variables/usage/usage.md
@@ -195,3 +195,4 @@ const StyledComponent = styled('button')(({ theme }) => ({
 - `defaultMode?: 'light' | 'dark' | 'system'`: - Application's default mode before React renders the tree (`light` by default)
 - `modeStorageKey?: string`: - localStorage key used to store application `mode`
 - `attribute?: string` - DOM attribute for applying color scheme
+- `nonce?: string` - Optional nonce passed to the injected script tag, used to allow-list the next-themes script in your CSP

From 9582d24f50d0880088bd1bd823bddf84812d1826 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 10 Jun 2024 16:55:59 +0700
Subject: [PATCH 09/21] ignore CssVarsProvider from rsc

---
 packages/rsc-builder/buildRsc.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index a31674176307c1..874ed1c82ec066 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -11,6 +11,7 @@ type Project = {
   rootPath: string;
   additionalPaths?: string[];
   additionalFiles?: string[];
+  ignorePaths?: string[];
 };
 
 const PROJECTS: Project[] = [
@@ -21,6 +22,9 @@ const PROJECTS: Project[] = [
   {
     name: 'material',
     rootPath: path.join(process.cwd(), 'packages/mui-material'),
+    ignorePaths: [
+      'packages/mui-material/src/styles/CssVarsProvider.tsx', // no need 'use client' because of `styles/index` export
+    ],
   },
   {
     name: 'joy',
@@ -113,7 +117,9 @@ async function run(argv: yargs.ArgumentsCamelCase<CommandOptions>) {
 
     components.forEach(async (component) => {
       try {
-        processFile(component.filename);
+        if (!project.ignorePaths?.some((p) => component.filename.includes(p))) {
+          processFile(component.filename);
+        }
       } catch (error: any) {
         error.message = `${path.relative(process.cwd(), component.filename)}: ${error.message}`;
         throw error;

From 8fa07a000799e561aac3960600946aa5fa1377ef Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 18:33:47 +0700
Subject: [PATCH 10/21] split InitColorSchemeScript

---
 .../InitColorSchemeScript.tsx                 | 13 +++++
 .../src/InitColorSchemeScript/index.ts        |  2 +-
 .../src/styles/CssVarsProvider.tsx            | 58 +++++++++----------
 .../InitColorSchemeScript.test.js}            | 40 +++++--------
 .../InitColorSchemeScript.tsx}                | 11 +++-
 .../src/InitColorSchemeScript/index.ts        |  2 +
 .../src/cssVars/createCssVarsProvider.d.ts    |  7 +--
 .../src/cssVars/createCssVarsProvider.js      | 12 ++--
 .../src/cssVars/createCssVarsProvider.test.js |  5 +-
 packages/mui-system/src/cssVars/index.ts      |  1 -
 .../src/cssVars/useCurrentColorScheme.test.js |  2 +-
 .../src/cssVars/useCurrentColorScheme.ts      |  2 +-
 packages/rsc-builder/buildRsc.ts              |  5 +-
 13 files changed, 82 insertions(+), 78 deletions(-)
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
 rename packages/mui-system/src/{cssVars/getInitColorSchemeScript.test.js => InitColorSchemeScript/InitColorSchemeScript.test.js} (79%)
 rename packages/mui-system/src/{cssVars/getInitColorSchemeScript.tsx => InitColorSchemeScript/InitColorSchemeScript.tsx} (91%)
 create mode 100644 packages/mui-system/src/InitColorSchemeScript/index.ts

diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
new file mode 100644
index 00000000000000..b3a72184e965b8
--- /dev/null
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
@@ -0,0 +1,13 @@
+import SystemInitColorSchemeScript from '@mui/system/InitColorSchemeScript';
+
+export const defaultConfig = {
+  attribute: 'data-mui-color-scheme',
+  colorSchemeStorageKey: 'mui-color-scheme',
+  defaultLightColorScheme: 'light',
+  defaultDarkColorScheme: 'dark',
+  modeStorageKey: 'mui-mode',
+} as const;
+
+export default (function InitColorSchemeScript(props) {
+  return <SystemInitColorSchemeScript {...defaultConfig} {...props} />;
+} as typeof SystemInitColorSchemeScript);
diff --git a/packages/mui-material/src/InitColorSchemeScript/index.ts b/packages/mui-material/src/InitColorSchemeScript/index.ts
index 0440410ceabf95..89691518881b67 100644
--- a/packages/mui-material/src/InitColorSchemeScript/index.ts
+++ b/packages/mui-material/src/InitColorSchemeScript/index.ts
@@ -1 +1 @@
-export { InitColorSchemeScript as default } from '../styles/CssVarsProvider';
+export { default } from './InitColorSchemeScript';
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index aea24f0fca3703..2e634c72f9afaa 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -1,36 +1,38 @@
+'use client';
 import * as React from 'react';
 import { unstable_createCssVarsProvider as createCssVarsProvider, SxProps } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
 import extendTheme, { SupportedColorScheme, CssVarsTheme } from './extendTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
+import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
 
 const defaultTheme = extendTheme();
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript } =
-  createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
-    themeId: THEME_ID,
-    theme: defaultTheme,
-    attribute: 'data-mui-color-scheme',
-    modeStorageKey: 'mui-mode',
-    colorSchemeStorageKey: 'mui-color-scheme',
-    defaultColorScheme: {
-      light: 'light',
-      dark: 'dark',
-    },
-    resolveTheme: (theme) => {
-      const newTheme = {
-        ...theme,
-        typography: createTypography(theme.palette, theme.typography),
-      };
-
-      newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
-        return styleFunctionSx({ sx: props, theme: this });
-      };
-
-      return newTheme;
-    },
-  });
+const { CssVarsProvider, useColorScheme } = createCssVarsProvider<
+  SupportedColorScheme,
+  typeof THEME_ID
+>({
+  themeId: THEME_ID,
+  theme: defaultTheme,
+  ...defaultConfig,
+  defaultColorScheme: {
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme,
+  },
+  resolveTheme: (theme) => {
+    const newTheme = {
+      ...theme,
+      typography: createTypography(theme.palette, theme.typography),
+    };
+
+    newTheme.unstable_sx = function sx(props: SxProps<CssVarsTheme>) {
+      return styleFunctionSx({ sx: props, theme: this });
+    };
+
+    return newTheme;
+  },
+});
 
 let warnedOnce = false;
 
@@ -51,10 +53,4 @@ function Experimental_CssVarsProvider(props: any) {
   return <CssVarsProvider {...props} />;
 }
 
-export {
-  useColorScheme,
-  getInitColorSchemeScript,
-  CssVarsProvider,
-  Experimental_CssVarsProvider,
-  InitColorSchemeScript,
-};
+export { useColorScheme, CssVarsProvider, Experimental_CssVarsProvider };
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
similarity index 79%
rename from packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
rename to packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
index f886c21dae8a9a..adf00e11d4a4a0 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
+++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
@@ -1,13 +1,13 @@
 /* eslint-disable no-eval */
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
-import getInitColorSchemeScript, {
+import InitColorSchemeScript, {
   DEFAULT_ATTRIBUTE,
   DEFAULT_MODE_STORAGE_KEY,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-} from './getInitColorSchemeScript';
+} from './InitColorSchemeScript';
 
-describe('getInitColorSchemeScript', () => {
+describe('InitColorSchemeScript', () => {
   const { render } = createRenderer();
   let originalMatchmedia;
   let storage = {};
@@ -40,7 +40,7 @@ describe('getInitColorSchemeScript', () => {
     storage[DEFAULT_MODE_STORAGE_KEY] = 'light';
     storage[`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-light`] = 'foo';
 
-    const { container } = render(getInitColorSchemeScript());
+    const { container } = render(<InitColorSchemeScript />);
     eval(container.firstChild.textContent);
     expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('foo');
   });
@@ -50,11 +50,11 @@ describe('getInitColorSchemeScript', () => {
     storage[`mui-bar-color-scheme-light`] = 'flash';
 
     const { container } = render(
-      getInitColorSchemeScript({
-        modeStorageKey: 'mui-foo-mode',
-        colorSchemeStorageKey: 'mui-bar-color-scheme',
-        attribute: 'data-mui-baz-scheme',
-      }),
+      <InitColorSchemeScript
+        modeStorageKey="mui-foo-mode"
+        colorSchemeStorageKey="mui-bar-color-scheme"
+        attribute="data-mui-baz-scheme"
+      />,
     );
     eval(container.firstChild.textContent);
     expect(document.documentElement.getAttribute('data-mui-baz-scheme')).to.equal('flash');
@@ -64,7 +64,7 @@ describe('getInitColorSchemeScript', () => {
     storage[DEFAULT_MODE_STORAGE_KEY] = 'dark';
     storage[`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`] = 'bar';
 
-    const { container } = render(getInitColorSchemeScript());
+    const { container } = render(<InitColorSchemeScript />);
     eval(container.firstChild.textContent);
     expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('bar');
   });
@@ -74,7 +74,7 @@ describe('getInitColorSchemeScript', () => {
     storage[`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-dark`] = 'dim';
     window.matchMedia = createMatchMedia(true);
 
-    const { container } = render(getInitColorSchemeScript());
+    const { container } = render(<InitColorSchemeScript />);
     eval(container.firstChild.textContent);
     expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('dim');
   });
@@ -84,17 +84,13 @@ describe('getInitColorSchemeScript', () => {
     storage[`${DEFAULT_COLOR_SCHEME_STORAGE_KEY}-light`] = 'bright';
     window.matchMedia = createMatchMedia(false);
 
-    const { container } = render(getInitColorSchemeScript());
+    const { container } = render(<InitColorSchemeScript />);
     eval(container.firstChild.textContent);
     expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('bright');
   });
 
   it('defaultMode: `dark`', () => {
-    const { container } = render(
-      getInitColorSchemeScript({
-        defaultMode: 'dark',
-      }),
-    );
+    const { container } = render(<InitColorSchemeScript defaultMode="dark" />);
     eval(container.firstChild.textContent);
     expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('dark');
   });
@@ -104,10 +100,7 @@ describe('getInitColorSchemeScript', () => {
       window.matchMedia = createMatchMedia(true);
 
       const { container } = render(
-        getInitColorSchemeScript({
-          defaultMode: 'system',
-          defaultDarkColorScheme: 'trueDark',
-        }),
+        <InitColorSchemeScript defaultMode="system" defaultDarkColorScheme="trueDark" />,
       );
       eval(container.firstChild.textContent);
       expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('trueDark');
@@ -117,10 +110,7 @@ describe('getInitColorSchemeScript', () => {
       window.matchMedia = createMatchMedia(false);
 
       const { container } = render(
-        getInitColorSchemeScript({
-          defaultMode: 'system',
-          defaultLightColorScheme: 'yellow',
-        }),
+        <InitColorSchemeScript defaultMode="system" defaultLightColorScheme="yellow" />,
       );
       eval(container.firstChild.textContent);
       expect(document.documentElement.getAttribute(DEFAULT_ATTRIBUTE)).to.equal('yellow');
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
similarity index 91%
rename from packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
rename to packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
index 5094225f71dea9..ff7892f469fcde 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
+++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
@@ -1,10 +1,13 @@
+/**
+ * Split this component for RSC import
+ */
 import * as React from 'react';
 
 export const DEFAULT_MODE_STORAGE_KEY = 'mode';
 export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
 export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
 
-export interface GetInitColorSchemeScriptOptions {
+export interface InitColorSchemeScriptProps {
   /**
    * The mode to be used for the first visit
    * @default 'light'
@@ -40,11 +43,13 @@ export interface GetInitColorSchemeScriptOptions {
    * @default 'data-color-scheme'
    */
   attribute?: string;
-  /** Nonce string to pass to the inline script for CSP headers */
+  /**
+   * Nonce string to pass to the inline script for CSP headers
+   */
   nonce?: string | undefined;
 }
 
-export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) {
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
diff --git a/packages/mui-system/src/InitColorSchemeScript/index.ts b/packages/mui-system/src/InitColorSchemeScript/index.ts
new file mode 100644
index 00000000000000..9b056c5e4c8f0e
--- /dev/null
+++ b/packages/mui-system/src/InitColorSchemeScript/index.ts
@@ -0,0 +1,2 @@
+export { default } from './InitColorSchemeScript';
+export type { InitColorSchemeScriptProps } from './InitColorSchemeScript';
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
index b67794a0f302a7..eb5ad8412b88c2 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import getInitColorSchemeScript from './getInitColorSchemeScript';
+import InitColorSchemeScript from '../InitColorSchemeScript';
 import { Mode, Result } from './useCurrentColorScheme';
 
 export interface ColorSchemeContextValue<SupportedColorScheme extends string>
@@ -92,10 +92,7 @@ export interface CreateCssVarsProviderResult<
     >,
   ) => React.ReactElement<any>;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof getInitColorSchemeScript;
-  InitColorSchemeScript: (
-    props: Parameters<typeof getInitColorSchemeScript>[0],
-  ) => React.ReactElement;
+  getInitColorSchemeScript: typeof InitColorSchemeScript;
 }
 
 export default function createCssVarsProvider<
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js
index 36137054fae962..98416921480e15 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -4,11 +4,11 @@ import MuiError from '@mui/internal-babel-macros/MuiError.macro';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
 import ThemeProvider from '../ThemeProvider';
-import systemGetInitColorSchemeScript, {
+import InitColorSchemeScript, {
   DEFAULT_ATTRIBUTE,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
   DEFAULT_MODE_STORAGE_KEY,
-} from './getInitColorSchemeScript';
+} from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 
 export const DISABLE_CSS_TRANSITION =
@@ -358,7 +358,7 @@ export default function createCssVarsProvider(options) {
       : designSystemColorScheme.dark;
 
   const getInitColorSchemeScript = (params) =>
-    systemGetInitColorSchemeScript({
+    InitColorSchemeScript({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
       defaultMode: designSystemMode,
@@ -368,9 +368,5 @@ export default function createCssVarsProvider(options) {
       ...params,
     });
 
-  const InitColorSchemeScript = React.memo(function InitColorSchemeScript(props) {
-    return getInitColorSchemeScript(props);
-  });
-
-  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript, InitColorSchemeScript };
+  return { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
 }
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index e86df5cebb9198..f011109d6a28ff 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
@@ -4,7 +4,10 @@ import { spy } from 'sinon';
 import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import createCssVarsTheme from './createCssVarsTheme';
 import createCssVarsProvider, { DISABLE_CSS_TRANSITION } from './createCssVarsProvider';
-import { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
+import {
+  DEFAULT_ATTRIBUTE,
+  DEFAULT_MODE_STORAGE_KEY,
+} from '../InitColorSchemeScript/InitColorSchemeScript';
 import useTheme from '../useTheme';
 
 describe('createCssVarsProvider', () => {
diff --git a/packages/mui-system/src/cssVars/index.ts b/packages/mui-system/src/cssVars/index.ts
index 998285793b9a26..8b00afdbff52f8 100644
--- a/packages/mui-system/src/cssVars/index.ts
+++ b/packages/mui-system/src/cssVars/index.ts
@@ -6,7 +6,6 @@ export type {
   ColorSchemeContextValue,
 } from './createCssVarsProvider';
 
-export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as prepareTypographyVars } from './prepareTypographyVars';
 export type { ExtractTypographyTokens } from './prepareTypographyVars';
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
index f9237da7338962..8b864d29a39bc7 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -5,7 +5,7 @@ import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils
 import {
   DEFAULT_MODE_STORAGE_KEY,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-} from './getInitColorSchemeScript';
+} from '../getInitColorSchemeScript/getInitColorSchemeScript';
 import useCurrentColorScheme, { getColorScheme } from './useCurrentColorScheme';
 
 describe('useCurrentColorScheme', () => {
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
index f9f46bbfdc9dbf..d6ae05deef5807 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   DEFAULT_MODE_STORAGE_KEY,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-} from './getInitColorSchemeScript';
+} from '../getInitColorSchemeScript/getInitColorSchemeScript';
 
 export type Mode = 'light' | 'dark' | 'system';
 export type SystemMode = Exclude<Mode, 'system'>;
diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index 874ed1c82ec066..2efe5abd160485 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -23,7 +23,7 @@ const PROJECTS: Project[] = [
     name: 'material',
     rootPath: path.join(process.cwd(), 'packages/mui-material'),
     ignorePaths: [
-      'packages/mui-material/src/styles/CssVarsProvider.tsx', // no need 'use client' because of `styles/index` export
+      'packages/mui-material/src/InitColorSchemeScript.tsx', // RSC compatible
     ],
   },
   {
@@ -33,6 +33,9 @@ const PROJECTS: Project[] = [
   {
     name: 'system',
     rootPath: path.join(process.cwd(), 'packages/mui-system'),
+    ignorePaths: [
+      'packages/mui-system/src/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
+    ],
   },
   {
     name: 'styled-engine',

From 34eab69f34ac35ed2ed319f00ac321cfb26d924c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 22:26:03 +0700
Subject: [PATCH 11/21] fix path

---
 packages/mui-system/src/cssVars/useCurrentColorScheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
index d6ae05deef5807..c5b7a1cdd7055e 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.ts
@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   DEFAULT_MODE_STORAGE_KEY,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-} from '../getInitColorSchemeScript/getInitColorSchemeScript';
+} from '../InitColorSchemeScript/InitColorSchemeScript';
 
 export type Mode = 'light' | 'dark' | 'system';
 export type SystemMode = Exclude<Mode, 'system'>;

From d480e9c5ab817950d70ba132bfc0d8175e4bd824 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 22:55:42 +0700
Subject: [PATCH 12/21] fix ignore path

---
 packages/rsc-builder/buildRsc.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index 2efe5abd160485..279ee1bea80dce 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -23,7 +23,7 @@ const PROJECTS: Project[] = [
     name: 'material',
     rootPath: path.join(process.cwd(), 'packages/mui-material'),
     ignorePaths: [
-      'packages/mui-material/src/InitColorSchemeScript.tsx', // RSC compatible
+      'packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // RSC compatible
     ],
   },
   {
@@ -34,7 +34,7 @@ const PROJECTS: Project[] = [
     name: 'system',
     rootPath: path.join(process.cwd(), 'packages/mui-system'),
     ignorePaths: [
-      'packages/mui-system/src/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
+      'packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
     ],
   },
   {

From 00129febb61e90dfd60d8616616184698a73c818 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 22:57:31 +0700
Subject: [PATCH 13/21] fix lint

---
 .../src/InitColorSchemeScript/InitColorSchemeScript.tsx         | 1 +
 .../src/InitColorSchemeScript/InitColorSchemeScript.test.js     | 1 +
 packages/mui-system/src/cssVars/useCurrentColorScheme.test.js   | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
index b3a72184e965b8..e5d53638202a2d 100644
--- a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import SystemInitColorSchemeScript from '@mui/system/InitColorSchemeScript';
 
 export const defaultConfig = {
diff --git a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
index adf00e11d4a4a0..b3e63d899c1d63 100644
--- a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
+++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-eval */
+import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer } from '@mui/internal-test-utils';
 import InitColorSchemeScript, {
diff --git a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
index 8b864d29a39bc7..f49c4c4545bc63 100644
--- a/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
+++ b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
@@ -5,7 +5,7 @@ import { createRenderer, fireEvent, act, screen } from '@mui/internal-test-utils
 import {
   DEFAULT_MODE_STORAGE_KEY,
   DEFAULT_COLOR_SCHEME_STORAGE_KEY,
-} from '../getInitColorSchemeScript/getInitColorSchemeScript';
+} from '../InitColorSchemeScript/InitColorSchemeScript';
 import useCurrentColorScheme, { getColorScheme } from './useCurrentColorScheme';
 
 describe('useCurrentColorScheme', () => {

From 334d09e6a88b7b6f52c97c625b95fc09d8c4c702 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 23:05:50 +0700
Subject: [PATCH 14/21] update docs

---
 .../migration-v5/migration-css-theme-variables.md    | 12 ++++++------
 docs/pages/_document.js                              |  4 ++--
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/data/material/migration/migration-v5/migration-css-theme-variables.md b/docs/data/material/migration/migration-v5/migration-css-theme-variables.md
index c1b74433614de7..d048c08110ccbe 100644
--- a/docs/data/material/migration/migration-v5/migration-css-theme-variables.md
+++ b/docs/data/material/migration/migration-v5/migration-css-theme-variables.md
@@ -176,15 +176,15 @@ The `mode` is stored inside `CssVarsProvider` which handles local storage synchr
 
 ## 3. Prevent dark-mode flickering in server-side applications
 
-The `getInitColorSchemeScript()` API prevents dark-mode flickering by returning a script that must be run before React.
+The `InitColorSchemeScript` component prevents dark-mode flickering by returning a script that must be run before React.
 
 ### Next.js Pages Router
 
-Place the script before `<Main />` in your [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document):
+Place the component before `<Main />` in your [`pages/_document.js`](https://nextjs.org/docs/pages/building-your-application/routing/custom-document):
 
 ```jsx
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { getInitColorSchemeScript } from '@mui/material/styles';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 
 export default class MyDocument extends Document {
   render() {
@@ -192,7 +192,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript />
           <Main />
           <NextScript />
         </body>
@@ -208,10 +208,10 @@ Place the script in your [`gatsby-ssr.js`](https://www.gatsbyjs.com/docs/referen
 
 ```jsx
 import * as React from 'react';
-import { getInitColorSchemeScript } from '@mui/material/styles';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 
 export function onRenderBody({ setPreBodyComponents }) {
-  setPreBodyComponents([getInitColorSchemeScript()]);
+  setPreBodyComponents([<InitColorSchemeScript />]);
 }
 ```
 
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index ca969d20a004b3..5e905c62932716 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -5,7 +5,7 @@ import { ServerStyleSheets as JSSServerStyleSheets } from '@mui/styles';
 import { ServerStyleSheet } from 'styled-components';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import GlobalStyles from '@mui/material/GlobalStyles';
-import { getInitColorSchemeScript as getMuiInitColorSchemeScript } from '@mui/material/styles';
+import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
@@ -188,7 +188,7 @@ export default class MyDocument extends Document {
           />
         </Head>
         <body>
-          {getMuiInitColorSchemeScript({ defaultMode: 'system' })}
+          <MuiInitColorSchemeScript defaultMode="system" />
           {getJoyInitColorSchemeScript({ defaultMode: 'system' })}
           <Main />
           <script

From d3859a06496f126edd74c3b5e9a27fd622b7db3c Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 23:19:25 +0700
Subject: [PATCH 15/21] add InitColorSchemeScript to joy

---
 .../InitColorSchemeScript.spec.tsx            |  4 ++
 .../InitColorSchemeScript.test.tsx            | 13 +++++++
 .../InitColorSchemeScript.tsx                 | 14 +++++++
 .../src/InitColorSchemeScript/index.ts        |  1 +
 .../mui-joy/src/styles/CssVarsProvider.tsx    | 38 ++++++++++++++-----
 .../src/styles/CssVarsProvider.tsx            | 35 ++++++++++++++---
 packages/rsc-builder/buildRsc.ts              |  3 ++
 7 files changed, 93 insertions(+), 15 deletions(-)
 create mode 100644 packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
 create mode 100644 packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
 create mode 100644 packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.tsx
 create mode 100644 packages/mui-joy/src/InitColorSchemeScript/index.ts

diff --git a/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
new file mode 100644
index 00000000000000..459053c11dfa21
--- /dev/null
+++ b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
@@ -0,0 +1,4 @@
+import * as React from 'react';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
+
+<InitColorSchemeScript nonce="foo-bar" />;
diff --git a/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
new file mode 100644
index 00000000000000..0cff400e21c1ac
--- /dev/null
+++ b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
+
+describe('InitColorSchemeScript', () => {
+  const { render } = createRenderer();
+
+  it('should render as expected', () => {
+    const { container } = render(<InitColorSchemeScript />);
+    expect(container.firstChild).to.have.tagName('script');
+  });
+});
diff --git a/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.tsx b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.tsx
new file mode 100644
index 00000000000000..b4585286c797b5
--- /dev/null
+++ b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import SystemInitColorSchemeScript from '@mui/system/InitColorSchemeScript';
+
+export const defaultConfig = {
+  attribute: 'data-joy-color-scheme',
+  colorSchemeStorageKey: 'joy-color-scheme',
+  defaultLightColorScheme: 'light',
+  defaultDarkColorScheme: 'dark',
+  modeStorageKey: 'joy-mode',
+} as const;
+
+export default (function InitColorSchemeScript(props) {
+  return <SystemInitColorSchemeScript {...defaultConfig} {...props} />;
+} as typeof SystemInitColorSchemeScript);
diff --git a/packages/mui-joy/src/InitColorSchemeScript/index.ts b/packages/mui-joy/src/InitColorSchemeScript/index.ts
new file mode 100644
index 00000000000000..89691518881b67
--- /dev/null
+++ b/packages/mui-joy/src/InitColorSchemeScript/index.ts
@@ -0,0 +1 @@
+export { default } from './InitColorSchemeScript';
diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx
index 59d61d0dc7b572..2daeaa8dc1fece 100644
--- a/packages/mui-joy/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx
@@ -7,20 +7,40 @@ import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/sy
 import defaultTheme from './defaultTheme';
 import type { SupportedColorScheme } from './types';
 import THEME_ID from './identifier';
+import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
 
-const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider<
-  SupportedColorScheme,
-  typeof THEME_ID
->({
+const {
+  CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript,
+} = createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
   themeId: THEME_ID,
   theme: defaultTheme,
-  attribute: 'data-joy-color-scheme',
-  modeStorageKey: 'joy-mode',
-  colorSchemeStorageKey: 'joy-color-scheme',
+  attribute: defaultConfig.attribute,
+  modeStorageKey: defaultConfig.modeStorageKey,
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
   defaultColorScheme: {
-    light: 'light',
-    dark: 'dark',
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme,
   },
 });
 
+let warnedInitScriptOnce = false;
+
+const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript = (params) => {
+  if (!warnedInitScriptOnce) {
+    console.warn(
+      [
+        'MUI: The getInitColorSchemeScript function has been deprecated.',
+        '',
+        "You should use `import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript'`",
+        'and replace the function call with `<InitColorSchemeScript />` instead.',
+      ].join('\n'),
+    );
+
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+
 export { CssVarsProvider, useColorScheme, getInitColorSchemeScript };
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index 2e634c72f9afaa..5072d6340fadf9 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -9,13 +9,16 @@ import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
 
 const defaultTheme = extendTheme();
 
-const { CssVarsProvider, useColorScheme } = createCssVarsProvider<
-  SupportedColorScheme,
-  typeof THEME_ID
->({
+const {
+  CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript,
+} = createCssVarsProvider<SupportedColorScheme, typeof THEME_ID>({
   themeId: THEME_ID,
   theme: defaultTheme,
-  ...defaultConfig,
+  attribute: defaultConfig.attribute,
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {
     light: defaultConfig.defaultLightColorScheme,
     dark: defaultConfig.defaultDarkColorScheme,
@@ -36,6 +39,7 @@ const { CssVarsProvider, useColorScheme } = createCssVarsProvider<
 
 let warnedOnce = false;
 
+// TODO: remove in v7
 // eslint-disable-next-line @typescript-eslint/naming-convention
 function Experimental_CssVarsProvider(props: any) {
   if (!warnedOnce) {
@@ -53,4 +57,23 @@ function Experimental_CssVarsProvider(props: any) {
   return <CssVarsProvider {...props} />;
 }
 
-export { useColorScheme, CssVarsProvider, Experimental_CssVarsProvider };
+let warnedInitScriptOnce = false;
+
+// TODO: remove in v7
+const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript = (params) => {
+  if (!warnedInitScriptOnce) {
+    console.warn(
+      [
+        'MUI: The getInitColorSchemeScript function has been deprecated.',
+        '',
+        "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`",
+        'and replace the function call with `<InitColorSchemeScript />` instead.',
+      ].join('\n'),
+    );
+
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+
+export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };
diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index 279ee1bea80dce..80ab9d4589ffc6 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -29,6 +29,9 @@ const PROJECTS: Project[] = [
   {
     name: 'joy',
     rootPath: path.join(process.cwd(), 'packages/mui-joy'),
+    ignorePaths: [
+      'packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
+    ],
   },
   {
     name: 'system',

From 92493b27e858932a6dcdd29d7c400a27084b29e7 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 23:19:37 +0700
Subject: [PATCH 16/21] use InitColorSchemeScript in docs

---
 docs/pages/_document.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 5e905c62932716..1fd83562b13f58 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -6,7 +6,7 @@ import { ServerStyleSheet } from 'styled-components';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript';
-import { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles';
+import JoyInitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import createEmotionCache from 'docs/src/createEmotionCache';
 import { getMetaThemeColor } from '@mui/docs/branding';
@@ -189,7 +189,7 @@ export default class MyDocument extends Document {
         </Head>
         <body>
           <MuiInitColorSchemeScript defaultMode="system" />
-          {getJoyInitColorSchemeScript({ defaultMode: 'system' })}
+          <JoyInitColorSchemeScript defaultMode="system" />
           <Main />
           <script
             // eslint-disable-next-line react/no-danger

From 3256350034d802bf623b08fdb674d2c8a88fe474 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 23:25:33 +0700
Subject: [PATCH 17/21] update docs

---
 .../joy/customization/dark-mode/dark-mode.md  | 43 +++++++------------
 .../dark-mode-optimization.md                 |  6 +--
 docs/pages/blog/first-look-at-joy.md          |  6 +--
 3 files changed, 22 insertions(+), 33 deletions(-)

diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md
index 65af8c390e5f89..b03640976c71ab 100644
--- a/docs/data/joy/customization/dark-mode/dark-mode.md
+++ b/docs/data/joy/customization/dark-mode/dark-mode.md
@@ -12,10 +12,10 @@ When you change the `defaultMode` to another value, you must clear the local sto
 
 {{"demo": "DarkModeByDefault.js"}}
 
-For server-side applications, check out the framework setup in [the section below](#server-side-rendering) and provide the same value to the `getInitColorSchemeScript` function:
+For server-side applications, check out the framework setup in [the section below](#server-side-rendering) and provide the same value to the `InitColorSchemeScript` component:
 
 ```js
-getInitColorSchemeScript({ defaultMode: 'dark' });
+<InitColorSchemeScript defaultMode="dark" />
 ```
 
 ## Matching device's preference
@@ -28,10 +28,10 @@ import { CssVarsProvider } from '@mui/joy/styles';
 <CssVarsProvider defaultMode="system">...</CssVarsProvider>;
 ```
 
-For server-side applications, check out the framework setup in [the section below](#server-side-rendering) and provide the same value to the `getInitColorSchemeScript` function:
+For server-side applications, check out the framework setup in [the section below](#server-side-rendering) and provide the same value to the `InitColorSchemeScript` component:
 
 ```js
-getInitColorSchemeScript({ defaultMode: 'system' });
+<InitColorSchemeScript defaultMode="system" />
 ```
 
 ### Identify the system mode
@@ -121,7 +121,7 @@ If you try to render your UI based on the server, before mounting on the client,
 
 ### Avoiding screen flickering
 
-To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization/#the-problem-flickering-on-first-load), apply `getInitColorSchemeScript()` before the main application script－it varies across frameworks:
+To [prevent the UI from flickering](/joy-ui/main-features/dark-mode-optimization/#the-problem-flickering-on-first-load), apply `<InitColorSchemeScript />` before the main application script－it varies across frameworks:
 
 ### Next.js Pages Router
 
@@ -129,7 +129,7 @@ To use the Joy UI API with a Next.js project, add the following code to the cus
 
 ```jsx
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 
 export default class MyDocument extends Document {
   render() {
@@ -137,7 +137,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript />
           <Main />
           <NextScript />
         </body>
@@ -149,34 +149,23 @@ export default class MyDocument extends Document {
 
 ### Next.js App Router
 
-To use the Joy UI API with a Next.js project with the App Router, create a separate [Client Component](https://nextjs.org/docs/app/building-your-application/rendering/client-components) to utilize the [`getInitColorSchemeScript`](https://mui.com/joy-ui/main-features/dark-mode-optimization/#the-solution-css-variables) function:
-
-```jsx title="colorInit.js"
-'use client';
-
-import { getInitColorSchemeScript } from '@mui/joy/styles';
-
-export default function ColorInit() {
-  return <>{getInitColorSchemeScript()}</>;
-}
-```
-
-Now, you can use the it in your [`app/layout.js`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) file in order to prevent flickering:
+To use the Joy UI API with a Next.js project with the App Router, add the following code to the [`app/layout.js`](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#layouts) file in order to prevent flickering:
 
 ```jsx title="layout.js"
-import ColorInit from './colorInit';
-import { CssBaseline, CssVarsProvider } from '@mui/joy';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en" suppressHydrationWarning={true}>
-      <CssVarsProvider>
-        <body>
+      <body>
+        <InitColorSchemeScript />
+        <CssVarsProvider>
           <CssBaseline />
-          <ColorInit />
           {children}
-        </body>
-      </CssVarsProvider>
+        </CssVarsProvider>
+      </body>
     </html>
   );
 }
diff --git a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md
index 4b8a62fdf249e5..1afca0965a328c 100644
--- a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md
+++ b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md
@@ -27,14 +27,14 @@ Solving this problem required us to take a novel approach to styling and theming
 
 Thanks to Joy UI's built-in support for CSS variables, your app can render all of its color schemes at build time, so that the user's preference can be injected _before_ the DOM is rendered in the browser.
 
-Joy UI provides the `getInitColorSchemeScript()` function to make this flash-free dark mode possible with React frameworks like Next.js or Remix.
+Joy UI provides the `InitColorSchemeScript` component to make this flash-free dark mode possible with React frameworks like Next.js or Remix.
 This function must be placed before the main script so it can apply the correct stylesheet before your components are rendered.
 
 The code snippet below shows how this works with the Next.js Pages Router:
 
 ```jsx
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 
 export default class MyDocument extends Document {
   render() {
@@ -42,7 +42,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript />
           <Main />
           <NextScript />
         </body>
diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md
index 56a77bd1dc57d3..64a0976f16bdf4 100644
--- a/docs/pages/blog/first-look-at-joy.md
+++ b/docs/pages/blog/first-look-at-joy.md
@@ -93,12 +93,12 @@ You're still able to override the style completely via the usual CSS overrides,
 Joy UI provides an effective way to prevent UI flicker when users refresh or re-enter a page with dark mode enabled.
 The out-of-the-box CSS variables support allows every color scheme to be rendered at build time, inserting the selected color scheme and mode before the browser renders the DOM.
 
-What's more, it provides a function called `getInitColorSchemeScript()` that enables you to have perfect functioning dark mode in various React frameworks, such as Next.js, Gatsby, and Remix.
+What's more, it provides a component called `InitColorSchemeScript` that enables you to have perfect functioning dark mode in various React frameworks, such as Next.js, Gatsby, and Remix.
 
 ```js
 // A Next.js example
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { getInitColorSchemeScript } from '@mui/joy/styles';
+import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 
 export default class MyDocument extends Document {
   render() {
@@ -106,7 +106,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript />
           <Main />
           <NextScript />
         </body>

From 2471c88df3ab15f10312658affff3d8b93d277ff Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 23:47:34 +0700
Subject: [PATCH 18/21] fix joy rsc ignore

---
 packages/rsc-builder/buildRsc.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/rsc-builder/buildRsc.ts b/packages/rsc-builder/buildRsc.ts
index 80ab9d4589ffc6..e028e5625b25d4 100644
--- a/packages/rsc-builder/buildRsc.ts
+++ b/packages/rsc-builder/buildRsc.ts
@@ -30,7 +30,7 @@ const PROJECTS: Project[] = [
     name: 'joy',
     rootPath: path.join(process.cwd(), 'packages/mui-joy'),
     ignorePaths: [
-      'packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
+      'packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
     ],
   },
   {

From 52dddfdabff71ca9c535c2cbbf8415dc409a5674 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 13 Jun 2024 23:51:25 +0700
Subject: [PATCH 19/21] trigger build


From c11fb6be38bebc437b03309733f2fae8ac29dcc4 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 10:04:09 +0700
Subject: [PATCH 20/21] skip demo for InitColorSchemeScript

---
 packages/api-docs-builder-core/joyUi/projectSettings.ts      | 5 +++--
 packages/api-docs-builder-core/materialUi/projectSettings.ts | 2 +-
 packages/api-docs-builder-core/muiSystem/projectSettings.ts  | 4 +++-
 packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts | 2 +-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/api-docs-builder-core/joyUi/projectSettings.ts b/packages/api-docs-builder-core/joyUi/projectSettings.ts
index 5162b1879cabb5..b3c96fdffb070d 100644
--- a/packages/api-docs-builder-core/joyUi/projectSettings.ts
+++ b/packages/api-docs-builder-core/joyUi/projectSettings.ts
@@ -26,8 +26,9 @@ export const projectSettings: ProjectSettings = {
     // Container's demo isn't ready
     // GlobalStyles's demo isn't ready
     return (
-      filename.match(/(ThemeProvider|CssVarsProvider|Container|ColorInversion|GlobalStyles)/) !==
-      null
+      filename.match(
+        /(ThemeProvider|CssVarsProvider|Container|ColorInversion|GlobalStyles|InitColorSchemeScript)/,
+      ) !== null
     );
   },
   translationPagesDirectory: 'docs/translations/api-docs-joy',
diff --git a/packages/api-docs-builder-core/materialUi/projectSettings.ts b/packages/api-docs-builder-core/materialUi/projectSettings.ts
index d15e28be91055e..18b7dcf6a5928a 100644
--- a/packages/api-docs-builder-core/materialUi/projectSettings.ts
+++ b/packages/api-docs-builder-core/materialUi/projectSettings.ts
@@ -28,7 +28,7 @@ export const projectSettings: ProjectSettings = {
   getComponentInfo: getMaterialUiComponentInfo,
   translationLanguages: LANGUAGES,
   skipComponent(filename: string) {
-    return filename.match(/(ThemeProvider|CssVarsProvider|Grid2)/) !== null;
+    return filename.match(/(ThemeProvider|CssVarsProvider|InitColorSchemeScript|Grid2)/) !== null;
   },
   translationPagesDirectory: 'docs/translations/api-docs',
   generateClassName: generateUtilityClass,
diff --git a/packages/api-docs-builder-core/muiSystem/projectSettings.ts b/packages/api-docs-builder-core/muiSystem/projectSettings.ts
index e9d8a4d7fa8c18..b07151a3ed78b2 100644
--- a/packages/api-docs-builder-core/muiSystem/projectSettings.ts
+++ b/packages/api-docs-builder-core/muiSystem/projectSettings.ts
@@ -23,7 +23,9 @@ export const projectSettings: ProjectSettings = {
   getComponentInfo: getSystemComponentInfo,
   translationLanguages: LANGUAGES,
   skipComponent(filename) {
-    return filename.match(/(ThemeProvider|CssVarsProvider|GlobalStyles)/) !== null;
+    return (
+      filename.match(/(ThemeProvider|CssVarsProvider|GlobalStyles|InitColorSchemeScript)/) !== null
+    );
   },
   translationPagesDirectory: 'docs/translations/api-docs',
   generateClassName: generateUtilityClass,
diff --git a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
index 70f6968d0b4952..db2abf548a1630 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -786,7 +786,7 @@ export default async function generateComponentApi(
     throw new Error(
       'Unable to find demos. \n' +
         `Be sure to include \`components: ${reactApi.name}\` in the markdown pages where the \`${reactApi.name}\` component is relevant. ` +
-        'Every public component should have a demo. ',
+        'Every public component should have a demo.\nFor internal component, add the name of the component to the `skipComponent` method of the product.',
     );
   }
 

From 0e3832811a59fb2dd72fea11a061f5e727804a56 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 10:10:25 +0700
Subject: [PATCH 21/21] pnpm install

---
 pnpm-lock.yaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 70a02ce08c3f1e..842a19a22a84a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -470,8 +470,8 @@ importers:
   benchmark:
     dependencies:
       '@babel/runtime':
-        specifier: ^7.24.6
-        version: 7.24.6
+        specifier: ^7.24.7
+        version: 7.24.7
       '@chakra-ui/system':
         specifier: ^2.6.2
         version: 2.6.2(@emotion/react@11.11.4(@types/react@18.2.55)(react@18.2.0))(@emotion/styled@11.11.5(@emotion/react@11.11.4(@types/react@18.2.55)(react@18.2.0))(@types/react@18.2.55)(react@18.2.0))(react@18.2.0)