Skip to main content

​
Theme Modes

Spice Flow components support both light and dark themes out of the box.

​
Basic Theme

<SwapWidget
  swapBatches={[]}
  supportedChains={[11155111]}
  theme="light" // or "dark"
/>

​
Custom Styling

Use the styles prop to customize every aspect of the SwapWidget appearance. The styling system provides comprehensive control over colors, typography, spacing, and interactive states.

​
Global Styles

<SwapWidget 
  swapBatches={[]}
  supportedChains={[11155111]}
  styles={{
    // Global styles applied to entire widget
    fontFamily: "Inter, system-ui, sans-serif",
    primaryColor: "#EA580C", // Used for buttons, flip arrow, active states
    
    // Background colors
    primaryBackground: "#ffffff", // Main container background
    secondaryBackground: "#f9fafb", // Asset selectors background
    tertiaryBackground: "#f3f4f6", // Token details, info cards
  }}
/>

​
Complete Styling Example

<SwapWidget
  swapBatches={[]}
  supportedChains={[11155111]}
  theme="light"
  styles={{
    // Global styles
    fontFamily: "Inter, system-ui, sans-serif",
    primaryColor: "#EA580C",
    primaryBackground: "#ffffff",
    secondaryBackground: "#f9fafb",
    tertiaryBackground: "#f3f4f6",
    
    // Main container
    container: {
      backgroundColor: "#ffffff",
      borderColor: "#e5e7eb",
      borderRadius: "16px",
      width: "100%",
      padding: "24px",
      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
    },
    
    // Asset selector styling
    assetSelector: {
      backgroundColor: "#f9fafb",
      borderColor: "#e5e7eb",
      borderRadius: "12px",
      padding: "16px",
      
      label: {
        color: "#374151",
        fontSize: "14px",
        fontWeight: "500",
        fontFamily: "Inter, sans-serif",
      },
      
      assetName: {
        color: "#1f2937",
        fontSize: "16px",
        fontWeight: "600",
        fontFamily: "Inter, sans-serif",
      },
      
      assetSymbol: {
        color: "#6b7280",
        fontSize: "14px",
        fontWeight: "400",
        fontFamily: "Inter, sans-serif",
      },
      
      balance: {
        color: "#6b7280",
        fontSize: "12px",
        fontWeight: "400",
        fontFamily: "Inter, sans-serif",
      },
      
      amountInput: {
        backgroundColor: "#ffffff",
        borderColor: "#d1d5db",
        color: "#1f2937",
        fontSize: "18px",
        fontWeight: "600",
        fontFamily: "Inter, sans-serif",
        borderRadius: "8px",
      },
    },
    
    // Token dropdown styling
    tokenDropdown: {
      backgroundColor: "#ffffff",
      borderColor: "#e5e7eb",
      borderRadius: "12px",
      
      tokenItem: {
        backgroundColor: "#ffffff",
        hoverBackgroundColor: "#f9fafb",
        borderColor: "#e5e7eb",
        padding: "12px 16px",
        
        tokenName: {
          color: "#1f2937",
          fontSize: "14px",
          fontWeight: "500",
          fontFamily: "Inter, sans-serif",
        },
        
        tokenSymbol: {
          color: "#6b7280",
          fontSize: "12px",
          fontWeight: "400",
          fontFamily: "Inter, sans-serif",
        },
        
        tokenBalance: {
          color: "#6b7280",
          fontSize: "12px",
          fontWeight: "400",
          fontFamily: "Inter, sans-serif",
        },
      },
    },
    
    // Button styling
    button: {
      backgroundColor: "#EA580C",
      hoverBackgroundColor: "#DC4E07",
      disabledBackgroundColor: "#d1d5db",
      color: "#ffffff",
      disabledColor: "#9ca3af",
      borderColor: "#EA580C",
      borderRadius: "12px",
      fontSize: "16px",
      fontWeight: "600",
      fontFamily: "Inter, sans-serif",
      padding: "16px 24px",
    },
    
    // Flip button
    flipButton: {
      backgroundColor: "#EA580C",
      hoverBackgroundColor: "#DC4E07",
      color: "#ffffff",
      borderColor: "#EA580C",
      borderRadius: "50%",
      size: "40px",
    },
    
    // Slippage settings
    slippageSettings: {
      backgroundColor: "#f9fafb",
      borderColor: "#e5e7eb",
      borderRadius: "12px",
      padding: "16px",
      
      label: {
        color: "#374151",
        fontSize: "14px",
        fontWeight: "500",
        fontFamily: "Inter, sans-serif",
      },
      
      presetButton: {
        backgroundColor: "#ffffff",
        hoverBackgroundColor: "#f3f4f6",
        activeBackgroundColor: "#EA580C",
        color: "#374151",
        activeColor: "#ffffff",
        borderColor: "#d1d5db",
        activeBorderColor: "#EA580C",
        borderRadius: "8px",
        fontSize: "14px",
        fontWeight: "500",
        fontFamily: "Inter, sans-serif",
        padding: "8px 16px",
      },
      
      customInput: {
        backgroundColor: "#ffffff",
        borderColor: "#d1d5db",
        focusBorderColor: "#EA580C",
        color: "#1f2937",
        fontSize: "14px",
        fontWeight: "500",
        fontFamily: "Inter, sans-serif",
        borderRadius: "8px",
        padding: "8px 12px",
      },
    },
    
    // Status display
    statusDisplay: {
      backgroundColor: "#f9fafb",
      borderColor: "#e5e7eb",
      borderRadius: "12px",
      padding: "12px",
      
      text: {
        color: "#374151",
        fontSize: "14px",
        fontWeight: "500",
        fontFamily: "Inter, sans-serif",
      },
      
      successColor: "#10b981",
      warningColor: "#f59e0b",
      errorColor: "#ef4444",
    },
    
    // Address display
    addressDisplay: {
      backgroundColor: "#f3f4f6",
      borderColor: "#d1d5db",
      borderRadius: "8px",
      padding: "8px 12px",
      fontSize: "12px",
      fontFamily: "monospace",
      color: "#1f2937",
      
      copyButton: {
        backgroundColor: "#e5e7eb",
        hoverBackgroundColor: "#d1d5db",
        color: "#374151",
        borderColor: "#d1d5db",
        borderRadius: "6px",
        padding: "4px 12px",
        fontSize: "12px",
        fontFamily: "Inter, sans-serif",
      },
    },
    
    // Error messages
    errorMessage: {
      backgroundColor: "#fef2f2",
      borderColor: "#fecaca",
      borderRadius: "12px",
      padding: "16px",
      color: "#dc2626",
      fontSize: "14px",
      fontWeight: "500",
      fontFamily: "Inter, sans-serif",
    },
    
    // Info cards
    infoCard: {
      backgroundColor: "#f9fafb",
      borderColor: "#e5e7eb",
      borderRadius: "12px",
      padding: "12px",
      
      title: {
        color: "#1f2937",
        fontSize: "14px",
        fontWeight: "500",
        fontFamily: "Inter, sans-serif",
      },
      
      description: {
        color: "#6b7280",
        fontSize: "12px",
        fontWeight: "400",
        fontFamily: "Inter, sans-serif",
      },
    },
  }}
/>

​
Styling Examples

​
Asset Selector Focus

Customize the asset selector appearance: 
<SwapWidget
  styles={{
    assetSelector: {
      backgroundColor: "#f8fafc",
      borderColor: "#e2e8f0",
      borderRadius: "16px",
      padding: "20px",
      
      label: {
        color: "#475569",
        fontSize: "12px",
        fontWeight: "600",
        textTransform: "uppercase",
        letterSpacing: "0.05em",
      },
      
      assetName: {
        color: "#1e293b",
        fontSize: "18px",
        fontWeight: "700",
      },
      
      assetSymbol: {
        color: "#64748b",
        fontSize: "14px",
        fontWeight: "500",
      },
      
      balance: {
        color: "#64748b",
        fontSize: "11px",
        fontWeight: "400",
      },
      
      amountInput: {
        backgroundColor: "#ffffff",
        borderColor: "#cbd5e1",
        color: "#0f172a",
        fontSize: "24px",
        fontWeight: "700",
        borderRadius: "12px",
        padding: "16px",
      },
    },
  }}
/>

​
Token Dropdown Customization

Style the token selection dropdown: 
<SwapWidget
  styles={{
    tokenDropdown: {
      backgroundColor: "#ffffff",
      borderColor: "#e2e8f0",
      borderRadius: "16px",
      boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
      
      tokenItem: {
        backgroundColor: "#ffffff",
        hoverBackgroundColor: "#f1f5f9",
        borderColor: "#e2e8f0",
        padding: "16px 20px",
        
        tokenName: {
          color: "#1e293b",
          fontSize: "16px",
          fontWeight: "600",
        },
        
        tokenSymbol: {
          color: "#64748b",
          fontSize: "14px",
          fontWeight: "500",
        },
        
        tokenBalance: {
          color: "#64748b",
          fontSize: "13px",
          fontWeight: "400",
        },
      },
    },
  }}
/>

​
Button States

Customize button appearance and states: 
<SwapWidget
  styles={{
    button: {
      backgroundColor: "#059669",
      hoverBackgroundColor: "#047857",
      disabledBackgroundColor: "#d1d5db",
      color: "#ffffff",
      disabledColor: "#9ca3af",
      borderColor: "#059669",
      borderRadius: "16px",
      fontSize: "18px",
      fontWeight: "700",
      fontFamily: "Inter, sans-serif",
      padding: "20px 32px",
      textTransform: "uppercase",
      letterSpacing: "0.05em",
    },
  }}
/>

​
Slippage Settings

Style the slippage configuration: 
<SwapWidget
  styles={{
    slippageSettings: {
      backgroundColor: "#f8fafc",
      borderColor: "#e2e8f0",
      borderRadius: "16px",
      padding: "20px",
      
      label: {
        color: "#374151",
        fontSize: "14px",
        fontWeight: "600",
        marginBottom: "12px",
      },
      
      presetButton: {
        backgroundColor: "#ffffff",
        hoverBackgroundColor: "#f1f5f9",
        activeBackgroundColor: "#3b82f6",
        color: "#374151",
        activeColor: "#ffffff",
        borderColor: "#d1d5db",
        activeBorderColor: "#3b82f6",
        borderRadius: "12px",
        fontSize: "14px",
        fontWeight: "600",
        padding: "12px 20px",
      },
      
      customInput: {
        backgroundColor: "#ffffff",
        borderColor: "#d1d5db",
        focusBorderColor: "#3b82f6",
        color: "#1f2937",
        fontSize: "16px",
        fontWeight: "600",
        borderRadius: "12px",
        padding: "12px 16px",
      },
    },
  }}
/>

​
Next Steps

Components

Learn about all available components

Configuration

Configure providers and chains

Examples

See styled examples in action

Best Practices

Follow integration best practices