diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md index eed4715ff98bd4..a44b8226f49266 100644 --- a/docs/data/material/customization/dark-mode/dark-mode.md +++ b/docs/data/material/customization/dark-mode/dark-mode.md @@ -146,6 +146,14 @@ To set a different default mode, pass the `defaultMode` prop to the ThemeProvide The `defaultMode` value can be `'light'`, `'dark'`, or `'system'`. ::: +### InitColorSchemeScript component + +If you are using the `InitColorSchemeScript` component to [prevent SSR flicker](/material-ui/customization/css-theme-variables/configuration/#preventing-ssr-flickering), you have to set the `defaultMode` with the same value you passed to the `ThemeProvider` component: + +```js + +``` + ## Styling in dark mode Use the `theme.applyStyles` utility to apply styles for a specific mode. diff --git a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx index 3c7d424de6ed5e..fa0a8b987ba7c3 100644 --- a/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx +++ b/packages/mui-system/src/InitColorSchemeScript/InitColorSchemeScript.tsx @@ -8,6 +8,11 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme'; export const DEFAULT_ATTRIBUTE = 'data-color-scheme'; export interface InitColorSchemeScriptProps { + /** + * The default mode when the storage is empty (user's first visit) + * @default 'system' + */ + defaultMode?: 'system' | 'light' | 'dark'; /** * The default color scheme to be used on the light mode * @default 'light' @@ -49,6 +54,7 @@ export interface InitColorSchemeScriptProps { export default function InitColorSchemeScript(options?: InitColorSchemeScriptProps) { const { + defaultMode = 'system', defaultLightColorScheme = 'light', defaultDarkColorScheme = 'dark', modeStorageKey = DEFAULT_MODE_STORAGE_KEY, @@ -93,7 +99,7 @@ export default function InitColorSchemeScript(options?: InitColorSchemeScriptPro __html: `(function() { try { let colorScheme = ''; - const mode = localStorage.getItem('${modeStorageKey}') || 'system'; + const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}'; const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}'; const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}'; if (mode === 'system') {