Skip to content
Edit this page

Theme

Theme & UI Customization＃

This page focuses on how to style the 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.

import IsthmusConnect, { type config, IsthmusConnectTheme } from '@isthmus-foundation/isthmus-connect';

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

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

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

import IsthmusConnect, { type config, IsthmusConnectTheme, isthmusConnectHosted } from '@isthmus-foundation/isthmus-connect';

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

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

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

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

The IsthmusConnectTheme 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"
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 IsthmusConnect, { type config } from '@isthmus-foundation/isthmus-connect';

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

function App() {
  return <IsthmusConnect config={config} />;
}
Last update: September 28, 2026
| Created: September 28, 2026