Theme does not apply to typography.
Hi, i created a simple refine app with react, remix and material ui using the following command:
npm create refine-app@latest
I selected the option for a custom theme, this generated a components folder containing Header, Layout, Title and Sider.
I created the following page to show an Imprint:
When switch theme with button at the top, the text color does not change.
What am I missing?
The page is integrated like this into refine:
9 Replies
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: You need to use the ThemeProvider component to inject a custom theme that you have created yourself. SOURCES: ./docs/api-reference/mui/customization/theme.md
Answer: You need to use the ThemeProvider component to inject a custom theme that you have created yourself. SOURCES: ./docs/api-reference/mui/customization/theme.md
Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
modern-teal•2y ago
When i switch to the example
finefoods-mui
i can see that this works. But the only difference I can spot is that they are not using a custom Layout. But the custom Layout was just auto generated from your command line tool, there is nothing special in there.
This is the autogenerated Layout that i am using
exotic-emerald•2y ago
Hello @Deleted User
Can you try to wrap with <ThemeProvider> ? See the docs here:
https://refine.dev/docs/api-reference/mui/customization/mui-custom-theme/
Theme | refine
Theme specifies the color of the components, the darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc. You can either create your own Theme or use Themes that provide from Refine. There are two types of Themes: LightTheme and DarkTheme. LightTheme tend to have dark text on a light background, while DarkTheme have l...
modern-teal•2y ago
Hey @batuhanw thanks very much for the response. I think this is already being done by <ColorModeContextProvider />. Following is the code for that component:
modern-teal•2y ago
Pushed the problematic code here: https://github.com/0x66656c6978/remix-refine-mui-theme-switch-problem
GitHub
GitHub - 0x66656c6978/remix-refine-mui-theme-switch-problem
Contribute to 0x66656c6978/remix-refine-mui-theme-switch-problem development by creating an account on GitHub.
modern-teal•2y ago
If you navigate to http://localhost:3000/imprint and then try to switch the theme, it doesn't apply the white text in the dark mode.
exotic-emerald•2y ago
Thanks for the reproducible example! It seems it's not about provider as you mentioned, but the problem is with the theme itself. Themes are switching correctly, but I guess darkTheme's text definitions aren't correct. I took note on this issue, will ask folks tomorrow and get back to you! Best
modern-teal•2y ago
Awesome, thank you very much 🙏
@batuhanw I changed a bunch of other things and now it is working as intended. 🎉 Thanks for reaching out!!
exotic-emerald•2y ago
Hello @Deleted User, I'm happy the issue is resolved! 🎉
Can you share what was wrong and how you fixed it for future reference?