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 },
  },
}
 
const themeOptions = (publicRuntimeConfig, pathname) => {
  let themeOptions
 
  /*
    YOU CAN ALSO REMOVE updateTheme function
    AND FOLLOWING ENTIRE switch case BLOCK.
  */
  const updateTheme = (themeName) => {
    publicRuntimeConfig.theme = themeName
    themeOptions = themesOptions[publicRuntimeConfig.theme]
  }
 
  switch (pathname) {
    case '/':
    case '/grocery1' || '/grocery2' || '/grocery3':
    case '/gadget-shop':
    case '/fashion-shop':
    case '/superstore-shop':
      updateTheme(THEMES.DEFAULT)
      break
 
    case '/furniture-shop':
      updateTheme(THEMES.FURNITURE)
      break
 
    case '/healthbeauty-shop':
      updateTheme(THEMES.HEALTH)
      break
 
    case '/gift-shop':
      updateTheme(THEMES.GIFT)
      break
 
    default:
      themeOptions = themesOptions[publicRuntimeConfig.theme]
      break
  }
  /*
        IF YOU REMOVE THE switch case, YOU NEED TO ASSIGN VALUE TO themeOptions
        E.G. themeOptions = themesOptions[THEMES.DEFAULT];
    */
  // themeOptions = themesOptions[THEMES.DEFAULT];
 
  return themeOptions
}
 
export default themeOptions

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 },
}