JumboTheme

JumboTheme is the top-level MUI theme provider for the @jumbo framework. It wraps MUI's ThemeProvider and adds independent sub-theme contexts for the header, sidebar, and footer regions, plus an extended Theme type that carries type, sidebar overlay colors, and navbar color tokens.

Import

typescript

import { JumboTheme } from '@jumbo/components';
import { createJumboTheme } from '@jumbo/utilities/helpers';
import type { JumboThemeConfig } from '@jumbo/types';

JumboTheme

Props

Prop	Type	Required	Description
`init`	`JumboThemeConfig`	Yes	Initial theme config built with `createJumboTheme()`
`children`	`ReactNode`	Yes	Application tree

Usage

tsx

// src/App.tsx
import { JumboTheme } from '@jumbo/components';
import { CONFIG } from '@/config';
 
function App() {
  return (
    <JumboTheme init={CONFIG.THEME}>
      {/* rest of the app */}
    </JumboTheme>
  );
}

createJumboTheme()

Assembles a JumboThemeConfig from four MUI ThemeOptions objects. Each region inherits all keys from mainTheme and then applies its own overrides on top.

Signature

typescript

function createJumboTheme(
  mainTheme: ThemeOptions,
  headerTheme: ThemeOptions,
  sidebarTheme: ThemeOptions,
  footerTheme: ThemeOptions,
): JumboThemeConfig

Example

typescript

// src/config/index.ts
import { createJumboTheme } from '@jumbo/utilities/helpers';
import { mainTheme }    from '../themes/main/default';
import { headerTheme }  from '../themes/header/default';
import { sidebarTheme } from '../themes/sidebar/default';
import { footerTheme }  from '../themes/footer/default';
 
export const CONFIG = {
  THEME: createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme),
};

JumboThemeConfig type

typescript

interface JumboThemeConfig {
  main:    ThemeOptions;   // Applied to the content area
  header:  ThemeOptions;   // mainTheme merged with headerTheme
  sidebar: ThemeOptions;   // mainTheme merged with sidebarTheme
  footer:  ThemeOptions;   // mainTheme merged with footerTheme
}

Extended Theme type

JumboTheme augments MUI's Theme and ThemeOptions with:

typescript

// Additional fields on ThemeOptions / Theme
{
  type?: 'light' | 'semi-dark' | 'dark';
  jumboComponents?: {
    JumboNavbar?: {
      colors?: {
        nav?: string;
        navHover?: string;
        navActive?: string;
        subMenuColor?: string;
        subMenuHoverColor?: string;
        subMenuHoverBg?: string;
        subMenuActiveBg?: string;
      };
    };
  };
}

The type field is read by JumboRTL and various components to apply mode-specific styles. The jumboComponents.JumboNavbar tokens control the nav item colors independently of the main palette.

Theme hooks

All hooks are available from their respective sub-component paths.

useJumboTheme()

Reads and updates the main MUI theme:

typescript

import { useJumboTheme } from '@jumbo/components/JumboTheme';
 
const { theme, setTheme } = useJumboTheme();
 
// Switch to dark palette at runtime
setTheme({ ...theme, palette: { mode: 'dark' } });

useJumboThemeHeader()

Reads and updates the header sub-theme:

typescript

import { useJumboThemeHeader } from '@jumbo/components/JumboTheme';
 
const { theme: headerTheme, setTheme: setHeaderTheme } = useJumboThemeHeader();

useJumboThemeSidebar()

Reads and updates the sidebar sub-theme:

typescript

import { useJumboThemeSidebar } from '@jumbo/components/JumboTheme';
 
const { theme: sidebarTheme, setTheme: setSidebarTheme } = useJumboThemeSidebar();

useJumboThemeFooter()

Reads and updates the footer sub-theme:

typescript

import { useJumboThemeFooter } from '@jumbo/components/JumboTheme';
 
const { theme: footerTheme, setTheme: setFooterTheme } = useJumboThemeFooter();

Runtime theme switching

The CustomizerSettings drawer in src/components/CustomizerSettings/ uses these hooks to swap all four theme regions simultaneously when the user picks light, semi-dark, or dark mode. Follow the same pattern when building a custom theme picker.

Sub-providers

JumboTheme internally renders JumboThemeHeader, JumboThemeSidebar, and JumboThemeFooter. Each of these is a standard MUI ThemeProvider scoped to its region. Components inside a layout region automatically pick up the correct sub-theme without any extra configuration.