***

title: Customizing theme using query parameters
slug: customization/customising-theme-using-query-parameters
subtitle: Customize the look and feel of the Transak widget
-----------------------------------------------------------

Use Transak's theme-related query parameters in `widgetParams` to customize button colors, color mode, and the full widget theme.

Pass these parameters in the [Create Widget URL API](/api/public/create-widget-url) request body when generating a `widgetUrl`.

<Frame>
  <div>
    `apiKey` and `referrerDomain` are mandatory in `widgetParams` for all examples on this page.
  </div>
</Frame>

## Primary Button Colors

Use these parameters to customize the primary button background and text color.

| Parameter                | Description                         |
| :----------------------- | :---------------------------------- |
| `primaryButtonFillColor` | Hex color for the button background |
| `primaryButtonTextColor` | Hex color for the button text       |

**Sample Result**

Primary CTA button restyled to match brand mustard and dark grey text using `primaryButtonFillColor` and `primaryButtonTextColor`.

<Frame>
  <img src="https://files.buildwithfern.com/visual-editor-images/transak-labs.docs.buildwithfern.com/2026-03-23T05:52:49.116Z/customization/customising-theme-using-query-parameters/09326ff4425011fe398b068c5951de99efcf70c38290212b8b4cf768f53f873c-Screenshot_2026-03-19_at_5.32.03_PM.png" alt="Primary button color customization example" title="Primary button color customization example" noZoom={false} />
</Frame>

**Sample Request**

```bash
curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'accept: application/json' \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'content-type: application/json' \
  --data '{
    "widgetParams": {
      "apiKey": "YOUR_API_KEY",
      "referrerDomain": "yourdomain.com",
      "primaryButtonFillColor": "#F59E0B",
      "primaryButtonTextColor": "#0B0B0B"
    }
  }'
```

## Color Mode

Use `colorMode` to switch the widget between light and dark themes.

| Parameter   | Allowed values  | Description                |
| :---------- | :-------------- | :------------------------- |
| `colorMode` | `LIGHT`, `DARK` | Sets the widget theme mode |

**Sample Result**

<Frame>
  <img src="https://files.buildwithfern.com/visual-editor-images/transak-labs.docs.buildwithfern.com/2026-03-23T05:53:34.658Z/customization/customising-theme-using-query-parameters/bcfaeb01b817c87c37a8a4591a6cd020180a55356d759210c48a9e4b2d9860df-Screenshot_2026-03-19_at_5.31.16_PM.png" alt="Color mode dark theme example" title="Color mode dark theme example" noZoom={false} />
</Frame>

**Sample Request**

```bash
curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'accept: application/json' \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'content-type: application/json' \
  --data '{
    "widgetParams": {
      "apiKey": "YOUR_API_KEY",
      "referrerDomain": "yourdomain.com",
      "colorMode": "DARK"
    }
  }'
```

## Complete Theme Customization

Use the following parameters together to fully align the widget with your brand.

### Brand and Text Colors

| Parameter            | Description                               |
| :------------------- | :---------------------------------------- |
| `brandColor`         | Primary brand color for accents and links |
| `textPrimaryColor`   | Primary text color                        |
| `textSecondaryColor` | Secondary or muted text color             |
| `labelTextColor`     | Form label text color                     |

### Surface and Background Colors

| Parameter                   | Description                       |
| :-------------------------- | :-------------------------------- |
| `surfaceFillColor`          | Card or surface background        |
| `widgetBackgroundFillColor` | Widget container background       |
| `borderColor`               | Border color for inputs and cards |

### Status Colors

| Parameter    | Description               | Example value |
| :----------- | :------------------------ | :------------ |
| `greenColor` | Success or positive state | `#10B981`     |
| `redColor`   | Error or negative state   | `#EF4444`     |

### Putting It All Together

Below is an example combining color mode, primary button styling, and full theme customization into a single widget URL flow.

**Sample Result**

<Frame>
  <img src="https://files.buildwithfern.com/visual-editor-images/transak-labs.docs.buildwithfern.com/2026-03-23T05:54:23.362Z/customization/customising-theme-using-query-parameters/5644e24b26ab03a0c81333f6102c45a9f4818639a6faba6dcae69055616a250e-Screenshot_2026-03-19_at_5.29.14_PM.png" alt="Complete theme customization example" title="Complete theme customization example" noZoom={false} />
</Frame>

**Sample Request**

```bash
curl --request POST \
  --url https://api-gateway-stg.transak.com/api/v2/auth/session \
  --header 'accept: application/json' \
  --header 'access-token: YOUR_ACCESS_TOKEN' \
  --header 'content-type: application/json' \
  --data '{
    "widgetParams": {
      "apiKey": "YOUR_API_KEY",
      "referrerDomain": "yourdomain.com",
      "brandColor": "#F6DC2D",
      "textPrimaryColor": "#FFFFFF",
      "textSecondaryColor": "#8F8F8F",
      "labelTextColor": "#FFFFFF",
      "surfaceFillColor": "#452167",
      "widgetBackgroundFillColor": "#300856",
      "borderColor": "#6A4D85",
      "greenColor": "#34D399",
      "redColor": "#EF4444"
    }
  }'
```