Customize Theme

Jumbo follows the standards defined by MUI (version 5) to customize the theme. It makes things easy for you to just follow along with what MUI suggests and to paint your app with the desired look and feel.

How to Setup Default Theme

To setup your default theme follow the below steps:

Step 1 - Set Default Config Variable

Go to src/app/config/main.js. Here in this file, you can find a config variable which is an object. You can setup this variable as mentioned below. Where mainTheme, headerTheme, sidebarTheme and footerTheme are theme objects as mentioned here in MUI Documentation.

const config = {
  //other key value pairs
  theme: {
    main: mainTheme,
    header: {
      ...mainTheme,
      ...headerTheme
    },
    sidebar: {
      ...mainTheme,
      ...sidebarTheme,
    },
    footer: {
      ...mainTheme,
      ...footerTheme,
    }
  },
  //other key value pairs
};

Step 2 - Set init Prop of the <JumboTheme />

You will only need to apply this step if you have changed the property name "theme" to something else in the config object mentioned in above step 1. Otherwise, just ignore this step.

<JumboTheme /> is a provider which provides the theme variable and hooks available throughout the app. It accepts an init prop which must be an object having four props main, header, sidebar and footer as mentioned in the Step 1.

You can find the use of <JumboTheme /> in the src/app/App.js and can pass the init prop there. So, after that, your code will look like below:

... other wrappers
<JumboTheme init={config.theme}>
   ...children components
</JumboTheme>
... other wrappers closes

To know more about how to update theme colors, font family, shapes, shadows etc. Just follow the Theme Customization topic detailed on MUI documentation website.