ウォレットUIのテーマ

Seamsは、Reactアプリと保護されたウォレットiframeの両方にUIを表示します。 色と形状の値を共通にして、認証、署名、エクスポートの画面を製品に合わせてください。

共通のテーマを適用

この例は、アプリ側の認証メニューとウォレットiframeの画面に、同じ色と丸みのある形状を適用します。

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は、Reactアプリが表示するコンポーネントにトークンの上書きを適用します。 SeamsWebクライアントの作成後にapplyWalletThemeを呼び出すと、ウォレットオリジンの認証メニュー、 取引確認画面、エクスポートビューアーにも同じ値を渡せます。

初期表示を設定

初期値はSeamsConfigsInput.appearanceで設定します。 ユーザーがテーマを変えた場合や、システムの表示モードが変わった場合は、seams.config.setAppearanceを使います。 更新内容は、現在の表示設定にマージされます。

形状を変更

SHAPE_PRESETSは、カードの角丸、操作部品のサイズ、入力欄の見た目を統一します。 iframeを更新する際はプリセット全体を展開し、以前の形状の値が残らないようにしてください。

トークン名

色は--seams-colors-<key>、形状は--seams-shape-<key>になります。 主な色の役割には、colorBackground、textPrimary、textSecondary、buttonBackground、 ステータスの色、取引のハイライトがあります。 ウォレットiframeの表示設定は追加の色キーも受け付けるため、SDKをリリースせずにコンポーネント固有の値を渡せます。

アクセシビリティの確認事項はテーマ設定ガイド、 公開されているトークンの型はReactリファレンスを参照してください。