Skip to content
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.

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

[docs] Add a guide for setting dark mode by default #34839

Merged
merged 22 commits into from Nov 7, 2022

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Oct 21, 2022

Preview: https://deploy-preview-34839--material-ui.netlify.app/joy-ui/customization/dark-mode/

From the docs feedback.

How do I set global dark mode by default?

@siriwatknp siriwatknp added docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy labels Oct 21, 2022
@mui-bot
Copy link

mui-bot commented Oct 21, 2022

Messages
📖 Netlify deploy preview: https://deploy-preview-34839--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against a69e414

Co-authored-by: danilo leal <67129314+danilo-leal@users.noreply.github.com>
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

👍

Thoughts:

  1. A demo could help a lot to be able to build reproductions that are dark mode only. It could also serve as a visual regression test case.
  2. I wonder if setting the default is more important than the rest of the page, so maybe it should be closer to the top.
  3. The dark mode docs page is under "How to guide" but all the pages that aren't API references are also how to guides in our docs, only that they are groups in "logical" sections. So per this rational, I think that it could be better to have the docs about the dark mode under the Customization section. Meaning, we could use "How to guide" for pages we don't know where else to put.

@siriwatknp
Copy link
Member Author

👍

Thoughts:

  1. A demo could help a lot to be able to build reproductions that are dark mode only. It could also serve as a visual regression test case.
  2. I wonder if setting the default is more important than the rest of the page, so maybe it should be closer to the top.
  3. The dark mode docs page is under "How to guide" but all the pages that aren't API references are also how to guides in our docs, only that they are groups in "logical" sections. So per this rational, I think that it could be better to have the docs about the dark mode under the Customization section. Meaning, we could use "How to guide" for pages we don't know where else to put.

Agree on all points, let me update them altogether.

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

Would it make sense to have this demo and the others in TypeScript? It could serve as a good stress test to spot TypeScript issues.

docs/data/joy/customization/dark-mode/DarkModeByDefault.js Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/DarkModeByDefault.js Outdated Show resolved Hide resolved
Comment on lines 13 to 15
useEnhancedEffect(() => {
setNode(document.getElementById('dark-mode-by-default'));
}, []);
Copy link
Member

Choose a reason for hiding this comment

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

Off topic

This could suggest that nesting dark with a light theme in Joy UI might be a bit of a struggle (it's not a single rendering step).

docs/data/joy/customization/dark-mode/DarkModeByDefault.js Outdated Show resolved Hide resolved
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 25, 2022
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 1, 2022
@siriwatknp
Copy link
Member Author

@oliviertassinari it is ready for a second review.

Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

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

This is looking great, thanks for putting it up, Jun! Sam will definitely do a thorough copy review but I already took the opportunity to do some content rearranging + writing tweaks. I wonder how to make it better when similar and close sections have exact same content, though.

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

It looks good 👍

docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
docs/data/joy/customization/dark-mode/dark-mode.md Outdated Show resolved Hide resolved
@siriwatknp
Copy link
Member Author

@samuelsycamore @danilo-leal Wow 😲, it looks much much better. The content flow is so smooth.

@hbjORbj hbjORbj merged commit 107a137 into mui:master Nov 7, 2022
the-mgi pushed a commit to the-mgi/material-ui that referenced this pull request Nov 17, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants