From 99959e3b218dbdbd92e703d0326fc36bd33d2ae2 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Fri, 14 Jun 2024 11:31:36 +0700
Subject: [PATCH 1/6] Add `InitColorSchemeScript` for Next.js App Router
 (#42247)

---
 .../joy/customization/dark-mode/dark-mode.md  | 38 +++++++++++++---
 .../dark-mode-optimization.md                 |  6 +--
 .../css-theme-variables/customization.md      |  6 +--
 .../css-theme-variables/migration.md          | 12 +++---
 .../css-theme-variables/usage/usage.md        | 34 +++++++++++----
 docs/pages/_document.js                       |  8 ++--
 docs/pages/blog/first-look-at-joy.md          |  6 +--
 .../joyUi/projectSettings.ts                  |  5 ++-
 .../materialUi/projectSettings.ts             |  2 +-
 .../muiSystem/projectSettings.ts              |  4 +-
 .../ApiBuilders/ComponentApiBuilder.ts        |  2 +-
 .../InitColorSchemeScript.spec.tsx            |  4 ++
 .../InitColorSchemeScript.test.tsx            | 13 ++++++
 .../InitColorSchemeScript.tsx                 | 14 ++++++
 .../src/InitColorSchemeScript/index.ts        |  1 +
 .../mui-joy/src/styles/CssVarsProvider.tsx    | 38 ++++++++++++----
 .../InitColorSchemeScript.spec.tsx            |  4 ++
 .../InitColorSchemeScript.test.tsx            | 13 ++++++
 .../InitColorSchemeScript.tsx                 | 14 ++++++
 .../src/InitColorSchemeScript/index.ts        |  1 +
 .../src/styles/CssVarsProvider.tsx            | 20 +++++----
 .../InitColorSchemeScript.test.js}            | 43 ++++++++-----------
 .../InitColorSchemeScript.tsx}                | 14 +++++-
 .../src/InitColorSchemeScript/index.ts        |  2 +
 .../src/cssVars/createCssVarsProvider.d.ts    |  4 +-
 .../src/cssVars/createCssVarsProvider.js      |  6 +--
 .../src/cssVars/createCssVarsProvider.test.js |  5 ++-
 .../src/cssVars/useCurrentColorScheme.test.js |  2 +-
 .../src/cssVars/useCurrentColorScheme.ts      |  2 +-
 packages/rsc-builder/buildRsc.ts              | 14 +++++-
 30 files changed, 242 insertions(+), 95 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
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
 create mode 100644 packages/mui-material/src/InitColorSchemeScript/index.ts
 rename packages/mui-system/src/{cssVars/getInitColorSchemeScript.test.js => InitColorSchemeScript/InitColorSchemeScript.test.js} (78%)
 rename packages/mui-system/src/{cssVars/getInitColorSchemeScript.tsx => InitColorSchemeScript/InitColorSchemeScript.tsx} (86%)
 create mode 100644 packages/mui-system/src/InitColorSchemeScript/index.ts

diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md
index 45ed52be23f0a2..f3cb415cd8e6f0 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,31 @@ 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 App Router
+
+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 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}>
+      <body>
+        <InitColorSchemeScript />
+        <CssVarsProvider>
+          <CssBaseline />
+          {children}
+        </CssVarsProvider>
+      </body>
+    </html>
+  );
+}
+```
 
 ### Next.js Pages Router
 
@@ -129,7 +153,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 +161,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript />
           <Main />
           <NextScript />
         </body>
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/data/material/experimental-api/css-theme-variables/customization.md b/docs/data/material/experimental-api/css-theme-variables/customization.md
index 6c8776bf98005e..f788e64fb848d7 100644
--- a/docs/data/material/experimental-api/css-theme-variables/customization.md
+++ b/docs/data/material/experimental-api/css-theme-variables/customization.md
@@ -289,12 +289,10 @@ function App() {
 }
 ```
 
-For a server-side application, provide the same value to [`getInitColorSchemeScript()`](/material-ui/experimental-api/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/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md
index 02cf6c5a4bddc2..0ea3e3707ac76f 100644
--- a/docs/data/material/experimental-api/css-theme-variables/migration.md
+++ b/docs/data/material/experimental-api/css-theme-variables/migration.md
@@ -180,15 +180,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() {
@@ -196,7 +196,7 @@ export default class MyDocument extends Document {
       <Html data-color-scheme="light">
         <Head>...</Head>
         <body>
-          {getInitColorSchemeScript()}
+          <InitColorSchemeScript />
           <Main />
           <NextScript />
         </body>
@@ -212,10 +212,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/data/material/experimental-api/css-theme-variables/usage/usage.md b/docs/data/material/experimental-api/css-theme-variables/usage/usage.md
index 08089eb2def2a3..ad3bf34327fff2 100644
--- a/docs/data/material/experimental-api/css-theme-variables/usage/usage.md
+++ b/docs/data/material/experimental-api/css-theme-variables/usage/usage.md
@@ -116,15 +116,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() {
@@ -132,7 +151,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>
@@ -159,7 +178,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
@@ -172,10 +191,9 @@ 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`
 - `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
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index a800959e8aa63b..c2ffa343a34cf4 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -5,8 +5,8 @@ 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 { getInitColorSchemeScript as getJoyInitColorSchemeScript } from '@mui/joy/styles';
+import MuiInitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+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';
@@ -173,8 +173,8 @@ export default class MyDocument extends Document {
           />
         </Head>
         <body>
-          {getMuiInitColorSchemeScript({ defaultMode: 'system' })}
-          {getJoyInitColorSchemeScript({ defaultMode: 'system' })}
+          <MuiInitColorSchemeScript defaultMode="system" />
+          <JoyInitColorSchemeScript defaultMode="system" />
           <Main />
           <script
             // eslint-disable-next-line react/no-danger
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>
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 c3d87f07b44ee7..417641ad2ac2eb 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 035fb40d839eb2..82f4fdf12d6f66 100644
--- a/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
+++ b/packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts
@@ -773,7 +773,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.',
     );
   }
 
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/InitColorSchemeScript/InitColorSchemeScript.spec.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.spec.tsx
new file mode 100644
index 00000000000000..6201877fec9e3c
--- /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 nonce="foo-bar" />;
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');
+  });
+});
diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
new file mode 100644
index 00000000000000..e5d53638202a2d
--- /dev/null
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+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
new file mode 100644
index 00000000000000..89691518881b67
--- /dev/null
+++ b/packages/mui-material/src/InitColorSchemeScript/index.ts
@@ -0,0 +1 @@
+export { default } from './InitColorSchemeScript';
diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index 75f5c6e6f18154..e9fb73a875df72 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -12,21 +12,23 @@ import experimental_extendTheme, {
 import createTypography from './createTypography';
 import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
+import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
 
 const defaultTheme = experimental_extendTheme();
 
-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-mui-color-scheme',
-  modeStorageKey: 'mui-mode',
-  colorSchemeStorageKey: 'mui-color-scheme',
+  attribute: defaultConfig.attribute,
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
   defaultColorScheme: {
-    light: 'light',
-    dark: 'dark',
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme,
   },
   resolveTheme: (theme) => {
     const newTheme = {
diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
similarity index 78%
rename from packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
rename to packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
index 9bc4c50d8c306f..b3e63d899c1d63 100644
--- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.test.js
+++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
@@ -1,13 +1,14 @@
 /* eslint-disable no-eval */
+import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui-internal/test-utils';
-import getInitColorSchemeScript, {
+import { createRenderer } from '@mui/internal-test-utils';
+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 +41,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 +51,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 +65,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 +75,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 +85,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 +101,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 +111,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 86%
rename from packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
rename to packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx
index d392ddbc8d053d..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,9 +43,13 @@ 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) {
+export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps) {
   const {
     defaultMode = 'light',
     defaultLightColorScheme = 'light',
@@ -51,10 +58,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() {
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 a3219951a3bef5..ab8c0e4f613793 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,7 +92,7 @@ export interface CreateCssVarsProviderResult<
     >,
   ) => React.ReactElement;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
-  getInitColorSchemeScript: typeof getInitColorSchemeScript;
+  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 e4969c4ad5b44e..7f12ae923f6d2a 100644
--- a/packages/mui-system/src/cssVars/createCssVarsProvider.js
+++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js
@@ -5,11 +5,11 @@ import deepmerge from '@mui/utils/deepmerge';
 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 =
@@ -374,7 +374,7 @@ export default function createCssVarsProvider(options) {
       : designSystemColorScheme.dark;
 
   const getInitColorSchemeScript = (params) =>
-    systemGetInitColorSchemeScript({
+    InitColorSchemeScript({
       attribute: defaultAttribute,
       colorSchemeStorageKey: defaultColorSchemeStorageKey,
       defaultMode: designSystemMode,
diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js
index 36728bfe69e0b2..fa632d5e705171 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/useCurrentColorScheme.test.js b/packages/mui-system/src/cssVars/useCurrentColorScheme.test.js
index 0c0fedd5f7e6ed..f0abd8f03501f0 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 '../InitColorSchemeScript/InitColorSchemeScript';
 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..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';
+} from '../InitColorSchemeScript/InitColorSchemeScript';
 
 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 a31674176307c1..e028e5625b25d4 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,14 +22,23 @@ const PROJECTS: Project[] = [
   {
     name: 'material',
     rootPath: path.join(process.cwd(), 'packages/mui-material'),
+    ignorePaths: [
+      'packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // RSC compatible
+    ],
   },
   {
     name: 'joy',
     rootPath: path.join(process.cwd(), 'packages/mui-joy'),
+    ignorePaths: [
+      'packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
+    ],
   },
   {
     name: 'system',
     rootPath: path.join(process.cwd(), 'packages/mui-system'),
+    ignorePaths: [
+      'packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx', // no need 'use client' because of `styles/index` export
+    ],
   },
   {
     name: 'styled-engine',
@@ -113,7 +123,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 300c29ded48306e13b5a7058eb387e510a0f1b8f Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 3 Jul 2024 13:50:32 +0700
Subject: [PATCH 2/6] preserve existing behavior

---
 .../mui-system/src/cssVars/getInitColorSchemeScript.tsx    | 7 +++++++
 packages/mui-system/src/cssVars/index.ts                   | 2 ++
 2 files changed, 9 insertions(+)
 create mode 100644 packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx

diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
new file mode 100644
index 00000000000000..81e3bfe040022c
--- /dev/null
+++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx
@@ -0,0 +1,7 @@
+// TODO: remove this file in v6
+import * as React from 'react';
+import InitColorSchemeScript, { InitColorSchemeScriptProps } from '../InitColorSchemeScript';
+
+export default function getInitColorSchemeScript(params?: InitColorSchemeScriptProps) {
+  return <InitColorSchemeScript {...params} />;
+}
diff --git a/packages/mui-system/src/cssVars/index.ts b/packages/mui-system/src/cssVars/index.ts
index c8a640a0a241bd..59e082e035b04f 100644
--- a/packages/mui-system/src/cssVars/index.ts
+++ b/packages/mui-system/src/cssVars/index.ts
@@ -6,6 +6,8 @@ export type {
   ColorSchemeContextValue,
 } from './createCssVarsProvider';
 
+// TODO: remove this export in v6 in favor of InitColorSchemeScript
 export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
+
 export { default as prepareCssVars } from './prepareCssVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';

From 0c4bd1faeb9939819a193dbcde4a9a1d84e5282e Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 3 Jul 2024 14:15:01 +0700
Subject: [PATCH 3/6] fix merge conflict

---
 .../src/styles/CssVarsProvider.tsx            | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/mui-material/src/styles/CssVarsProvider.tsx b/packages/mui-material/src/styles/CssVarsProvider.tsx
index e9fb73a875df72..9824ae6e225d81 100644
--- a/packages/mui-material/src/styles/CssVarsProvider.tsx
+++ b/packages/mui-material/src/styles/CssVarsProvider.tsx
@@ -45,6 +45,25 @@ const {
   excludeVariablesFromRoot,
 });
 
+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,
   getInitColorSchemeScript,

From 0874a2975d8f52467d8db9365e13212574827f13 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 3 Jul 2024 14:29:07 +0700
Subject: [PATCH 4/6] fix test import

---
 .../src/InitColorSchemeScript/InitColorSchemeScript.test.tsx    | 2 +-
 .../src/InitColorSchemeScript/InitColorSchemeScript.test.tsx    | 2 +-
 .../src/InitColorSchemeScript/InitColorSchemeScript.test.js     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
index 0cff400e21c1ac..936033f0d3e181 100644
--- a/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
+++ b/packages/mui-joy/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';
 
 describe('InitColorSchemeScript', () => {
diff --git a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
index f2a5a6b417292f..26b42706587e45 100644
--- a/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
+++ b/packages/mui-material/src/InitColorSchemeScript/InitColorSchemeScript.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
 
 describe('InitColorSchemeScript', () => {
diff --git a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
index b3e63d899c1d63..d786ab28d929fe 100644
--- a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
+++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-eval */
 import * as React from 'react';
 import { expect } from 'chai';
-import { createRenderer } from '@mui/internal-test-utils';
+import { createRenderer } from '@mui-internal/test-utils';
 import InitColorSchemeScript, {
   DEFAULT_ATTRIBUTE,
   DEFAULT_MODE_STORAGE_KEY,

From 84c8c532f84148e3ca70334bee689f62592a74b8 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 3 Jul 2024 14:39:24 +0700
Subject: [PATCH 5/6] fix link

---
 .../experimental-api/css-theme-variables/customization.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/experimental-api/css-theme-variables/customization.md b/docs/data/material/experimental-api/css-theme-variables/customization.md
index f788e64fb848d7..9662f82e5404e1 100644
--- a/docs/data/material/experimental-api/css-theme-variables/customization.md
+++ b/docs/data/material/experimental-api/css-theme-variables/customization.md
@@ -289,7 +289,7 @@ function App() {
 }
 ```
 
-For a server-side application, provide the same value to [`InitColorSchemeScript`](/material-ui/customization/css-theme-variables/usage/#server-side-rendering):
+For a server-side application, provide the same value to [`InitColorSchemeScript`](/material-ui/experimental-api/css-theme-variables/usage/#server-side-rendering):
 
 ```js
 <InitColorSchemeScript defaultMode="dark" />

From 92d160036da3b8008c693b012debf9590c7111fb Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 3 Jul 2024 15:15:27 +0700
Subject: [PATCH 6/6] apply suggestion

---
 docs/data/joy/customization/dark-mode/dark-mode.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md
index f3cb415cd8e6f0..fba9c84dc02d62 100644
--- a/docs/data/joy/customization/dark-mode/dark-mode.md
+++ b/docs/data/joy/customization/dark-mode/dark-mode.md
@@ -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 `<InitColorSchemeScript />` 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), add the `<InitColorSchemeScript />` component before the `<CssVarsProvider />` component:
 
 ### Next.js App Router