# Theming Guide

Customize the appearance of Elements SDK components to match your brand.

## Overview

The SDK provides extensive theming capabilities through the `customTheme` configuration option. Themes are structured hierarchically:

- **Global**: Colors, fonts, and styles that apply to all components
- **Component-specific**: Overrides for individual components

## Global Theme Configuration

### Colors

```javascript
const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  customTheme: {
    global: {
      theme: {
        primaryColor: '#007bff',
        accentColor: '#28a745',
        defaultTextColor: '#333333',
        selectedTextColor: '#007bff',
        linkTextColor: '#0056b3',
        errorColor: '#dc3545',
        warningColor: '#ffc107',
        successColor: '#28a745',
        drawerBackgroundColor: '#ffffff'
      }
    }
  }
});
```

### Typography

```javascript
customTheme: {
  global: {
    theme: {
      headingFont: {
        name: 'Poppins',
        weights: [400, 600, 700]
      },
      paragraphFont: {
        name: 'Inter',
        weights: [400, 500]
      }
    }
  }
}
```

### Border Radius

```javascript
customTheme: {
  global: {
    theme: {
      buttonCornerRadius: '8px',
      cardCornerRadius: '12px'
    }
  }
}
```

### Global Layout Options

```javascript
customTheme: {
  global: {
    layout: {
      enablePersonalization: true,
      personalizationText: 'Add Engraving',
      personalizationCardStyle: 'outlined',  // or 'filled'
      allowPromoCodes: true,
      inputFieldStyle: 'outlined',  // or 'filled'
      showPoweredBy: true,
      poweredByMode: 'light'  // or 'dark'
    }
  }
}
```

## Component Themes

### Product Component

```javascript
customTheme: {
  product: {
    theme: {
      backgroundColor: '#ffffff'
    },
    layout: {
      showImages: true,
      showOnlyMainImage: false,
      showTitle: true,
      showDescription: true,
      showQuantityCounter: true,
      quantityCounterStyle: 'outlined',
      fulfillmentDisplay: 'carousel',
      enableShippingFulfillment: true,
      enableOnDemandFulfillment: true,
      addToCartButtonText: 'Add to Cart',
      addToCartButtonShowTotalPrice: true,
      buyNowButtonText: 'Buy Now',
      prioritizeEngraving: false,
      noAvailabilityText: 'Not available in your area'
    }
  }
}
```

### Cart Component

```javascript
customTheme: {
  cart: {
    theme: {
      backgroundColor: '#ffffff'
    },
    layout: {
      showQuantityCounter: true,
      quantityCounterStyle: 'outlined',
      drawerHeaderText: 'Your Shopping Cart',
      goToCheckoutButtonText: 'Proceed to Checkout'
    }
  }
}
```

### Checkout Component

```javascript
customTheme: {
  checkout: {
    theme: {
      backgroundColor: '#ffffff'
    },
    layout: {
      emailOptIn: {
        show: true,
        checked: false,
        text: 'Subscribe to our newsletter for updates and offers.'
      },
      smsOptIn: {
        show: true,
        checked: false,
        text: 'Receive SMS updates about your order and exclusive deals.'
      },
      allowGiftCards: true,
      legalMessage: 'By placing your order, you agree to our Terms of Service and Privacy Policy.',
      continueShoppingUrl: 'https://yoursite.com/shop',
      exitUrl: 'https://yoursite.com',
      thankYouButtonText: 'Continue Shopping',
      drawerHeaderText: 'Checkout',
      placeOrderButtonText: 'Place Order',
      checkoutCompleted: {
          customLogo: 'https://yoursite.com/logo.png',
          customText: 'Thank you for your purchase! Your order has been received.'
        }
      }
    }
  }
}
```

## Complete Example

```javascript
const client = await Elements('YOUR_API_KEY', {
  env: 'production',
  customTheme: {
    global: {
      theme: {
        primaryColor: '#007bff',
        accentColor: '#28a745',
        buttonCornerRadius: '8px',
        cardCornerRadius: '12px',
        headingFont: {
          name: 'Poppins',
          weights: [400, 600, 700]
        },
        paragraphFont: {
          name: 'Inter',
          weights: [400, 500]
        }
      },
      layout: {
        allowPromoCodes: true,
        inputFieldStyle: 'outlined',
        showPoweredBy: false
      }
    },
    product: {
      layout: {
        addToCartButtonText: 'Add to Bag',
        fulfillmentDisplay: 'popup'
      }
    },
    cart: {
      layout: {
        checkoutButtonText: 'Checkout Now'
      }
    }
  }
});
```

## See Also

- [Configuration Reference](../api/configuration.md)
- [Component Guides](../guides/)