Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Jul 3, 2024
Merged

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

merged 7 commits into from
Jul 3, 2024

Conversation

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Jul 3, 2024 •
edited
Loading

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 •
edited
Loading

Netlify deploy preview

@material-ui/core: parsed: +0.11% , gzip: +0.14%
@mui/joy: parsed: +0.12% , gzip: +0.16%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 92d1600

mnajdova
mnajdova reviewed Jul 3, 2024
View reviewed changes
docs/data/joy/customization/dark-mode/dark-mode.md Outdated
### 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

@mnajdova mnajdova Jul 3, 2024

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.

mnajdova
mnajdova approved these changes Jul 3, 2024
View reviewed changes
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

cherniavskii commented Jul 3, 2024

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?

This was referenced Jul 3, 2024
Merged
Merged
@siriwatknp
Copy link
Member Author

siriwatknp commented Jul 4, 2024

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.

@siriwatknp siriwatknp mentioned this pull request Jul 4, 2024
Merged
1 task
This was referenced Jul 26, 2024
Open
Open
This was referenced Jul 27, 2024
Open
Open
This was referenced Jul 27, 2024
Open
Open
@mattboddy47 mattboddy47 mentioned this pull request Jul 27, 2024
Open
@issam-seghir issam-seghir mentioned this pull request Jul 27, 2024
Open
This was referenced Aug 10, 2024
Open
Open
Open
Open
Open
@patrickrizzardi patrickrizzardi mentioned this pull request Aug 10, 2024
Open
This was referenced Aug 11, 2024
Open
Open
Open
Open
@Crushoverride007 Crushoverride007 mentioned this pull request Aug 11, 2024
Open
@loka-capco loka-capco mentioned this pull request Aug 11, 2024
Open
@FaroukAmr FaroukAmr mentioned this pull request Aug 11, 2024
Open
@RTHariSankar RTHariSankar mentioned this pull request Aug 11, 2024
Open
@nachodev-ui nachodev-ui mentioned this pull request Aug 11, 2024
Open
@DanneelsSophie DanneelsSophie mentioned this pull request Aug 11, 2024
Open
@aqibawan12 aqibawan12 mentioned this pull request Aug 11, 2024
Open
@GitLukeW GitLukeW mentioned this pull request Aug 11, 2024
Open
@sergivj sergivj mentioned this pull request Aug 11, 2024
Open
@Poseidon-G Poseidon-G mentioned this pull request Aug 11, 2024
Open
This was referenced Aug 12, 2024
Closed
Closed
Closed
Closed
Closed
Closed
This was referenced Aug 13, 2024
Open
Open
This was referenced Aug 13, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mnajdova mnajdova mnajdova approved these changes

Assignees

No one assigned

Labels

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

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@siriwatknp @mui-bot @cherniavskii @mnajdova