Customize Theme

Change the look and feel of your web app as per your design

In Jumbo, The theme is divided in four main sections as given below:

1. Main Theme

2. Header Theme

3. Sidebar Theme

4. Footer Theme

Using these four themes, the theme for the whole application can easily be setup as per the requirement.

The Main Theme is applied throughout the web app but Header Theme, Sidebar Theme and Footer Theme can be used to overwrite the theme style for these three sections respectively.

These four themes are managed in the /src/app/_themes folder. Here, in this folder, you can see there are four separate folders to organise the theme object for individual four sections as mentioned above.

This theme object is an extension to the MUI's theme object. So, you can follow all the theme related documentation available at mui.com to customise and extending the theme.

Setting up a New Theme

To setup a new theme (let's say themex), you need to create following four files:

1. /src/app/_themes/main/themex.ts

2. /src/app/_themes/header/themex.ts

3. /src/app/_themes/sidebar/themex.ts

4. /src/app/_themes/footer/themex.ts

In each file above, you can export a theme variable as in the below sample code snippet

export const mainTheme: ThemeOptions = {
  type: 'light',
  breakpoints: {
    values: {
      xs: 0,
      sm: 576,
      md: 768,
      lg: 992,
      xl: 1200,
    },
  },

  palette: {
    primary: {
      main: '#7352C7',
      light: '#A67FFB',
      dark: '#5E3BB7',
      contrastText: '#FFF',
    },
    secondary: {
      main: '#E44A77',
      light: '#FF7EA6',
      dark: '#DF295E',
      contrastText: '#FFF',
    },
    error: {
      main: '#E73145',
      light: '#FF6A70',
      dark: '#AD001E',
      contrastText: '#FFF',
    },
    warning: {
      main: '#F39711',
      light: '#FFC84C',
      dark: '#BB6900',
      contrastText: '#FFF',
    },
    info: {
      main: '#2EB5C9',
      light: '#6FE7FC',
      dark: '#008598',
      contrastText: '#FFF',
    },
    success: {
      main: '#3BD2A2',
      light: '#78FFD3',
      dark: '#00A073',
      contrastText: '#FFF',
    },
    text: {
      primary: '#475259',
      secondary: '#8595A6',
      disabled: '#A2B2C3',
    },
    divider: '#DEE2E6',
    background: {
      paper: '#FFFFFF',
      default: '#F5F7FA',
    },
    action: {
      active: '#475259',
      hover: '#F5F7FA',
    },
  },
  
  jumboComponents: {
    JumboSearch: {
      background: '#F5F5F5',
    },
    JumboNavbar: {
      nav: {
        action: {
          active: '#7352C7',
          hover: '#7352C7',
        },
        background: {
          active: 'rgba(115, 82, 199, 0.15)',
          hover: '#E9ECEF',
        },
        tick: {
          active: '#7352C7',
          hover: '#ADB5BD',
        },
      },
    },
    ...
  },
  components: {
    MuiTableCell: {
      styleOverrides: {
        root: {
          borderColor: `rgb(0, 0, 0, 0.1)`,
        },
      },
    },
    MuiMenuItem: {
      styleOverrides: {
        root: {
          minHeight: 'auto',
        },
      },
    },
    MuiCard: {
      styleOverrides: {
        root: {
          borderRadius: 12,
          boxShadow: `0 0.5rem 1.25rem rgba(115, 82, 199, 0.175)`,
        },
      },
    },
    ....
  },
};

In the Header, Footer and Sidebar Themes, as mentioned previously, you can only specify those properties (theme variables) which need be overridden. Rest of the properties will be inherited from Main Theme.

Setting Up the Default Theme

To set a theme as default theme, you can make the changes in /src/app/_config/index.ts file. In this file, you can set the THEME property of the CONFIG variable as mentioned below:

import { footerTheme } from '@app/_themes/footer/themex';
import { headerTheme } from '@app/_themes/header/themex';
import { mainTheme } from '@app/_themes/main/themex';
import { sidebarTheme } from '@app/_themes/sidebar/themex';

import { createJumboTheme } from '@jumbo/utilities/helpers';

export const CONFIG: ConfigType = {
  THEME: createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme),
  ...
};

The createJumboTheme function creates an object like

{

main: mainTheme,

header: headerTheme,

sidebar: sidebarTheme,

footer: footerTheme

}

and when this object is provided to the JumboTheme component then JumboTheme manages the theme for the four sections individually.

Understanding how this CONFIG.THEME variable is being used

In the root layout (/src/app/layout.tsx), you can see that the CONFIG.THEME property we have set above is being passed in the init prop of the JumboTheme as follows:

<JumboTheme init={CONFIG.THEME}>
    <CssBaseline />
    {children}
</JumboTheme>

This is all you need to do to setup a default theme for your web app.

Dynamically Changing Theme

Jumbo usages Context API to manage the active theme state of the web app. You can leverage the custom hooks offered by Jumbo to make the theme changes dynamically.

Following are some of the custom hooks you can utilise:

useJumboTheme

import { useJumboTheme } from '@jumbo/components/JumboTheme/hooks';

const { theme, setTheme, muiLocale, setMuiLocale } = useJumboTheme();

useJumboHeaderTheme

import { useJumboHeaderTheme } from '@jumbo/components/JumboTheme/hooks';

const { headerTheme, setHeaderTheme } = useJumboHeaderTheme();

useJumboSidebarTheme

import { useJumboSidebarTheme } from '@jumbo/components/JumboTheme/hooks';

const { sidebarTheme, setSidebarTheme } = useJumboHeaderTheme();

useJumboFooterTheme

import { useJumboFooterTheme } from '@jumbo/components/JumboTheme/hooks';

const { sidebarTheme, setSidebarTheme } = useJumboHeaderTheme();