Theme

Bazaar Theme Setup

  • theme/theme-provider.jsx is the main theme file.
  • theme/theme-colors.js Contains theme colors (Primary, Secondary & etc.)
  • theme/components.js Overrides the MUI default component styles
  • theme/typography.js Sets fontFamily and fontSize

Theme Folder Structure

src/
├── theme/
    ├── components.js
    ├── theme-colors.js
    ├── theme-options-sample.js
    ├── theme-options.js
    ├── theme-provider.jsx
    ├── typography.js

Components

Overrides the component styles of the mui inside src/theme/components

Theme Color

Override or Change the colors inside src/theme/theme-colors

export const primary = {
  100: '#FCE9EC',
  200: '#F8C7CF',
  300: '#F07D90',
  400: '#EC6178',
  500: '#D23F57',
  600: '#E63E58',
  700: '#E3364E',
  800: '#DF2E44',
  900: '#D91F33',
}
 
export const secondary = {
  100: '#e8e8ee',
  200: '#b9bacb',
  300: '#8a8ca8',
  400: '#5b5d85',
  500: '#141850',
  600: '#0F3460',
  700: '#101340',
  800: '#0e1138',
  900: '#0c0e30',
  main: '#0F3460',
  dark: '#0c0e30',
}
 
export const themeColors = {
  secondary,
  error,
  warning,
  success,
  text: { primary: grey[900], secondary: grey[800], disabled: grey[400] },
  divider: grey[200],
  grey: { ...grey },
  paste: { ...paste },
  info: { ...blue },
  marron: { ...marron },
  background: { default: grey[100] },
}

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.

const themesOptions = {
  [THEMES.DEFAULT]: {
    typography,
    breakpoints,
    components: { ...components },
    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
  },
  [THEMES.GROCERY]: {
    typography,
    breakpoints,
    components: { ...components },
    palette: { primary: { ...primary, light: primary[100] }, ...themeColors },
  },
  [THEMES.FURNITURE]: {
    typography,
    breakpoints,
    components: { ...components },
    palette: { primary: { ...paste, light: paste[100] }, ...themeColors },
  },
  [THEMES.HEALTH]: {
    typography,
    breakpoints,
    components: { ...components },
    palette: { primary: { ...blue, light: blue[100] }, ...themeColors },
  },
  [THEMES.GIFT]: {
    typography,
    breakpoints,
    components: { ...components },
    palette: { primary: { ...marron, light: marron[100] }, ...themeColors },
  },
}
 
export default function themeOptions(pathname) {
  const themeMappings = [
    { paths: ['/grocery-4'], theme: THEMES.GREEN },
    { paths: ['/gift-shop'], theme: THEMES.GIFT },
    { paths: ['/furniture-2'], theme: THEMES.ORANGE },
    { paths: ['/furniture-3'], theme: THEMES.GOLD },
    { paths: ['/furniture-1', '/medical'], theme: THEMES.PASTE },
    {
      paths: ['/gadget-3', '/health-beauty', '/admin', '/vendor'],
      theme: THEMES.HEALTH,
    },
  ]
 
  const selectedMapping = themeMappings.find((mapping) =>
    mapping.paths.some((path) => pathname.startsWith(path)),
  )
 
  const themeOption = themesOptionList[selectedMapping?.theme || THEMES.DEFAULT]
 
  return themeOption
}

Typography

Override or Change the typography inside src/theme/typography

import { openSans } from 'app/layout'
 
export const fontSize = 14
 
export const typography = {
  fontSize,
  htmlFontSize: 16,
  fontFamily: openSans.style.fontFamily,
  body1: { fontSize },
  body2: { fontSize },
}
Mobile Navigation BarNavigation