Skip to content

[material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router#42829

Merged
siriwatknp merged 7 commits intomui:masterfrom
siriwatknp:feat/InitColorSchemeScript
Jul 3, 2024
Merged

[material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router#42829
siriwatknp merged 7 commits intomui:masterfrom
siriwatknp:feat/InitColorSchemeScript

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jul 3, 2024

Cherry picked from #42247 to unblock MUI X on mui/mui-x#13712

@siriwatknp siriwatknp changed the title [material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router (#42247) [material-ui][joy-ui] Add InitColorSchemeScript for Next.js App Router Jul 3, 2024
@mui-bot
Copy link

mui-bot commented Jul 3, 2024

### 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:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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:

Maybe rephrase, as it is no longer a script.

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added one comment on the instructions. As it is cherry-pick I am not diving too deep into the implementaiton.

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 3, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jul 3, 2024
@siriwatknp siriwatknp merged commit a2972e8 into mui:master Jul 3, 2024
@cherniavskii
Copy link
Member

Thanks @siriwatknp
I've added a comment about this in #42247 (comment) before I discovered this PR 👍🏻

To double-check, is the deprecation notice intentional for the v5?
Since the getInitColorSchemeScript is still available in v6 (and deprecated), perhaps v5 shouldn't log deprecation messages that could e.g. make the tests fail?

@siriwatknp
Copy link
Member Author

To double-check, is the deprecation notice intentional for the v5?
Since the getInitColorSchemeScript is still available in v6 (and deprecated), perhaps v5 shouldn't log deprecation messages that could e.g. make the tests fail?

Yes, the deprecation should happen on v6. I will open another PR to remove the warning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: joy-ui Specific to Joy UI. v5.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants