add InitColorSchemeScript

Author: siriwatknp

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,
 };

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<

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 };
 }

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() {