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