Theme

Bazaar Theme Setup

The Bazaar theme system is built on top of Material-UI (MUI) and provides a flexible way to customize the appearance of your e-commerce application. It supports multiple color schemes, responsive breakpoints, typography, and component customizations.

Theme Folder Structure

src/theme/
├── core/
│   ├── index.ts          # Exports all core theme modules
│   ├── palette.ts        # Color palette definitions
│   ├── components.ts     # MUI component overrides
│   ├── typography.ts     # Font and text styling
│   └── theme-colors.ts   # Color definitions and MUI extensions
├── theme-provider.tsx    # Theme provider component
├── theme-options.ts      # Main theme configuration
├── theme-options-sample.ts # Sample configuration for customization
├── types.ts             # TypeScript type definitions
└── utils.ts             # Utility functions for styling

1. Basic Theme Setup

The theme is already integrated into your application through the ThemeProvider in app/layout.tsx:

<ThemeProvider>
  <RTL>{children}</RTL>
</ThemeProvider>

2. Available Color Schemes

The theme supports multiple color palettes:

  • DARK - Default dark theme
  • RED - Red theme (used for grocery stores)
  • GREEN - Green theme (used for grocery-4)
  • ORANGE - Orange theme (used for furniture-2)
  • GOLD - Gold theme (used for furniture-3)
  • PASTE - Paste theme (used for furniture-1, medical)
  • HEALTH - Health theme (used for health-beauty, admin, vendor)
  • GIFT - Gift theme (used for gift-shop)
  • BLUISH - Bluish theme
  • YELLOW - Yellow theme

3. Route-Based Theme Switching

The theme automatically changes based on the current route:

const themeMappings = [
  { paths: ['/grocery-4'], color: COLORS.GREEN },
  { paths: ['/gift-shop'], color: COLORS.GIFT },
  { paths: ['/furniture-2'], color: COLORS.ORANGE },
  { paths: ['/health-beauty', '/admin', '/vendor'], color: COLORS.HEALTH },
]

Theme Options

We have multiple color theme for different shops. E.G. Default, Grocery, Health & etc. theme-options.js file returns one color theme based on currently displayed demo on browser(by detecting url path)

Of course you don't need this. You can delete theme-options.js file and rename theme-options-sample.js to theme-options.js

Now theme-options.js file will always return one color theme.

import { type ThemeOptions } from "@mui/material/styles";
import { components, typography, getPalette } from "./core";
import { COLORS } from "./types";
 
export default function themeOptions(pathname: string) {
  const selectedPalette = getPalette(COLORS.DARK);
 
  const themeOption: ThemeOptions = {
    typography,
    components,
    palette: selectedPalette,
    breakpoints: {
      values: {
        xs: 0,
        sm: 600,
        md: 960,
        lg: 1280,
        xl: 1600,
        xxl: 1920
      }
    },
  };
 
  return themeOption;
}

Typography

Modify src/theme/core/typography.ts to change fonts and text styles:

export const typography: Typography = {
  fontSize: 14,
  fontFamily: geist.style.fontFamily,
  h1: { fontSize: 30, fontWeight: 600, lineHeight: 1.5 },
  h2: { fontSize: 25, fontWeight: 600, lineHeight: 1.5 },
};
Mobile Navigation BarNavigation