Theming the embed | Revroute Docs

The referral dashboard accepts a options.theme object that lets you override the color palette, corner radius, font family, and locale. Theming is applied inside the iframe — no extra CSS is needed on your side.

Basic usage


import { DubEmbed } from "@dub/embed-react";
 
<DubEmbed
  data="referrals"
  token={publicToken}
  options={{
    theme: {
      colorScheme: "light", // "light" | "dark" | "system"
      brand: "#5E5CE6",
      brandForeground: "#FFFFFF",
      background: "#FFFFFF",
      foreground: "#0B0B0B",
      muted: "#F5F5F7",
      mutedForeground: "#6B7280",
      border: "#E5E7EB",
      radius: 12,
      fontFamily: "'Inter', system-ui, sans-serif",
    },
    locale: "en",
  }}
  style={{ width: "100%", height: 720, border: 0 }}
/>

All theme keys

Key	Type	Default (light)	Purpose
`colorScheme`	`"light" \| "dark" \| "system"`	`"system"`	Base scheme. `system` follows the user’s OS preference.
`brand`	hex	`#000000`	Primary accent — buttons, links, focus rings
`brandForeground`	hex	`#FFFFFF`	Text/icon color on top of `brand`
`background`	hex	`#FFFFFF`	Surface color
`foreground`	hex	`#0B0B0B`	Default text color
`muted`	hex	`#F5F5F7`	Secondary surface — cards, table stripes
`mutedForeground`	hex	`#6B7280`	Secondary text — labels, captions
`border`	hex	`#E5E7EB`	Hairline borders and dividers
`radius`	number	`8`	Corner radius in px applied to cards and buttons
`fontFamily`	CSS font stack	`system-ui, sans-serif`	Font used everywhere in the embed

📝

The font family applies inside the iframe — make sure the font is available via Google Fonts or a CDN. Local @font-face rules on the parent page are not inherited.

Loading a Google Font


options={{
  theme: {
    fontFamily: "'Inter', sans-serif",
    fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
  },
}}

fontUrl instructs the embed to inject a <link> tag with the given stylesheet. Use it together with fontFamily.

Dark mode

The cleanest pattern is to mirror your app’s theme into the embed:


import { useTheme } from "next-themes";
import { DubEmbed } from "@dub/embed-react";
 
export function Referral({ token }: { token: string }) {
  const { resolvedTheme } = useTheme();
  return (
    <DubEmbed
      data="referrals"
      token={token}
      options={{
        theme: {
          colorScheme: resolvedTheme === "dark" ? "dark" : "light",
          brand: "#7C3AED",
        },
      }}
      style={{ width: "100%", height: 720 }}
    />
  );
}

When colorScheme changes, the iframe re-renders with the new palette — no remount required.

Locale

options.locale switches the entire embed UI:

Value	Language
`"en"`	English (default)
`"ru"`	Russian

The locale only affects strings rendered by the embed — your token and partner data are unaffected. If the locale isn’t passed, the embed inherits the workspace default.

Per-component overrides

You can mount multiple embeds with different themes on the same page (e.g. one in a sidebar, one in a modal). Each <DubEmbed /> instance is independent.

Limits

Custom CSS is not supported — theming is restricted to the keys above so we can guarantee the embed keeps working through future redesigns.
Logo, illustrations, and copy strings cannot be replaced (yet). Open a feature request if you have a strong use case.
radius is global — you cannot set different radii per component.

Quick recipes

Match Tailwind defaults


theme: {
  brand: "#6366F1",          // indigo-500
  background: "#FFFFFF",
  foreground: "#111827",     // gray-900
  muted: "#F9FAFB",          // gray-50
  mutedForeground: "#6B7280",// gray-500
  border: "#E5E7EB",         // gray-200
  radius: 8,
  fontFamily: "ui-sans-serif, system-ui, sans-serif",
}

Match shadcn dark mode


theme: {
  colorScheme: "dark",
  brand: "#FAFAFA",
  brandForeground: "#0A0A0A",
  background: "#0A0A0A",
  foreground: "#FAFAFA",
  muted: "#262626",
  mutedForeground: "#A3A3A3",
  border: "#262626",
  radius: 8,
}

See Referral dashboard for the full component API.