[material-ui] Handling complex themes/palettes

[mightym]

Summary

I've been using MUI lately on a larger project. Compared to building a custom UI Lib from scratch it had tons of advantages. With one downside: the color palette of the project was so versatile that I couldn't handle most parts of it with MUI's theme approach.

Examples

An exaggerated example to explain the issue:

We had a primary color red that is used as a background color for button variants on our light theme. On our dark theme the primary color is blue. But not all buttons should have a 1:1 the blue color. They needed to have others shades or sometimes even different colors.

We had this issue in so many places that I basically ended up creating themes where I defined the colors for every component like this:

Which I injected into the theme and then used in my component overrides like this:

  {
          props: { variant: 'secondary' },
          style: {
            color: theme.styles.button.secondary.default.color,
            backgroundColor:
              theme.styles.button.secondary.default.backgroundColor,
            '&:hover': {
              backgroundColor:
                theme.styles.button.secondary.hover.backgroundColor,
            },
            '&:active': {
              color: theme.styles.button.secondary.active.color,
              backgroundColor:
                theme.styles.button.secondary.active.backgroundColor,
            },
          },
        },

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

Motivation

My motivation is to find out are there any plans/considerations that something like this might also be handled with MUI? Or did you encounter similar issues in the past? Maybe there is another better way how this can be solved.

Search keywords: theme complex palette

[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[bot]]

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.