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 { SeamsAuthMenu, SHAPE_PRESETS, Theme } from '@seams/wallet/react';

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

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

export function applyWalletTheme(seams: SeamsWeb): void {
  seams.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 setAppearance when a theme picker or system-mode change happens at runtime; 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 --w3a-colors-<key> and shape values become --w3a-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.