ダークモードのサポート

埋め込みコンポーネントでダークモードをサポートする方法をご確認ください。

アプリケーションがダークモードの切り替えをサポートし、Connect 埋め込みコンポーネントを使用する場合は、サイトと埋め込みコンポーネントの UI 状態の一貫性を確保してください。

ダークモードの外観プロパティを決定する

埋め込みコンポーネントカスタマイズツールを使用して、ダークモードをサポートする適切なトークンを決定します。各 Web サイトで、ダークモードのテーマ (背景色が異なるなど)が若干異なる場合があるため、アプリに応じてカスタマイズしてください。まず、デモのダークモードテーマプリセットの使用をお勧めします。

Connect 埋め込みコンポーネントを初期化する際の外観を指定する

これらの値を取得したら、loadConnectAndInitialize のパラメーターとして指定します。

index.js
import {loadConnectAndInitialize} from '@stripe/connect-js';

// The appearance variables used in dark mode
const darkModeAppearanceVariables = {
  // Note: These properties will depend on how your application looks!
  colorPrimary: "#0085FF",
  colorText: "#C9CED8",
  colorBackground: "#14171D",
  buttonSecondaryColorBackground: "#2B3039",
  buttonSecondaryColorText: "#C9CED8",
  colorSecondaryText: "#8C99AD",
  actionSecondaryColorText: "#C9CED8",
  actionSecondaryTextDecorationColor: "#C9CED8",
  colorBorder: "#2B3039",
  colorDanger: "#F23154",
  badgeNeutralColorBackground: "#1B1E25",
  badgeNeutralColorBorder: "#2B3039",
  badgeNeutralColorText: "#8C99AD",
  badgeSuccessColorBackground: "#152207",
  badgeSuccessColorBorder: "#20360C",
  badgeSuccessColorText: "#3EAE20",
  badgeWarningColorBackground: "#400A00",
  badgeWarningColorBorder: "#5F1400",
  badgeWarningColorText: "#F27400",
  badgeDangerColorBackground: "#420320",
  badgeDangerColorBorder: "#61092D",
  badgeDangerColorText: "#F46B7D",
  offsetBackgroundColor: "#1B1E25",
  formBackgroundColor: "#14171D",
  overlayBackdropColor: "rgba(0,0,0,0.5)",
};

const lightModeAppearanceVariables = {
    // These properties will depend on how your application looks!
    colorPrimary: "#0085FF",
}

const stripeConnect = await loadConnectAndInitialize({
  // This is a placeholder. Replace it with with your publishable API key.
  // Sign in to see your own test API key embedded in code samples.
  // Don’t submit any personally identifiable information in requests made with this key.
  publishableKey: "pk_test_TYooMQauvdEDq54NiTphI7jx"
,
  fetchClientSecret: fetchClientSecret,
  appearance: {
    variables: isDarkMode ? darkModeAppearanceVariables : lightModeAppearanceVariables, // You should initialize depending on your website's current UI state
  },
})

アプリの初期化後に外観を更新

アプリに、ダークモードとライトモードを選択するトグルがある場合は、それに応じて埋め込みコンポーネントを更新してください。これを行う場合は、Update APIを使用してください。

index.js
// This code runs after you update dark or light mode

stripeConnect.update({
  appearance: {
    variables: isDarkMode ? darkModeAppearanceVariables : lightModeAppearanceVariables, // You should initialize depending on your website's current state
  },
});

Connect 埋め込みコンポーネントを現在のアプリの UI 状態と一貫性を保つために、外観を常に最新の状態に保ってください。