@swapper-finance/sdk/tools/swapper-theme-examples.json

JavaScript SDK form Swapper

{
  "generated": "2025-05-30T06:48:12.304Z",
  "baseUrl": "http://localhost:3001",
  "examples": [
    {
      "name": "Light Theme (Default)",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b",
      "type": "Theme Only"
    },
    {
      "name": "Dark Theme",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%7D",
      "type": "Theme Only"
    },
    {
      "name": "Uniswap Colors",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23ff37c6%22%2C%22secondaryColor%22%3A%22%23ff37c6%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Light with Brand Colors",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF6B35%22%2C%22secondaryColor%22%3A%22%23845EC2%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Dark with Brand Colors",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF6B35%22%2C%22secondaryColor%22%3A%22%23845EC2%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Corporate Blue Theme",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%230066CC%22%2C%22secondaryColor%22%3A%22%23004499%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Gaming Green Theme",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%2300FF88%22%2C%22secondaryColor%22%3A%22%2300CC66%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Crypto Orange Theme",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF8C00%22%2C%22secondaryColor%22%3A%22%23FF6347%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Full Custom Light",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%236C63FF%22%2C%22secondaryColor%22%3A%22%234A90E2%22%7D%2C%22componentStyles%22%3A%7B%22backgroundColor%22%3A%22%23FFFFFF%22%2C%22borderRadius%22%3A%2216px%22%2C%22width%22%3A%22450px%22%2C%22textColor%22%3A%22%231A1A1A%22%2C%22primaryButtonBackground%22%3A%22%236C63FF%22%2C%22primaryButtonText%22%3A%22%23FFFFFF%22%2C%22secondaryButtonBackground%22%3A%22%23F5F5F5%22%2C%22secondaryButtonText%22%3A%22%236C63FF%22%2C%22successColor%22%3A%22%2328A745%22%2C%22warningColor%22%3A%22%23FFC107%22%2C%22errorColor%22%3A%22%23DC3545%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Full Custom Dark",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23BB86FC%22%2C%22secondaryColor%22%3A%22%2303DAC6%22%7D%2C%22componentStyles%22%3A%7B%22backgroundColor%22%3A%22%23121212%22%2C%22borderRadius%22%3A%2212px%22%2C%22width%22%3A%22400px%22%2C%22textColor%22%3A%22%23E1E1E1%22%2C%22primaryButtonBackground%22%3A%22%23BB86FC%22%2C%22primaryButtonText%22%3A%22%23000000%22%2C%22secondaryButtonBackground%22%3A%22%23333333%22%2C%22secondaryButtonText%22%3A%22%23E1E1E1%22%2C%22successColor%22%3A%22%234CAF50%22%2C%22warningColor%22%3A%22%23FF9800%22%2C%22errorColor%22%3A%22%23F44336%22%2C%22cardBackground%22%3A%22%231E1E1E%22%2C%22inputBackground%22%3A%22%232A2A2A%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Financial Services",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%231B5E20%22%2C%22secondaryColor%22%3A%22%232E7D32%22%7D%2C%22componentStyles%22%3A%7B%22borderRadius%22%3A%228px%22%2C%22successColor%22%3A%22%234CAF50%22%2C%22warningColor%22%3A%22%23FF8F00%22%2C%22errorColor%22%3A%22%23D32F2F%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Fintech Dark",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%2300E676%22%2C%22secondaryColor%22%3A%22%231DE9B6%22%7D%2C%22componentStyles%22%3A%7B%22backgroundColor%22%3A%22%230A0A0A%22%2C%22cardBackground%22%3A%22%231A1A1A%22%2C%22borderRadius%22%3A%2210px%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Sunset Theme",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF6B6B%22%2C%22secondaryColor%22%3A%22%234ECDC4%22%7D%2C%22componentStyles%22%3A%7B%22backgroundColor%22%3A%22%232C1810%22%2C%22cardBackground%22%3A%22%233D2817%22%2C%22successColor%22%3A%22%2351CF66%22%2C%22warningColor%22%3A%22%23FFD43B%22%2C%22errorColor%22%3A%22%23FF6B6B%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Ocean Theme",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23228BE6%22%2C%22secondaryColor%22%3A%22%2315AABF%22%7D%2C%22componentStyles%22%3A%7B%22backgroundColor%22%3A%22%23F0F8FF%22%2C%22cardBackground%22%3A%22%23FFFFFF%22%2C%22borderRadius%22%3A%2220px%22%2C%22successColor%22%3A%22%2351CF66%22%2C%22warningColor%22%3A%22%23FFD43B%22%7D%7D",
      "type": "Theme Only"
    },
    {
      "name": "Dark Theme + Basic Ethereum",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=ethereum&dstToken=0xA0b86a33E6441b8b9fF8A91D0fe999c61F0DEE39&styles=%7B%22themeMode%22%3A%22dark%22%7D",
      "type": "Full Integration"
    },
    {
      "name": "Dark Theme + Polygon USDC",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=polygon&dstToken=0x3c499c542cef5e3811e1192ce70d8cc03d5c3359&styles=%7B%22themeMode%22%3A%22dark%22%7D",
      "type": "Full Integration"
    },
    {
      "name": "Light with Brand Colors + Basic Ethereum",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=ethereum&dstToken=0xA0b86a33E6441b8b9fF8A91D0fe999c61F0DEE39&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF6B35%22%2C%22secondaryColor%22%3A%22%23845EC2%22%7D%7D",
      "type": "Full Integration"
    },
    {
      "name": "Light with Brand Colors + Polygon USDC",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=polygon&dstToken=0x3c499c542cef5e3811e1192ce70d8cc03d5c3359&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%23FF6B35%22%2C%22secondaryColor%22%3A%22%23845EC2%22%7D%7D",
      "type": "Full Integration"
    },
    {
      "name": "Corporate Blue Theme + Basic Ethereum",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=ethereum&dstToken=0xA0b86a33E6441b8b9fF8A91D0fe999c61F0DEE39&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%230066CC%22%2C%22secondaryColor%22%3A%22%23004499%22%7D%7D",
      "type": "Full Integration"
    },
    {
      "name": "Corporate Blue Theme + Polygon USDC",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=polygon&dstToken=0x3c499c542cef5e3811e1192ce70d8cc03d5c3359&styles=%7B%22themeMode%22%3A%22light%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%230066CC%22%2C%22secondaryColor%22%3A%22%23004499%22%7D%7D",
      "type": "Full Integration"
    },
    {
      "name": "Gaming Green Theme + Basic Ethereum",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=ethereum&dstToken=0xA0b86a33E6441b8b9fF8A91D0fe999c61F0DEE39&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%2300FF88%22%2C%22secondaryColor%22%3A%22%2300CC66%22%7D%7D",
      "type": "Full Integration"
    },
    {
      "name": "Gaming Green Theme + Polygon USDC",
      "url": "http://localhost:3001/?integratorId=d6e438dfa14e80701b9b&dstChain=polygon&dstToken=0x3c499c542cef5e3811e1192ce70d8cc03d5c3359&styles=%7B%22themeMode%22%3A%22dark%22%2C%22brandTheme%22%3A%7B%22primaryColor%22%3A%22%2300FF88%22%2C%22secondaryColor%22%3A%22%2300CC66%22%7D%7D",
      "type": "Full Integration"
    }
  ],
  "themes": {
    "Light Theme (Default)": {},
    "Dark Theme": {
      "themeMode": "dark"
    },
    "Uniswap Colors": {
      "themeMode": "light",
      "brandTheme": {
        "primaryColor": "#ff37c6",
        "secondaryColor": "#ff37c6"
      }
    },
    "Light with Brand Colors": {
      "themeMode": "light",
      "brandTheme": {
        "primaryColor": "#FF6B35",
        "secondaryColor": "#845EC2"
      }
    },
    "Dark with Brand Colors": {
      "themeMode": "dark",
      "brandTheme": {
        "primaryColor": "#FF6B35",
        "secondaryColor": "#845EC2"
      }
    },
    "Corporate Blue Theme": {
      "themeMode": "light",
      "brandTheme": {
        "primaryColor": "#0066CC",
        "secondaryColor": "#004499"
      }
    },
    "Gaming Green Theme": {
      "themeMode": "dark",
      "brandTheme": {
        "primaryColor": "#00FF88",
        "secondaryColor": "#00CC66"
      }
    },
    "Crypto Orange Theme": {
      "themeMode": "dark",
      "brandTheme": {
        "primaryColor": "#FF8C00",
        "secondaryColor": "#FF6347"
      }
    },
    "Full Custom Light": {
      "themeMode": "light",
      "brandTheme": {
        "primaryColor": "#6C63FF",
        "secondaryColor": "#4A90E2"
      },
      "componentStyles": {
        "backgroundColor": "#FFFFFF",
        "borderRadius": "16px",
        "width": "450px",
        "textColor": "#1A1A1A",
        "primaryButtonBackground": "#6C63FF",
        "primaryButtonText": "#FFFFFF",
        "secondaryButtonBackground": "#F5F5F5",
        "secondaryButtonText": "#6C63FF",
        "successColor": "#28A745",
        "warningColor": "#FFC107",
        "errorColor": "#DC3545"
      }
    },
    "Full Custom Dark": {
      "themeMode": "dark",
      "brandTheme": {
        "primaryColor": "#BB86FC",
        "secondaryColor": "#03DAC6"
      },
      "componentStyles": {
        "backgroundColor": "#121212",
        "borderRadius": "12px",
        "width": "400px",
        "textColor": "#E1E1E1",
        "primaryButtonBackground": "#BB86FC",
        "primaryButtonText": "#000000",
        "secondaryButtonBackground": "#333333",
        "secondaryButtonText": "#E1E1E1",
        "successColor": "#4CAF50",
        "warningColor": "#FF9800",
        "errorColor": "#F44336",
        "cardBackground": "#1E1E1E",
        "inputBackground": "#2A2A2A"
      }
    },
    "Financial Services": {
      "themeMode": "light",
      "brandTheme": {
        "primaryColor": "#1B5E20",
        "secondaryColor": "#2E7D32"
      },
      "componentStyles": {
        "borderRadius": "8px",
        "successColor": "#4CAF50",
        "warningColor": "#FF8F00",
        "errorColor": "#D32F2F"
      }
    },
    "Fintech Dark": {
      "themeMode": "dark",
      "brandTheme": {
        "primaryColor": "#00E676",
        "secondaryColor": "#1DE9B6"
      },
      "componentStyles": {
        "backgroundColor": "#0A0A0A",
        "cardBackground": "#1A1A1A",
        "borderRadius": "10px"
      }
    },
    "Sunset Theme": {
      "themeMode": "dark",
      "brandTheme": {
        "primaryColor": "#FF6B6B",
        "secondaryColor": "#4ECDC4"
      },
      "componentStyles": {
        "backgroundColor": "#2C1810",
        "cardBackground": "#3D2817",
        "successColor": "#51CF66",
        "warningColor": "#FFD43B",
        "errorColor": "#FF6B6B"
      }
    },
    "Ocean Theme": {
      "themeMode": "light",
      "brandTheme": {
        "primaryColor": "#228BE6",
        "secondaryColor": "#15AABF"
      },
      "componentStyles": {
        "backgroundColor": "#F0F8FF",
        "cardBackground": "#FFFFFF",
        "borderRadius": "20px",
        "successColor": "#51CF66",
        "warningColor": "#FFD43B"
      }
    }
  },
  "integrations": {
    "Basic Ethereum": {
      "integratorId": "d6e438dfa14e80701b9b",
      "dstChain": "ethereum",
      "dstToken": "0xA0b86a33E6441b8b9fF8A91D0fe999c61F0DEE39"
    },
    "Polygon USDC": {
      "integratorId": "d6e438dfa14e80701b9b",
      "dstChain": "polygon",
      "dstToken": "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359"
    }
  }
}