dubinc · steven-tey · Mar 23, 2026
diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/activity.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/activity.tsx
@@ -11,6 +11,7 @@ export function ReferralsEmbedActivity() {
   const {
     group: { brandColor: color },
     stats: { clicks, leads, sales, saleAmount },
+    themeOptions,
   } = useReferralsEmbedData();
 
   const token = useEmbedToken();
@@ -39,7 +40,10 @@ export function ReferralsEmbedActivity() {
   );
 
   return (
-    <div className="border-border-subtle bg-bg-default rounded-lg border sm:col-span-2">
+    <div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
+      className="border-border-subtle bg-bg-default rounded-lg border sm:col-span-2"
+    >
       {isEmpty ? (
         <EmptyState />
       ) : (

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/add-edit-link.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/add-edit-link.tsx
@@ -44,7 +44,7 @@ export function ReferralsEmbedCreateUpdateLink({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isExactMode, setIsExactMode] = useState(false);
 
-  const { program, group } = useReferralsEmbedData();
+  const { program, group, themeOptions } = useReferralsEmbedData();
 
   const shortLinkDomain = program.domain || "";
   const additionalLinks: PartnerGroupAdditionalLink[] =
@@ -143,6 +143,7 @@ export function ReferralsEmbedCreateUpdateLink({
 
   return (
     <motion.div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
       className="border-border-subtle bg-bg-default relative rounded-md border"
       {...TAB_ITEM_ANIMATION_SETTINGS}
     >

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/detail.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/detail.tsx
@@ -23,6 +23,7 @@ import {
   BountyRewardsTable,
 } from "../../../../partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/bounties/bounty-card";
 import { EmbedBountyPerformanceSection } from "./performance-section";
+import { useReferralsEmbedData } from "../page-client";
 import { EmbedBountySubmissionDetail } from "./submission-detail";
 import { EmbedBountySubmissionForm } from "./submission-form";
 import { EmbedBountySubmissionsTable } from "./submissions-table";
@@ -54,6 +55,7 @@ export function EmbedBountyDetail({
   onBountyUpdate?: (bounty: PartnerBountyProps) => void;
 }) {
   const [bounty, setBounty] = useState<PartnerBountyProps>(initialBounty);
+  const { themeOptions } = useReferralsEmbedData();
 
   const hasRewards = bounty.submissions.some((s) => s.commission != null);
 
@@ -126,7 +128,10 @@ export function EmbedBountyDetail({
   }
 
   return (
-    <div className="border-border-subtle bg-bg-default overflow-hidden rounded-xl border">
+    <div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
+      className="border-border-subtle bg-bg-default overflow-hidden rounded-xl border"
+    >
       <div className="flex items-center gap-1.5 px-4 py-2">
         <button
           type="button"
@@ -151,7 +156,12 @@ export function EmbedBountyDetail({
             <h2 className="text-content-emphasis text-sm font-semibold">
               Progress
             </h2>
-            <div className="border-border-subtle bg-bg-default flex w-full flex-col gap-4 rounded-xl border px-5 pb-4 pt-6">
+            <div
+              style={{
+                backgroundColor: themeOptions.backgroundColor || "transparent",
+              }}
+              className="border-border-subtle bg-bg-default flex w-full flex-col gap-4 rounded-xl border px-5 pb-4 pt-6"
+            >
               {bounty.type === "performance" ? (
                 <PerformanceBountyProgress
                   bounty={bounty}

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/performance-section.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/performance-section.tsx
@@ -32,6 +32,7 @@ import {
 import { ColumnDef } from "@tanstack/react-table";
 import { useMemo, useState } from "react";
 import useSWR from "swr";
+import { useReferralsEmbedData } from "../page-client";
 import { useEmbedToken } from "../../use-embed-token";
 
 type PerformanceAttribute = keyof typeof PERFORMANCE_BOUNTY_SCOPE_ATTRIBUTES;
@@ -96,13 +97,20 @@ export function EmbedBountyPerformanceSection({
   bounty: PartnerBountyProps;
   programEnrollment: Pick<ProgramEnrollmentProps, "createdAt">;
 }) {
+  const { themeOptions } = useReferralsEmbedData();
+
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3">
         <h2 className="text-content-emphasis text-sm font-semibold">
           Performance
         </h2>
-        <div className="border-border-subtle bg-bg-default rounded-xl border p-5">
+        <div
+          style={{
+            backgroundColor: themeOptions.backgroundColor || "transparent",
+          }}
+          className="border-border-subtle bg-bg-default rounded-xl border p-5"
+        >
           <EmbedBountyPerformanceChart
             bounty={bounty}
             programEnrollment={programEnrollment}

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-detail.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-detail.tsx
@@ -14,6 +14,7 @@ import { ChevronRight, CopyButton, StatusBadge, Trophy } from "@dub/ui";
 import { formatDate } from "@dub/utils";
 import { Fragment } from "react";
 import { toast } from "sonner";
+import { useReferralsEmbedData } from "../page-client";
 
 export function EmbedBountySubmissionDetail({
   bounty,
@@ -28,13 +29,17 @@ export function EmbedBountySubmissionDetail({
   onBack: () => void;
   onBackToRoot: () => void;
 }) {
+  const { themeOptions } = useReferralsEmbedData();
   const title =
     bounty.maxSubmissions > 1
       ? `Submission (${getPeriodLabel(bounty.submissionFrequency, periodNumber - 1)})`
       : "Submission";
 
   return (
-    <div className="border-border-subtle bg-bg-default overflow-hidden rounded-xl border">
+    <div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
+      className="border-border-subtle bg-bg-default overflow-hidden rounded-xl border"
+    >
       <div className="flex items-center gap-1.5 px-4 py-2">
         <button
           type="button"

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-form.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-form.tsx
@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
 import { v4 as uuid } from "uuid";
+import { useReferralsEmbedData } from "../page-client";
 import { useEmbedToken } from "../../use-embed-token";
 import {
   EmbedDescriptionField,
@@ -88,6 +89,7 @@ export function EmbedBountySubmissionForm({
 }) {
   const router = useRouter();
   const token = useEmbedToken();
+  const { themeOptions } = useReferralsEmbedData();
   const bountyInfo = resolveBountyDetails(bounty);
   const isSocialMetricsBounty = bountyInfo?.hasSocialMetrics ?? false;
   const partnerPlatform = bountyInfo?.socialPlatform
@@ -206,7 +208,10 @@ export function EmbedBountySubmissionForm({
   };
 
   return (
-    <div className="border-border-subtle bg-bg-default overflow-hidden rounded-xl border">
+    <div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
+      className="border-border-subtle bg-bg-default overflow-hidden rounded-xl border"
+    >
       <SubmissionCardHeader
         title={title}
         onBack={onCancel}

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/earnings-summary.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/earnings-summary.tsx
@@ -3,10 +3,13 @@ import { currencyFormatter } from "@dub/utils";
 import { useReferralsEmbedData } from "./page-client";
 
 export function ReferralsEmbedEarningsSummary() {
-  const { program, partner, earnings } = useReferralsEmbedData();
+  const { program, partner, earnings, themeOptions } = useReferralsEmbedData();
 
   return (
-    <div className="border-border-subtle bg-bg-default flex flex-col justify-between gap-4 rounded-lg border p-4">
+    <div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
+      className="border-border-subtle bg-bg-default flex flex-col justify-between gap-4 rounded-lg border p-4"
+    >
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-1">
           <p className="text-content-subtle text-sm">Earnings</p>

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/earnings.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/earnings.tsx
@@ -24,6 +24,7 @@ export function ReferralsEmbedEarnings() {
   const token = useEmbedToken();
   const {
     earnings: { totalCount: earningsCount },
+    themeOptions,
   } = useReferralsEmbedData();
 
   const { pagination, setPagination } = usePagination(

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/faq.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/faq.tsx
@@ -12,7 +12,7 @@ import { motion } from "motion/react";
 import { useReferralsEmbedData } from "./page-client";
 
 export function ReferralsEmbedFAQ() {
-  const { program, rewards } = useReferralsEmbedData();
+  const { program, rewards, themeOptions } = useReferralsEmbedData();
   const reward = rewards[0];
 
   const rewardDescription = reward
@@ -49,6 +49,7 @@ export function ReferralsEmbedFAQ() {
   ];
   return (
     <motion.div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
       className="border-border-muted bg-bg-default rounded-lg border px-4 py-2 sm:px-8 sm:py-4"
       {...TAB_ITEM_ANIMATION_SETTINGS}
     >

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/page-client.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/page-client.tsx
@@ -99,6 +99,7 @@ type ReferralsEmbedData = {
     saleAmount: number;
   };
   bounties: PartnerBountyProps[];
+  themeOptions: ThemeOptions;
 };
 
 type ReferralsEmbedPageClientProps = ReferralsEmbedData & {
@@ -210,6 +211,7 @@ export function ReferralsEmbedPageClient({
       programEnrollment,
       group,
       bounties,
+      themeOptions,
     }),
     [
       program,
@@ -223,6 +225,7 @@ export function ReferralsEmbedPageClient({
       programEnrollment,
       group,
       bounties,
+      themeOptions,
     ],
   );
 
@@ -259,7 +262,11 @@ export function ReferralsEmbedPageClient({
                 )}
               </div>
               <div className="text-content-emphasis relative mt-4 text-lg">
-                <ProgramRewardList rewards={rewards} discount={discount} />
+                <ProgramRewardList
+                  rewards={rewards}
+                  discount={discount}
+                  backgroundColor={themeOptions.backgroundColor}
+                />
                 <ProgramRewardTerms
                   minPayoutAmount={program.minPayoutAmount}
                   holdingPeriodDays={group.holdingPeriodDays ?? 0}

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/page.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/page.tsx
@@ -58,19 +58,20 @@ async function ReferralsEmbedRSC({
 }
 
 function EmbedInlineLoading({ themeOptions }: { themeOptions: ThemeOptions }) {
+  const backgroundColor = themeOptions.backgroundColor || "transparent";
   return (
-    <div
-      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
-      className="flex min-h-screen flex-col"
-    >
+    <div style={{ backgroundColor }} className="flex min-h-screen flex-col">
       <div className="p-5">
         <div className="border-border-default relative flex flex-col overflow-hidden rounded-lg border p-4 md:p-6">
           <HeroBackground color="#737373" />
           <span className="text-content-emphasis text-base font-semibold">
             Referral link
           </span>
           <div className="xs:flex-row relative mt-3 flex flex-col items-center gap-2">
-            <div className="xs:w-72 border-border-default bg-bg-muted h-10 w-full rounded-md border" />
+            <div
+              style={{ backgroundColor }}
+              className="xs:w-72 border-border-default h-10 w-full rounded-md border opacity-70"
+            />
             <Button
               icon={<Copy className="size-4" />}
               text="Copy link"
@@ -81,15 +82,30 @@ function EmbedInlineLoading({ themeOptions }: { themeOptions: ThemeOptions }) {
           <span className="text-content-emphasis mt-12 text-base font-semibold">
             Rewards
           </span>
-          <div className="bg-bg-default border-border-subtle mt-2 h-20 w-[28rem] rounded-md border" />
+          <div
+            style={{ backgroundColor }}
+            className="border-border-subtle mt-2 h-20 w-[28rem] animate-pulse rounded-md border opacity-70"
+          />
         </div>
         <div className="mt-4 grid gap-2 sm:h-32 sm:grid-cols-3">
-          <div className="border-border-subtle bg-bg-muted h-full w-full rounded-lg border sm:col-span-2" />
-          <div className="border-border-subtle bg-bg-muted h-full w-full rounded-lg border" />
+          <div
+            style={{ backgroundColor }}
+            className="border-border-subtle h-full w-full rounded-lg border opacity-70 sm:col-span-2"
+          />
+          <div
+            style={{ backgroundColor }}
+            className="border-border-subtle h-full w-full rounded-lg border opacity-70"
+          />
         </div>
         <div className="mt-4">
-          <div className="border-border-subtle bg-bg-muted h-10 w-full rounded-lg border" />
-          <div className="border-border-muted my-4 h-80 w-full rounded-lg border p-2" />
+          <div
+            style={{ backgroundColor }}
+            className="border-border-subtle h-10 w-full rounded-lg border opacity-70"
+          />
+          <div
+            style={{ backgroundColor }}
+            className="border-border-muted my-4 h-80 w-full rounded-lg border p-2 opacity-70"
+          />
         </div>
       </div>
     </div>

diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/quickstart.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/quickstart.tsx
@@ -25,7 +25,7 @@ export function ReferralsEmbedQuickstart({
   hasResources: boolean;
   setSelectedTab: (tab: "Links" | "Resources") => void;
 }) {
-  const { program, group, links, earnings } = useReferralsEmbedData();
+  const { program, group, links, earnings, themeOptions } = useReferralsEmbedData();
 
   const [copied, copyToClipboard] = useCopyToClipboard();
   const { isMobile } = useMediaQuery();
@@ -123,6 +123,7 @@ export function ReferralsEmbedQuickstart({
 
   return (
     <motion.div
+      style={{ backgroundColor: themeOptions.backgroundColor || "transparent" }}
       className="border-border-muted bg-bg-default rounded-lg border p-2"
       {...TAB_ITEM_ANIMATION_SETTINGS}
     >

diff --git a/apps/web/ui/partners/program-reward-list.tsx b/apps/web/ui/partners/program-reward-list.tsx
@@ -19,20 +19,25 @@ export function ProgramRewardList({
   className,
   iconClassName,
   showModifiersTooltip = true,
+  backgroundColor,
 }: {
   rewards: RewardProps[];
   discount?: DiscountProps | null;
   variant?: "default" | "plain";
   className?: string;
   iconClassName?: string;
   showModifiersTooltip?: boolean;
+  backgroundColor?: string;
 }) {
   const { programSlug } = useParams();
   const sortedFilteredRewards = rewards.filter((r) => getRewardAmount(r) >= 0);
 
   if (sortedFilteredRewards.length === 0 && !discount) {
     return (
-      <div className="border-border-subtle bg-bg-default flex items-center justify-between rounded-md border px-4 py-3">
+      <div
+        style={{ backgroundColor }}
+        className="border-border-subtle bg-bg-default flex items-center justify-between rounded-md border px-4 py-3"
+      >
         <p className="text-content-subtle text-sm">
           You are not eligible for any rewards at this time.
         </p>
@@ -52,6 +57,7 @@ export function ProgramRewardList({
 
   return (
     <ul
+      style={{ backgroundColor }}
       className={cn(
         "text-content-default flex flex-col gap-4 text-sm leading-tight",
         variant === "default" &&