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

# Customize the Trustware widget appearance

> Customize the Trustware widget with theme colors and border radius, light/dark mode via the widget prop, and copy overrides via the messages field.

The Trustware widget ships with a default visual style, but you can adjust colors, border radius, and copy to fit your product. Customization happens at two levels: the `theme` and `messages` fields in `TrustwareConfigOptions`, and a handful of props directly on `<TrustwareWidget>`.

## theme field

The `theme` field accepts a `TrustwareWidgetTheme` object. All six properties are optional; omit any that you want to keep at their default value.

```ts theme={null}
type TrustwareWidgetTheme = {
  primaryColor: string;
  secondaryColor: string;
  backgroundColor: string;
  textColor: string;
  borderColor: string;
  radius: number;
};
```

### Default theme

```ts theme={null}
const DEFAULT_THEME: TrustwareWidgetTheme = {
  primaryColor: "#4F46E5",
  secondaryColor: "#6366F1",
  backgroundColor: "#FFFFFF",
  textColor: "#111827",
  borderColor: "#E5E7EB",
  radius: 8,
};
```

### Theme properties

<ParamField path="theme.primaryColor" type="string" default="&#x22;#4F46E5&#x22;">
  The primary accent color used for buttons, active states, and highlights.
  Accepts any valid CSS color string.
</ParamField>

<ParamField path="theme.secondaryColor" type="string" default="&#x22;#6366F1&#x22;">
  The secondary accent color, used for hover states and supporting UI elements.
</ParamField>

<ParamField path="theme.backgroundColor" type="string" default="&#x22;#FFFFFF&#x22;">
  The widget's background fill color.
</ParamField>

<ParamField path="theme.textColor" type="string" default="&#x22;#111827&#x22;">
  The primary text color used for labels, amounts, and body copy inside the
  widget.
</ParamField>

<ParamField path="theme.borderColor" type="string" default="&#x22;#E5E7EB&#x22;">
  The color applied to borders and dividers throughout the widget.
</ParamField>

<ParamField path="theme.radius" type="number" default="8">
  Border radius in pixels applied to cards, buttons, and input fields. Set to
  `0` for sharp corners or a larger value for a pill-shaped look.
</ParamField>

### Example

```ts theme={null}
const config = {
  apiKey: process.env.NEXT_PUBLIC_TRUSTWARE_API_KEY!,
  routes: {
    toChain: "8453",
    toToken: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
  },
  theme: {
    primaryColor: "#FCB514",
    secondaryColor: "#FFFFFF",
    backgroundColor: "#000000",
    borderColor: "#FCB514",
    textColor: "#FFFFFF",
    radius: 16,
  },
} satisfies TrustwareConfigOptions;
```

## Widget-level theme prop

`<TrustwareWidget>` accepts a `theme` prop that controls the light/dark mode context independently of the color values above. This is useful when your app manages a global color scheme.

```tsx theme={null}
<TrustwareWidget theme="dark" />
```

<ParamField path="theme" type="&#x22;light&#x22; | &#x22;dark&#x22; | &#x22;system&#x22;">
  Sets the color scheme context for the widget. `"system"` follows the user's
  OS preference. Defaults to the host application's ambient color scheme.
</ParamField>

### showThemeToggle

<ParamField path="showThemeToggle" type="boolean" default="true">
  When `true`, a light/dark mode toggle is rendered inside the widget, letting
  the user switch modes themselves. Defaults to `true`. Set to `false` when
  your application owns the color scheme and you do not want users to override
  it from the widget surface.

  ```tsx theme={null}
  <TrustwareWidget showThemeToggle={false} />
  ```
</ParamField>

## messages field

The `messages` field overrides the title and description text rendered at the top of the widget. Both properties are optional.

```ts theme={null}
type TrustwareWidgetMessages = {
  title: string;
  description: string;
};
```

### Default messages

```ts theme={null}
const DEFAULT_MESSAGES: TrustwareWidgetMessages = {
  title: "Trustware SDK",
  description: "Accept deposits and transactions from any asset on any chain.",
};
```

### Message properties

<ParamField path="messages.title" type="string" default="&#x22;Trustware SDK&#x22;">
  The heading shown at the top of the widget.
</ParamField>

<ParamField path="messages.description" type="string" default="&#x22;Accept deposits and transactions from any asset on any chain.&#x22;">
  The subheading or descriptor shown beneath the title.
</ParamField>

### Example

```ts theme={null}
const config = {
  apiKey: process.env.NEXT_PUBLIC_TRUSTWARE_API_KEY!,
  routes: {
    toChain: "8453",
    toToken: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
  },
  messages: {
    title: "Deposit",
    description: "Move funds into the destination asset and chain.",
  },
} satisfies TrustwareConfigOptions;
```

<Tip>
  Because `messages` accepts `Partial<TrustwareWidgetMessages>`, you can
  override just the title without providing a description, and the SDK will keep
  the default for the omitted field.
</Tip>