> ## Documentation Index
> Fetch the complete documentation index at: https://anypay-docs-update-resources-2026-06-29.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming and Customization

To brand the widget to your application, use the `theme` prop for light/dark/auto mode and `customCss` to override any CSS variable.

```tsx theme={null}
import { Pay } from '0xtrails/widget'

export const App = () => {
  return (
    <Pay
      apiKey="YOUR_API_KEY"
      theme="light"
      customCss={`
        --trails-font-family: "Inter", sans-serif;
        --trails-primary: rgb(0 82 204);
        --trails-border-radius-widget: 32px;
        --trails-border-radius-button: 24px;
        --trails-border-radius-input: 24px;
        --trails-widget-border: 4px solid rgb(0 82 204);
      `}
    >
      <button className="custom-button-styles">
        Pay with Trails
      </button>
    </Pay>
  )
}
```

The `theme` prop accepts `"light"`, `"dark"`, or `"auto"` (follows system preference). `customCss` takes either a CSS string or a key-value object of variable overrides.

For the full list of available CSS variables and task-based examples (match brand colours, set border radius, configure dark mode), see [Customization](/sdk/customization).