[material-ui] Handling complex themes/palettes about material-ui

[ZeeshanTamboli]

@mightym I did not understand your issue. Could you provide a minimal reproduction? It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

[mightym]

hey @ZeeshanTamboli thanks for your reply!

Well this is less a technical question, more a conceptual question how to handle complex themes in MUI.

I try to rephrase in a single line:

What would you do if 2 different components A & B rely on primary for the background color in your light theme but on the dark theme the background color for A is still primary but on B its a slight variation of primary?

[ZeeshanTamboli]

What would you do if 2 different components A & B rely on primary for the background color in your light theme but on the dark theme the background color for A is still primary but on B its a slight variation of primary?

I would use theme.palette.mode to check for dark mode and apply the slight variation of primary which you have defined in your custom theme. I really don't understand your issue.

[mightym]

@ZeeshanTamboli see and thats why you will end up with something extremely complex like in my code example. Because in your approach you will end up with a lot of conditions based on the current theme. What you need is an intermediate level like my theme styles. But for sure you could write conditions in you components.

[ZeeshanTamboli]

What you need is an intermediate level like my theme styles

Okay, so what's the problem with it? What issue is it causing? I see that you are saying the following:

But this has some downsides. Eg. using the color palette properties on components wouldn't reflect my theme anymore. And many others.

But I can't check with a reproduction. It would be better if you can provide a reproduction.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.