Theme

Theme & UI Customization

This page focuses on how to style the Wormhole Connect widget, covering color schemes, fonts, layout changes (like toggling the hamburger menu), and adding extra menu entries. You'll learn how to customize Connect's look and feel to match your application's branding.

Changing the Color Scheme

You can customize Connect's color scheme by providing a theme prop.

React integrationHosted integration

import WormholeConnect, {
  WormholeConnectConfig,
  WormholeConnectTheme,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  /* Your config... */
};

const theme: WormholeConnectTheme = {
  mode: 'dark',
  primary: '#78c4b6',
  font: 'Comic Sans; sans-serif',
};

function App() {
  return <WormholeConnect config={config} theme={theme} />;
}

import WormholeConnect, {
  WormholeConnectConfig,
  WormholeConnectTheme,
  wormholeConnectHosted,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  /* Your config... */
};

const theme: WormholeConnectTheme = {
  mode: 'dark',
  primary: '#78c4b6',
  font: 'Comic Sans; sans-serif',
};

const container = document.getElementById('bridge-container');

wormholeConnectHosted(container, {
  config,
  theme,
});

The WormholeConnectTheme type supports the following properties:

Property	Description	Example
mode	Dark mode or light mode. Required	"dark" or "light"
input	Color used for input fields, dropdowns	"#AABBCC"
primary	Primary color used for buttons	"#AABBCC"
secondary	Secondary color used for some UI elements	"#AABBCC"
text	Primary color used for text	"#AABBCC"
textSecondary	Secondary color used for dimmer text	"#AABBCC"
error	Color to display errors in, usually some shade of red	"#AABBCC"
success	Color to display success messages in	"#AABBCC"
badge	Background color used for chain logos	"#AABBCC"
font	Font used in the UI, can be custom font available in your application	"Arial; sans-serif"

Toggle Hamburger Menu

By setting the showHamburgerMenu option to false, you can deactivate the hamburger menu, which will position the links at the bottom.

Add Extra Menu Entry

By setting the showHamburgerMenu option to false, you can add extra links. The following properties are accessed through the menu[] property (e.g., menu[].label):

Property	Description
label	Link name to show up
href	Target URL or URN
target	Anchor standard target, by default _blank
order	Order where the new item should be injected

import WormholeConnect, {
  WormholeConnectConfig,
} from '@wormhole-foundation/wormhole-connect';

const config: WormholeConnectConfig = {
  ui: {
    showHamburgerMenu: false,
    menu: [
      {
        label: 'Advance Tools',
        href: 'https://portalbridge.com',
        target: '_self',
        order: 1,
      },
    ],
  },
};

function App() {
  return <WormholeConnect config={config} />;
}