> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wearo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand color & styling

> Customize the Wearo widget button to match your brand.

# Brand color & styling

## brandColor

The `brandColor` option sets the color of the overlay button and is passed to the widget iframe.

```javascript theme={"dark"}
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  brandColor: '#E91E63'
});
```

* Accepts 6-digit hex only (`#RRGGBB`)
* Defaults to `#000000`

## Full button theming

For complete control over the button's appearance, use `buttonTheme` (buybox) or `overlayTheme` (overlay image button) instead of `brandColor`.

```javascript theme={"dark"}
TryOnWidget.init({
  apiKey: 'wearo_xxxxxxxxxxxxxxxxxxxx',
  injectionMode: 'both',

  // Buybox button (near Add to Cart)
  buttonTheme: {
    backgroundColor: '#ffffff',
    textColor: '#000000',
    border: '1px solid #000000',
    hoverBackgroundColor: '#000000',
    hoverTextColor: '#ffffff',
    borderRadius: '2px',
    height: '54px',
  },

  // Overlay button (on the product image)
  overlayTheme: 'glassmorphism',
});
```

See [Configuration reference](/configure/reference#buttonthemeconfig) for all `ButtonThemeConfig` properties.

## Overlay button position

Control where the button sits on the image:

```javascript theme={"dark"}
overlayAlignment: 'center',   // 'center' | 'left' | 'right'
overlayBottom: '20px',        // distance from bottom of image
overlayAutoHide: true,        // hide until hover on desktop
```

## CSS override

For spacing adjustments, target `#tryon-trigger-host`:

```css theme={"dark"}
#tryon-trigger-host {
  margin-top: 12px;
}
```

If the button appears misaligned because the image container is wider than the image:

```css theme={"dark"}
.your-product-image-container {
  width: fit-content;
}
```