Nextstore 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.tsx
              ├── globalStyles.ts
              ├── index.ts
              ├── index.ts
              ├── shape.ts
              ├── palette.ts
              ├── typography.ts

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  = "'Poppins', sans-serif"; 
const FONT_SECONDARY = "'Noto Kufi Arabic', sans-serif";