[docs-infra] Provide a hook or function we can dynamic inject our custom theme options using Google Chrome extension

[Vxee]

Related page

https://mui.com/material-ui/react-button/

Kind of issue

Other

Issue description

I created a couple of theme configurations that follow the official customize components style guidelines. These configurations are designed to enhance the visual consistency of components. I intend to develop a Chrome extension that incorporates these theme options. When activated, this extension will apply my custom theme, overriding the default Material-UI theme, particularly when browsing Material-UI documentation pages. This will allow users to immediately experience the updated style upon enabling the extension. Additionally, by sharing my theme configuration on GitHub, I hope to assist a wider audience. However, upon inspecting the MUI doc site's source code, I haven't found a direct method to dynamically inject my theme configuration. Given that the configuration is an object, one potential approach is to compile it before performing the injection.

Context

No response

Search keywords: chrome extension, dynamic inject theme

[ZeeshanTamboli]

You can utilize createTheme to dynamically inject your custom theme. You can also access your custom theme using the useTheme hook.

[github-actions]

👋 Thanks for using our open-source projects!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[Vxee]

NO, I mean we want to use chrome extension to inject my custom theme config to MUI official doc site, so the doc site style will change after enable this chrome extension. I hope you can provide a way we can do this. @ZeeshanTamboli

[ZeeshanTamboli]

@Vxee Personally, I don't think I'll be able to dedicate time to this. There's a similar feature for allowing users to inject their preferences in the documentation, but it's only for custom colors - https://mui.com/material-ui/customization/color/#playground. I'll reopen this issue and label it as a feature. Feel free to explore the documentation code and work on it. If you're up for it, you can create a pull request.

[Vxee]

Thanks for your response, I will try to create a PR if it is possible.

[Vxee]

#42879 I have created a PR, please help to review it, thanks. @ZeeshanTamboli

[DiegoAndai]

Thanks for the proposal @Vxee

We should check this with the docs infra team before proceeding. @mui/docs-infra, what do you think about this feature?

[Vxee]

Thanks for the proposal @Vxee

We should check this with the docs infra team before proceeding. @mui/docs-infra, what do you think about this feature?

Thanks for your response. Do you know who we can talk to in the docs infra team? @DiegoAndai

[bharatkashyap]

Thanks for the proposal @Vxee

We should check this with the docs infra team before proceeding. @mui/docs-infra, what do you think about this feature?

For the feature: what additional benefit does changing the entire theme add over changing the theme of just the demo? I imagine adding a toggle which allows switching themes on demos might work similarly. We could work on that as part of Docs Infra; supporting an injectTheme option seems a little excessive for us internally.

I'll wait for the rest of Docs Infra to chime in.

[Vxee]

Thanks for the proposal @Vxee
We should check this with the docs infra team before proceeding. @mui/docs-infra, what do you think about this feature?

For the feature: what additional benefit does changing the entire theme add over changing the theme of just the demo? I imagine adding a toggle which allows switching themes on demos might work similarly. We could work on that as part of Docs Infra; supporting an injectTheme option seems a little excessive for us internally.

I'll wait for the rest of Docs Infra to chime in.

Thanks for your information. Our team heavily utilizes the MUI, we have customized over 90% of the MUI component styles based on our design system. While we still want to see the API usage on the MUI documentation site, we would like the demo styles to reflect our custom styles. Therefore, we hope the documentation site can support injectTheme to achieve this. The current toggle option does not meet our requirements.

It would be fine if you could allow us to add this function in docs infra.

[alexfauquette]

The demo with the custom theme feature makes sense. But the proposed solution seems like a workaround. So we should be sure it does not impact the majority of our other users.

My main concern with the proposed approach is about the import * as MUI from @mui/material. It seems this would defeat any attempt to do some tree shaking.

[Vxee]

The demo with the custom theme feature makes sense. But the proposed solution seems like a workaround. So we should be sure it does not impact the majority of our other users.

My main concern with the proposed approach is about the import * as MUI from @mui/material. It seems this would defeat any attempt to do some tree shaking.

You are right! I can modify my current implementation, I will do a dynamic import for the @mui/material after checking the window.injectTheme has declared.

The purpose I want to expose MUI to global is in the custom theme, it will use import { xxxComponentClasses } from '@mui/material' and some utility functions provided by MUI. If you have any better solutions for achieving this, I would be glad to hear them. @alexfauquette

[Vxee]

@DiegoAndai @alexfauquette I have changed my implementation. It will not impact the majority of users. Please help to review it. We need this feature, thanks.

[oliviertassinari]

This issue was mislabeled, it's not "docs", it's "docs-infra".

Same as in https://www.notion.so/mui-org/docs-infra-Sign-in-experience-on-the-docs-paid-515a3b858e4a4fd8b612581d2b92294d?pvs=4#f0fc2d459909491b930b7641b74d83c6.