Theming & Custom Colors

Make the widget blend with your app. Two layers to reach for, in order:

1. Pick a theme — light, dark, or auto (follows system) covers most apps in one attribute.
2. Override colors — when you need brand accent, background, or borders to match exactly, drop in CSS variables via config, runtime method, or host style="".

Don't reach for ::part() or full CSS overrides until variables can't get you there — see Styling for those escape hatches.

Try the interactive Playground →

Built-in Themes

Declarative

<tokenflight-widget theme="dark" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>
<tokenflight-widget theme="light" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>
<tokenflight-widget theme="auto" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>

Imperative

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    tradeType: 'EXACT_OUTPUT',
    amount: '100',
    theme: 'auto',
  },
});

widget.initialize();

auto follows prefers-color-scheme and updates when the system theme changes.

Switching at Runtime

widget.setTheme('light');
widget.setTheme('dark');
widget.setTheme('auto');

Custom Color Overrides

Via Config

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    tradeType: 'EXACT_OUTPUT',
    amount: '100',
    theme: 'dark',
    customColors: {
      "--tf-primary": "#FF6B00",
      "--tf-bg": "#1A1A2E",
    },
  },
});

Via Runtime Method

widget.setCustomColors({
  "--tf-primary": "#FF6B00",
  "--tf-bg": "#1A1A2E",
  "--tf-text": "#FFFFFF",
  "--tf-border": "#2A2A4A",
});

Via Host CSS Variables

<tokenflight-widget
  theme="dark"
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
  style="--tf-primary:#FF6B00; --tf-bg:#1A1A2E; --tf-text:#FFFFFF;"
></tokenflight-widget>

Common CSS Variables

Pass these as keys in customColors (or set on the host style=""). The exported CustomColors type in @tokenflight/swap provides autocomplete for supported variables while still allowing custom --tf-* overrides.

Variable	Description
--tf-primary	Buttons, links, active states
--tf-bg	Main background
--tf-bg-secondary, --tf-bg-elevated	Secondary surfaces
--tf-text	Primary text
--tf-text-secondary, --tf-text-tertiary	Labels, hints, subdued copy
--tf-border, --tf-border-light	Borders, dividers
--tf-success, --tf-error, --tf-warning	Status colors
--tf-radius, --tf-button-radius	Corner radius tokens
--tf-font-family, --tf-font-family-mono	Typography

See Styling & Customization for the font-size variables and ::part() selectors.