I am trying to understand the theming of MUI. There is a section dedicated to theming. I understand that I can change the theme. My question is:

• There are three colors I can define inside primary color, namely: main, dark and light. I could not figure out what light color property inside of primary does.

This link shows the color used by MUI https://mui.com/material-ui/customization/default-theme/. If you expand palette > primary. There is light color property but I could not see how or where it is used. I tried on button but that color does not appear on any state(hover, active) of button

NOTE: I don't believe its related to dark and light theme.

CodePudding user response：

Yes, it's not related to the light/dark theme, the mode property is responsible for this.

pallete -> mode: 'light'/'dark' - switching between the modes.

The pallete -> main -> light is just a color which you can configure and use through ypur app. But it's not only the main property, in pallete you can see from the docs that there are a lot of different theming use cases like success, secondary, info, etc., and all of them have the light property. So you can use the light and dark variants of a certain color. The use cases are many and differ.

Ref to mui pallete docs: https://mui.com/material-ui/customization/palette/

CodePudding user response：

@Dobromir Kirov, Thanks for the answer. I believe all the colors(main, light, dark) are not used on the every component. The link below demonstrates the example of usage:

https://codesandbox.io/s/confident-pine-3wpr8p?file=/demo.js

In the example I can see:

1. The main and dark color of success is used on the Button.
2. The light color is of the success is used on the Alert.

Even though I have defined all three colors (main, dark, light). It depends on the component.