Theming

Customize the widget's appearance by passing a theme object. All properties are optional — any value you don't set uses the default.

WidgetTheme

Property	Type	Default	Description
`primaryColor`	`string`	`'#F0B90B'`	Accent color for buttons and highlights
`backgroundColor`	`string`	`'#111111'`	Widget background
`containerColor`	`string`	`'#171717'`	Card and input container background
`textColor`	`string`	`'#FFFFFF'`	Primary text color
`borderColor`	`string`	`'#333333'`	Border color for inputs and cards
`borderRadius`	`number`	`8`	Border radius in pixels
`fontFamily`	`string`	—	Font family override (inherits from parent by default)
`mode`	`'dark'`	`'dark'`	Theme mode

Examples

Default (dark)

<SilentSwapWidget
  config={config}
/>

Custom brand colors

<SilentSwapWidget
  config={config}
  theme={{
    primaryColor: '#6366F1',    // Indigo accent
    backgroundColor: '#0A0A0A',
    containerColor: '#1A1A2E',
    borderColor: '#2A2A4A',
    borderRadius: 16,
  }}
/>

Match an existing dark UI

<SilentSwapWidget
  config={config}
  theme={{
    primaryColor: '#22C55E',
    backgroundColor: '#09090B',
    containerColor: '#18181B',
    textColor: '#FAFAFA',
    borderColor: '#27272A',
    borderRadius: 12,
    fontFamily: '"Inter", sans-serif',
  }}
/>

CSS Custom Properties

Under the hood, the theme values are applied as CSS custom properties on the widget root. If you need fine-grained control beyond the theme object, you can override these variables in your own CSS:

/* Override widget variables in your stylesheet */
#silentswap-widget {
  --color-yellow: #6366F1;
  --color-base: #0A0A0A;
  --color-container: #1A1A2E;
  --color-text-bright: #FAFAFA;
  --color-base-stroke: #27272A;
  --radius: 16px;
  --font-sans: 'Inter', sans-serif;
}