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.

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.