Theme the RAVN swap widget: playground, config, and code
One config object sets color, shape and font. Try it live in the playground, then copy the exact snippet into your app.
Quick answer
You theme the embeddable swap widget with one config object on createRavnWidgetBridge. Ten fields cover color, corner radius and font. No CSS. The widget playground shows the real widget change as you pick, with four presets to start from and a copy button for the finished code.
Start in the playground
Open app.ravn.exchange/widget/playground before you write any config. On the left you get a color picker for every field, a corner-radius slider and a font dropdown. On the right is the real /widget/v1 route in an iframe, not a mockup. It runs on the same @ravnexchange/widget-connector bridge you use in production. Change a color and the preview reloads a moment later with it applied.
Start from one of four presets: Default, Violet, Watermelon (a light palette) or Mono. Tweak a few fields, then hit Copy. You get a complete createRavnWidgetBridge call with your config filled in, ready to paste.
The full config reference
| Field | Type | Controls |
|---|---|---|
primaryColor | CSS color | The swap button and other highlights |
secondaryColor | CSS color | The tab underline and a few glow accents |
background | CSS color | The backdrop behind the card |
cardBackground | CSS color | The card itself. Inputs, the token chip and dropdown rows get a shade darker by themselves, so they still look recessed |
textPrimary | CSS color | Main text |
textSecondary | CSS color | Muted text |
success | CSS color | Completed swaps and positive states |
error | CSS color | Errors and alerts |
borderRadius | number (px) | Corner radius on every control and the card, together |
fontFamily | CSS font-family string | All text in the widget |
Every field is optional. Leave one out and you get the default. So setting just primaryColor and borderRadius is perfectly normal.
The code
Theming uses the same bridge that connects the widget to your wallet. It is one extra key on the same call:
npm install @ravnexchange/widget-connector
import { createRavnWidgetBridge } from "@ravnexchange/widget-connector";
const bridge = createRavnWidgetBridge({
iframe: iframeRef.current,
widgetOrigin: "https://app.ravn.exchange",
getWallet: () => myConnectedWallet, // or null while none is connected
config: {
primaryColor: "#7C3AED",
secondaryColor: "#A78BFA",
borderRadius: 16,
fontFamily: "Georgia, serif",
},
});
The widget reads config once, at load, over the same handshake it uses for wallet signing. There is no theming endpoint and no re-render for you to wire up. Field-by-field docs are at docs.ravn.exchange/sdks/widget-theming.
Three presets, three looks
- VioletA purple accent, 16px corners and a serif font. Everything else is default. Two colors and a radius are enough to stop looking like a stock embed.
- WatermelonThe one built-in light theme. Pink and rose accents, a white card on a pale pink backdrop, dark text set by hand. There is no light/dark toggle, so this is what a light theme looks like: a set of color fields.
- MonoNear-black primary and secondary colors with square corners. Try it to see the button label stay readable. The widget picks whichever label color contrasts with the
primaryColoryou set.
What you cannot theme yet
Three gaps to know before you count on them. There is no warning color, because the widget has no separate warning state. There is no light/dark switch, so a light look is a palette you set yourself. And there are no per-surface shadow or border controls. The fields above are the whole surface, and the docs list the same three gaps.
Fonts are set, not fetched
fontFamily sets the CSS property inside the widget, nothing more. If your visitors do not already have the font, you load it, with a <link> tag or your usual font pipeline. The playground loads Google Fonts only so its own preview looks right. The production widget does not do that for you.
Start theming
Try a palette in the playground, copy the config, paste it into your own createRavnWidgetBridge call.
FAQ
Do I need to write CSS to theme the widget?
No. You pass one config object to createRavnWidgetBridge, with ten fields for colors, corner radius and font. No stylesheet, nothing to override.
Is there a way to try themes before writing code?
Yes. The playground at app.ravn.exchange/widget/playground runs the real widget with your choices and four starting presets. It then gives you the exact code to copy.
Can I make the widget light-themed?
Yes. Set background, cardBackground, textPrimary and textSecondary yourself, like the Watermelon preset does. There is no light/dark toggle, you pick a palette.
Does theming load a font for me?
No. fontFamily only sets the CSS property inside the widget. If your visitors do not have the font, load it on your own page like any other web font.
Does theming require an API key or cost anything?
No. Theming is a config object in your page, not an API call. It works on the same free, anonymous tier as the rest of the widget.
What can't I theme yet?
There is no warning color, no per-surface shadow or border control and no light/dark switch. The docs list the full field reference.
