Theme

COMMERCEHOPE Theme Setup

  • theme/index.tsx is the main theme file.
  • theme/palette.ts Contains theme colors (Primary, Secondary & etc.)
  • theme/typography.ts Sets fontFamily and fontSize

Theme Folder Structure

   src/
          ├── theme/
              ├── overrides/
              ├── breakpoints.js
              ├── EmotionCache.jsx
              ├── globalStyles.js
              ├── palette.js
              ├── shadows.js
              ├── shape.js
              ├── ThemeRegistry.jsx
              ├── typography.js

Theme Color

const primary = {
  light: '#66B1FD',
  main: '#007DFC',
  dark: '#0064CA',
  contrastText: '#fff',
}
 
 const SECONDARY = {
  light: '#7200CC',
  main: '#3F0071',
  dark: '#34005C',
  contrastText: '#fff',
}
 
 const INFO = {
  light: '#74CAFF',
  main: '#1890FF',
  dark: '#0C53B7',
  contrastText: '#fff',
}
 
 const SUCCESS = {
  light: '#AAF27F',
  main: '#54D62C',
  dark: '#229A16',
  contrastText: '#fff',
}
 
 const WARNING = {
  light: '#FD811C',
  main: '#FFAB00',
  dark: '#CA5C02',
  contrastText: '#fff',
}
 
 const ERROR = {
  light: '#DB5757',
  main: '#D33131',
  dark: '#BD2828',
  contrastText: '#fff',
}
 
 
// For Light Mood
 
const text= { primary: grey[800], secondary: grey[600], disabled: grey[500] },
const background= { paper:#162031 , default:#0F172B },
 
// For dark Mood
 
const text  = { primary: grey #fff , secondary: grey[500], disabled: grey[600] },
const background = { paper:#162031 , default:#0F172B },

Typography

// Font Family
 
const FONT_PRIMARY = "'Figtree', sans-serif";
Quick StartFolder Structure