Theme wallet surfaces

Seams renders UI in your React app and in the protected wallet iframe. Reuse the same color and shape values so auth, signing, and export screens match your product.

Apply one theme

This example applies the same colors and rounded shape to an app-owned auth menu and the wallet-iframe surfaces.

import type { SeamsWeb } from '@seams/wallet';
import {
  HostedSeamsAuthMenu,
  type HostedAuthMenuOutcome,
  SHAPE_PRESETS,
  Theme,
} from '@seams/wallet/react';

const colors = {
  colorBackground: '#ffffff',
  textPrimary: '#000000',
  buttonBackground: '#000000',
};

export function ThemedAuthMenu({
  onOutcome,
}: {
  onOutcome: (outcome: HostedAuthMenuOutcome) => void;
}) {
  return (
    <Theme
      theme="light"
      tokens={{
        light: {
          colors,
          shape: SHAPE_PRESETS.rounded,
        },
      }}
    >
      <HostedSeamsAuthMenu onOutcome={onOutcome} />
    </Theme>
  );
}

export function applyWalletTheme(seams: SeamsWeb): void {
  seams.config.setAppearance({
    theme: {
      id: 'brand',
      mode: 'light',
      colors,
      shape: { ...SHAPE_PRESETS.rounded },
    },
    palette: 'default',
  });
}

Theme scopes token overrides to components rendered by your React app. Call applyWalletTheme after creating the SeamsWeb client so the wallet-origin auth menu, transaction confirmer, and export viewer receive the same values.

Set the initial appearance

Set the initial value with SeamsConfigsInput.appearance. Use seams.config.setAppearance when the user changes the theme or the system changes its appearance mode. Updates merge into the current appearance.

Change shape safely

SHAPE_PRESETS keeps card radii, control sizes, and field treatment consistent. Spread the complete preset when updating the iframe so a previous shape cannot leave stale values behind.

Token names

Colors become --seams-colors-<key> and shape values become --seams-shape-<key>. Common color roles include colorBackground, textPrimary, textSecondary, buttonBackground, status colors, and transaction highlights. Wallet-iframe appearance accepts additional color keys, so a component-specific role can pass through without an SDK release.

See the theming guide for accessibility checks and the React reference for exported token types.