Theming the widget

Pass a theme as config to createRavnWidgetBridge. Set only the fields you want; the rest keep their defaults.

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

Playground

Tune every field on the real widget, then copy the config.

Field	Sets
`primaryColor`	Buttons and highlights. The button label color adjusts for contrast
`secondaryColor`	Tab underline and glows
`background`	Behind the card
`cardBackground`	The card. Inputs inside it are shaded darker automatically
`textPrimary`, `textSecondary`	Text
`success`, `error`	Confirmations and errors
`borderRadius`	Corner radius in px, for the card and every control. `0` is sharp
`fontFamily`	Any CSS `font-family`. Load the font on your page yourself

Colors take any CSS color. A value that isn’t one is ignored. There’s no light/dark switch: the widget is designed for a dark canvas.