Theming

The Embedded Portal can be themed to match your application. You can configure the basics from the dashboard or override at runtime through the SDK.

Theme mode

Choose Light, Dark, or Auto from Settings → Embedded Portal.

Auto follows the user's system preference (prefers-color-scheme). You can also set the theme dynamically:

UserHero.setTheme('dark');

Brand colors and tokens

The portal exposes a small set of CSS variables you can override either in the dashboard or at runtime via setCssVars:

Set them at init time:

window.UserHeroQueue.push(['init', {
    publicKey: 'YOUR_PUBLIC_KEY',
    user: userPayload,
    userHmac: userHmac,
    cssVars: {
        primary: '#5b6cff',
        radius: '14px',
        fontFamily: 'Inter, system-ui, sans-serif',
    },
}]);

Or update them later:

UserHero.setCssVars({ primary: '#10b981' });

Values are sanitized — url(), expression(), semicolons, and other unsafe constructs are rejected.

Custom CSS (Pro Max)

On the Pro Max plan you can host a stylesheet at an HTTPS URL and point the portal at it via Custom CSS URL in settings. The portal loads it inside the iframe so you can fine-tune any class.

Restrictions:

• The URL must be HTTPS.
• @import, expression(), and javascript: URLs are stripped.
• Use the documented class names below — internal class names may change between releases.

Stable class names

Removing the UserHero footer (Pro and Pro Max)

By default the portal shows a small "Powered by UserHero" footer. Pro and Pro Max workspaces can hide it from Settings → Embedded Portal → Show branding.