Theming

Every modal in @pollar/react and the <WalletButton> read their colors, corners and stacking order from public CSS custom properties (--pollar-*). You can set any of them from your own stylesheet.

Requires: @pollar/react 0.12.0 or later.

Where a value comes from

Each variable resolves from three sources. The first one that sets it wins:

1. Your stylesheet. A rule in your app that sets the variable on a Pollar element.
2. Dashboard Branding. The values configured in Build -> Branding, loaded by the SDK at startup.
3. Theme defaults. The Light set. If your page has <html class="dark"> and Branding leaves the palette open (see Dark mode), the Dark set is used instead.

You only set what you want to change. Anything you leave out still comes from Branding, and then from the defaults.

Override from your stylesheet

Set the variables on the Pollar root elements:

.pollar-modal-card,
.pollar-wallet-wrapper,
.pollar-wallet-login-btn {
  --pollar-accent: #7c3aed;
  --pollar-btn-primary-fg: #ffffff;
  --pollar-buttons-border-radius: 12px;
}

.pollar-overlay {
  --pollar-overlay-z-index: 1000;
}

You don't need !important, and load order doesn't matter: the SDK declares its own values with zero specificity, so any selector with a class wins.

Set them on these elements, not on :root or body. Each Pollar root declares the variables itself, and a value declared on an element takes precedence over one inherited from :root. The two font variables are the exception: the SDK doesn't declare them, so they also work from :root.

To theme a single modal, target its own class. Each card has one next to .pollar-modal-card, for example .pollar-modal (login), .pollar-send-modal, .pollar-swap-modal, .pollar-ramp-modal or .pollar-hist-modal:

.pollar-send-modal {
  --pollar-modal-border-radius: 0px;
}

Dark mode

The SDK picks the palette like this:

• Branding theme Dark: dark palette, always.
• Branding theme Light with no Background or Text color: light palette. If your page has <html class="dark">, the modals switch to the dark palette, so they follow a Tailwind-style dark toggle without extra code.
• Branding sets a Background or Text color: that palette is pinned, and html.dark does not change it.

For a pinned palette, or if your app marks dark mode in some other way, set the variables yourself:

html.dark .pollar-modal-card,
html.dark .pollar-wallet-wrapper {
  --pollar-bg: #0b0b0f;
  --pollar-text: #f4f4f5;
  --pollar-border: #27272a;
  --pollar-muted: #a1a1aa;
  --pollar-input-bg: #18181b;
}

[data-theme='dark'] .pollar-modal-card {
  --pollar-bg: #0b0b0f;
  --pollar-text: #f4f4f5;
}

Variable reference

"Blended" means that when Branding sets a Background or Text color, the SDK mixes the border, secondary text and input fill from those two colors, so they match the custom pair. With neither set, they come from the theme.

Not affected by the variables

• The Google and GitHub sign-in buttons keep their providers' brand styling (their corners still follow --pollar-buttons-border-radius).
• The QR code in Receive and the KYC provider frame stay on white, so they remain readable.
• The card artwork in the Card modal.

Custom templates

If you render the *Template components yourself, pass theme, accentColor and styleOverrides the way the live components do. modalChrome(usePollar().styles) returns all three. To theme your own markup the same way, put one of the root classes above on it and spread buildModalCssVars(theme, accentColor, styleOverrides) into its style.

buildModalCssVars writes the Branding values under private --pollar-brand-* names. Don't set or read those in your CSS: they are the input to the public variables above, and they may change between versions.