Customize the Trustware widget appearance

The Trustware widget ships with a default visual style. You can set its color scheme and override its 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 sets the widget’s color scheme.

type TrustwareTheme = "light" | "dark" | "system";

"light" | "dark" | "system"

default:"\"system\""

The color scheme applied to the widget. "system" follows the user’s OS preference.

Example

const config = {
  apiKey: process.env.NEXT_PUBLIC_TRUSTWARE_API_KEY!,
  routes: {
    toChain: "8453",
    toToken: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE",
  },
  theme: "dark",
} satisfies TrustwareConfigOptions;

Color and border radius customization, the primaryColor, backgroundColor, radius, and related fields of the former TrustwareWidgetTheme object, was available through @trustware/sdk 1.1.7 and was replaced by this light, dark, and system setting in 1.1.8. If your project is pinned below 1.1.8, refer to the type definitions shipped with your installed version.

<TrustwareWidget> accepts a theme prop that takes the same three values.

<TrustwareWidget theme="dark" />

"light" | "dark" | "system"

Sets the color scheme for this widget instance. In swap mode the prop takes precedence over the theme config field, falling back to "system".

The prop currently applies in swap mode only. In deposit mode the widget reads the color scheme from the theme config field and ignores the prop, so set theme on your config rather than on the component if you need to control the deposit widget’s appearance.

showThemeToggle

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.

<TrustwareWidget showThemeToggle={false} />

showThemeToggle applies to deposit mode. The swap mode surface does not render a theme toggle, so the prop has no effect when the widget runs in swap mode.

messages field

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

type TrustwareWidgetMessages = {
  title: string;
  description: string;
};

Default messages

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

Message properties

string

default:"\"Trustware SDK\""

The heading shown at the top of the widget.

string

The subheading or descriptor shown beneath the title.

Example

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;

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.

Get Started

Integration

Configuration

Events & Errors

Guides

SDK Reference

Customize the Trustware widget appearance

theme field

Example

Widget-level theme prop

showThemeToggle

messages field

Default messages

Message properties

Example

​theme field

​Example

​Widget-level theme prop

​showThemeToggle

​messages field

​Default messages

​Message properties

​Example

theme field

Example

Widget-level theme prop

showThemeToggle

messages field

Default messages

Message properties

Example