Theming & Custom Colors

TokenFlight ships with light, dark, and auto themes. You can further override colors via config.customColors, setCustomColors(), or host CSS variables.

Try the interactive Playground →

Built-in Themes

Declarative

index.html

<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

app.js

import { TokenFlightWidget } from '@tokenflight/swap';

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-accent:#FF6B00; --tf-bg:#1A1A2E; --tf-text:#FFFFFF;"
></tokenflight-widget>

Named Color Keys

Key	CSS Variable	Description
primary	--tf-accent	Buttons, links, active states
background	--tf-bg	Main background
textPrimary	--tf-text	Primary text
textSecondary	--tf-text-secondary	Labels, hints
border	--tf-border	Borders, dividers
success	--tf-success	Success states
error	--tf-error	Error states
warning	--tf-warning	Warning states

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