JumboTheme

JumboTheme is the MUI theme provider for the @jumbo framework. It supports four independent theme regions — main, header, sidebar, and footer — each with their own MUI Theme instance. The createJumboTheme utility composes them into the JumboThemeConfig type consumed by JumboTheme.

createJumboTheme

createJumboTheme accepts four MUI themes (one per region) and returns a JumboThemeConfig object:

typescript

// @jumbo/utilities/helpers.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';
 
const themeConfig = createJumboTheme(mainTheme, headerTheme, sidebarTheme, footerTheme);

The theme config is stored in CONFIG.THEME (src/config/index.ts) and passed to JumboTheme via the root layout.

JumboTheme props

Prop	Type	Required	Description
`init`	`JumboThemeConfig`	Yes	The composed theme config from `createJumboTheme`
`children`	`ReactNode`	Yes	Application tree

Basic usage

tsx

// src/app/[lang]/layout.tsx (excerpt)
import { JumboTheme } from '@jumbo/components/JumboTheme';
import { CONFIG } from '@/config';
 
export default function RootLayout({ children }) {
  return (
    <JumboTheme init={CONFIG.THEME}>
      {children}
    </JumboTheme>
  );
}

Theme region providers

Inside JumboTheme, each region is wrapped with its own nested ThemeProvider. Sub-components access their region theme via the matching context hook:

Hook	Region	Used in
`useJumboTheme()`	Main (page body)	Any component needing the main MUI theme
`useJumboHeaderTheme()`	Header	Header components
`useJumboSidebarTheme()`	Sidebar	Sidebar components
`useJumboFooterTheme()`	Footer	Footer components

Example — reading the header theme in a custom header component:

tsx

'use client';
 
import { useJumboHeaderTheme } from '@jumbo/components/JumboTheme';
 
export function HeaderBackground() {
  const { headerTheme } = useJumboHeaderTheme();
  return (
    <div style={{ background: headerTheme.palette.background.default }}>
      {/* header content */}
    </div>
  );
}

Theme files

Token files live under src/themes/ grouped by region and mode:

src/themes/
  main/
    default.ts    ← light main theme
    dark.ts       ← dark main theme
    semi-dark.ts  ← semi-dark main theme
  header/
    default.ts
    dark.ts
    semi-dark.ts
  sidebar/
    default.ts
    dark.ts
    semi-dark.ts
  footer/
    default.ts
    dark.ts
    semi-dark.ts

Each file exports a standard MUI theme object created with createTheme.

Switching themes at runtime

The CustomizerSettings drawer uses useJumboTheme and useJumboThemeContext to update any region theme at runtime. To switch the main theme programmatically:

typescript

'use client';
 
import { useJumboTheme } from '@jumbo/components/JumboTheme';
import { mainThemeDark } from '@/themes/main/dark';
 
export function DarkModeToggle() {
  const { setMuiTheme } = useJumboTheme();
 
  return (
    <button onClick={() => setMuiTheme(mainThemeDark)}>
      Enable Dark Mode
    </button>
  );
}

Demo layouts override the theme

Each demo layout wraps JumboTheme with its own CONFIG* object. For example, Demo 4 uses a full dark stack via CONFIG4 in src/components/Demo4Layout/themes/index.ts. To create a custom layout variant with its own color scheme, follow the same pattern.

JumboThemeConfig type

typescript

// @jumbo/types/JumboThemeContextType.ts
interface JumboThemeConfig {
  main:    Theme;
  header:  Theme;
  sidebar: Theme;
  footer:  Theme;
}

The Theme type is the standard MUI Theme from @mui/material/styles.