[system] Add defaultMode to InitColorSchemeScript
#44139
Conversation
Netlify deploy previewBundle size reportDetails of bundle changes (Toolpad) |
| @@ -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 | |||
There was a problem hiding this comment.
Should we inverse the docs order? It looks like if <InitColorSchemeScript defaultMode="dark"> is used, <ThemeProvider defaultMode="dark"> is a no-op.
It would make sense to document this as well?
Now, developers need to set both because the initial load might not have InitColorSchemeScript or System based components while the next page has. If all pages have InitColorSchemeScript, then I guess it's a 100% no-op.
Actually, It seems that the whole page is wrong. This is MUI System docs no? so it shouldn't be documented in Material UI.
We are also missing the API table page for InitColorSchemeScript.
| * The default mode when the storage is empty (user's first visit) | ||
| * @default 'system' | ||
| */ | ||
| defaultMode?: 'system' | 'light' | 'dark'; |
There was a problem hiding this comment.
I'm not sure about the prop name: "default"? It sounds more like "initial" as there is a notion of session. Should we rename it?
| @@ -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) | |||
There was a problem hiding this comment.
| * The default mode when the storage is empty (user's first visit) | |
| * The default mode when the storage is empty (user's first visit). |
x al the others on this file.
Edit. Fixed in #44187.
|
@siriwatknp what do you think about my previous comments? |
closes #43972
Root cause
InitColorSchemeScripthas a hard-coded default mode assystemwhen the user first visit to the site, however this contradict the flow if the project has<ThemeProvider defaultMode="light">on user's dark environment.Solution
defaultModetoInitColorSchemeScript.defaultMode.Preview: https://deploy-preview-44139--material-ui.netlify.app/material-ui/customization/dark-mode/#initcolorschemescript-component