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

   Nextly/
          ├── tailwind.config.js
              ├── screens
              ├── colors
              ├── fontSize
              ├── spacing
              ├── zIndex
              ├── boxShadow
              ├── dropShadow

Theme Color

 
 colors: {
        bodybg: "#F3F6F9",
        // primary
        primaryLighter: "#CCDDFF",
        primaryLight: "#6698FA",
        primary: "#6698FA",
        primaryDark: "#3E7BFA",
        primaryDarker: "#3568D4",
 
        // secondary
        secondaryLighter: "#B5EDDD",
        secondaryLight: "#86EFAC",
        secondary: "#22C55E",
        secondaryDark: "#16A34A",
        secondaryDarker: "#166534",
        // info
        infoLighter: "#D2F3FF",
        infoLight: "#85D3F0",
        info: "#33B5E6",
        infoDark: "#2991B8",
        // error
        errorLighter: "#F1DCDB",
        errorLight: "#EF8582",
        error: "#E5342F",
        errorDark: "#B72A26",
        // gray
        gray: "#EFF4FB",
        "gray-1": "#FFFFFF",
        "gray-2": "#F4F6F8",
        "gray-3": "#DFE3E8",
        "gray-4": "#C4CDD5",
        "gray-5": "#919EAB",
        "gray-6": "#637381",
        "gray-7": "#454F5B",
        "gray-8": "#212B36",
        lightGray: "#EDEDED",
        lightGray2: "rgb(196, 205, 213)",
        // black
        black: "#161C24",
        "black-2": "#010101",
        bodydarkbg: "#1A222C",
        // =======================
        current: "currentColor",
        transparent: "transparent",
        white: "#FFFFFF",
        body: "#64748B",
        bodydark: "#AEB7C0",
        bodydark1: "#DEE4EE",
        bodydark2: "#8A99AF",
        primaryLite: "#d6d8ff",
        stroke: "#E2E8F0",
        cardbg: "#F5F5F5",
        whiten: "#F1F5F9",
        whiter: "#F5F7FD",
        boxdark: "#24303F",
        strokedark: "#2E3A47",
        "form-strokedark": "#3d4d60",
        "form-input": "#1d2a39",
        "meta-1": "#DC3545",
        "meta-2": "#EFF2F7",
        "meta-3": "#10B981",
        "meta-4": "#313D4A",
        "meta-5": "#259AE6",
        "meta-6": "#FFBA00",
        "meta-7": "#FF6766",
        "meta-8": "#F0950C",
        "meta-9": "#E5E7EB",
        "meta-10": "#0FADCF",
        success: "#219653",
        danger: "#D34053",
        warning: "#FFA70B",
        borderColor: "rgb(69, 79, 91)",
      },
Quick StartCheckout