How to use Theme Palette in Material UI Part-2

Material UI Theme

In this blog we are going to learn Material UI Theme, Theme is an object in material UI, by default design is stored in this theme object. You can change the colors, the typography, the component and much more. 

First of all, we will talk about default theme .

A default theme is a set of objects and in these objects, design objects are stored in by default.

• Palette
• Spacing
• Shape
• Mixins
• Shadows
• Typography
• Transition 
• zIndex
• Breakpoints

Palette consists of default color in material UI “primary, secondary, error, warning, info and success”.

• primary - used to represent primary interface elements for a user. It's the color displayed most frequently across your app's screens and components.

• secondary - used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.

• error - used to represent interface elements that the user should be made aware of.

• warning - used to represent potentially dangerous actions or important messages.

• info - used to present information to the user that is neutral and not necessarily important.

• success - used to indicate the successful completion of an action that user triggered.

In this color object you will see two more colors “light and dark” because when we are going to convert our application, light theme into dark theme then the color is converted into light to dark.

Example: -

 

Output: -

In this example we was creating our own button theme with the help of createTheme hook then we add our color in the palette object then passing theme props like this theme={theme} in the themeProvider component, when we create custom theme then we provide our whole application in themeProvider component. Now we are able to use our theme.

In this this blog we learned about customTheme and palette. In the next blog we will cover “Spacing object”.