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-infra] Support inject dynamic theme #42879

Merged
merged 10 commits into from
Aug 1, 2024

Conversation

Vxee
Copy link
Contributor

@Vxee Vxee commented Jul 7, 2024

Closes #41391

@mui-bot
Copy link

mui-bot commented Jul 7, 2024

Netlify deploy preview

https://deploy-preview-42879--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a69ab7f

@Vxee
Copy link
Contributor Author

Vxee commented Jul 7, 2024

I aim to have the documentation site expose a function in the window, such as getInjectTheme. This function will merge with the current docs theme and can be mounted on the window by a Chrome extension. Upon execution, getInjectTheme will return my custom theme options. Additionally, it is necessary to expose the React and MUI instances, as my compiled custom-theme.js depends on them.

@aarongarciah aarongarciah changed the title [docs]: support inject dynamic theme [docs] Support inject dynamic theme Jul 8, 2024
@zannager zannager added the docs Improvements or additions to the documentation label Jul 8, 2024
@ZeeshanTamboli ZeeshanTamboli removed their request for review July 8, 2024 14:24
@DiegoAndai
Copy link
Member

Replied here: #41391 (comment)

@alexfauquette
Copy link
Member

For which part of your code needs to get access to react? When looking at the code sample you provide, I see no reference to it.

For material, I see classeNames, which I assume could be replaced by their values, and types which will disappear when transformed to a js code.

Do you already have an implementation of the extension to see how it would work, and to test if it behaves as expected

image

@Vxee
Copy link
Contributor Author

Vxee commented Jul 30, 2024

@alexfauquette Yes, I have implemented this Chrome extension. After switching the toggle in the extension, will apply our custom theme to the doc site. Here are some examples I can provide.
image
image
image

After consideration, we can not depend on MUI, we can compile to js code just like you said. But we still need react & react-jsx, because we override some components' default icons, it is ReactNode type, and after compile will need jsx to do the creation. As for the React, we have some custom compennts, need use some hooks API from React, like useForwardRef
image

Copy link
Member

@alexfauquette alexfauquette left a comment

Choose a reason for hiding this comment

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

Good for me @siriwatknp do you have an opinion about it?

@siriwatknp
Copy link
Member

siriwatknp commented Jul 31, 2024

@Vxee Can you provide the extension for us to test it or may be a recording?

Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>
@siriwatknp
Copy link
Member

@Vxee I changed the property to window.MaterialUI to match the branding.

@siriwatknp siriwatknp merged commit b8815f0 into mui:next Aug 1, 2024
17 of 18 checks passed
@Vxee
Copy link
Contributor Author

Vxee commented Aug 1, 2024

@siriwatknp Thanks a lot! Here is the demo.

MUI_extension_demo_2024-08-01_17.03.01.mp4

When will this function be available in MUI doc?

@oliviertassinari oliviertassinari changed the title [docs] Support inject dynamic theme [docs-infra] Support inject dynamic theme Sep 7, 2024
@oliviertassinari oliviertassinari added the scope: docs-infra Specific to the docs-infra product label Sep 7, 2024
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 scope: docs-infra Specific to the docs-infra product
Projects
None yet
7 participants