Theming the widget

Theming is sent as part of the same config object createRavnWidgetBridge already sends at handshake: there’s no separate API, no CSS to override, and no rebuild of the widget. Set the fields you want, leave the rest out, and those defaults stay untouched.

import { createRavnWidgetBridge } from "@ravnexchange/widget-connector";

const bridge = createRavnWidgetBridge({
  iframe: iframeRef.current,
  widgetOrigin: "https://app.ravn.exchange",
  getWallet: () => (isEvmConnected ? evmWallet : null),
  getSolanaWallet: () => (isSolanaConnected ? solanaWallet : null),
  config: {
    primaryColor: "#7C3AED",
    secondaryColor: "#A78BFA",
    borderRadius: 16,
    fontFamily: "Georgia, serif",
  },
});

Try it live in the Playground

Every field below, previewed in the real widget. Pick a preset or tune your own palette, then copy the resulting config straight into your integration.

Colors

string

The CTA/highlight color: swap button, active states. Also picks a readable label color for CTA buttons automatically (near-black or near-cream, whichever contrasts better), so a dark primaryColor never produces unreadable dark-on-dark button text.

string

The secondary accent: tab underline and some glow effects.

string

The widget’s own backdrop, behind the card.

string

The card shell. Every recessed surface inside it (input fields, the token chip, dropdown rows) gets a shade darker automatically, so they stay visibly recessed instead of collapsing into the same flat surface as the card around them.

string

Primary text color.

string

Secondary/muted text color.

string

Confirmation states: completed swaps, positive deltas.

string

Error and alert states.

All eight accept any valid CSS color (#rrggbb, rgb(), a named color). A value the widget can’t parse as a color is dropped, not passed through broken.

Shape and typography

number

Corner radius in px, applied to every control and to the card shell together, so the two never drift out of sync into two different rounding scales side by side. 0 is a real value (sharp corners), not “unset”.

string

Any valid CSS font-family value, e.g. "Inter, sans-serif". The widget only sets the property (same as most embeddable widgets); it doesn’t fetch the font for you. If you’re picking a Google Font, load it on your own page (or the page embedding the widget) the normal way, e.g. a <link> to fonts.googleapis.com or @import in your CSS, before it’ll actually render.

What’s not themeable

A few things LI.FI’s widget exposes don’t have an equivalent here, on purpose rather than by omission:

No appearance (light/dark) toggle. The widget’s whole visual language (translucent hairlines, glow and text-shadow accents) is tuned for a dark canvas. A real light mode needs its own design pass, not a background-color swap, so it isn’t offered as a config flag yet.
No warning color. RAVN’s UI doesn’t have a distinct warning tier; the one place that might use it reuses the error color instead. Adding a warning field would theme a color with nothing in the product it maps to.
No per-surface shadow/border toggles. The card carries a fixed, sensible elevation by default; there’s no on/off knob for it yet.

Presets

The Playground ships four starting points: Default, Violet, Watermelon, and Mono, each just a plain config object like the one above. Watermelon, for example:

config: {
  primaryColor: "#E11D48",
  secondaryColor: "#FB7185",
  background: "#FFF1F2",
  cardBackground: "#FFFFFF",
  textPrimary: "#1F2937",
  textSecondary: "#6B7280",
  borderRadius: 20,
}

Open a preset in the Playground and use the Copy button under “Your config” to grab its exact object, then tweak from there.

Playground

Widget Playground

app.ravn.exchange/widget/playground

The Playground is the real /widget/v1 widget in an iframe, driven by the real @ravnexchange/widget-connector bridge, not a static mockup. Every change to a color, the radius slider, or the font dropdown re-runs the actual bridge:init handshake with your new config, so what you see is exactly what an integration gets.

Presets apply a full config in one click: a fast way to see the range before tuning your own.
Color palette gives a text field (accepts any CSS color) and a native color picker for each of the eight color fields, side by side.
Shape & type covers borderRadius (slider + number field) and fontFamily (a dropdown of curated options; the widget only sets font-family, so the Playground loads each Google Font itself just for the preview).
Your config shows the live config object and a ready-to-paste createRavnWidgetBridge({...}) snippet, with a one-click Copy button.

No wallet connection is required to use it: the preview renders with getWallet/getSolanaWallet both returning null, so it shows the widget’s pre-connect state.

Try it live in the Playground

​Colors

​Shape and typography

​What’s not themeable

​Presets

​Playground

Widget Playground

Colors

Shape and typography

What’s not themeable

Presets

Playground