Dunkelmodus unterstützen

Erfahren Sie, wie Sie den Dunkelmodus mit eingebetteten Komponenten unterstützen können

Wenn Ihre Anwendung einen Umschalter für den Dunkelmodus unterstützt und die in Connect eingebetteten Komponenten verwendet, stellen Sie sicher, dass der Status der Nutzeroberfläche für Ihre Website und die eingebetteten Komponenten konsistent bleibt.

Eigenschaften für das Erscheinungsbild im Dunkelmodus festlegen

Verwenden Sie das Tool zur Anpassung eingebetteter Komponenten, um die richtigen Tokens für die Unterstützung des Dunkelmodus zu ermitteln. Jede Website kann ein leicht abweichendes Dunkelmodus-Design haben (z. B. eine andere Hintergrundfarbe). Passen Sie dies daher entsprechend Ihrer App an. Ein guter Ausgangspunkt ist unsere Voreinstellung für das Demo-Design im Dunkelmodus.

Legen Sie das Erscheinungsbild fest, wenn Sie die in Connect eingebetteten Komponenten initialisieren

Nachdem Sie diese Werte erhalten haben, geben Sie sie als Parameter in loadConnectAndInitialize an:

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
  },
})

Aktualisieren Sie das Erscheinungsbild nach der Initialisierung der App.

Wenn Ihre App über eine Umschaltfunktion für den Dunkel- und Hellmodus verfügt, stellen Sie sicher, dass Sie die eingebetteten Komponenten entsprechend aktualisieren. Verwenden Sie dazu die 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
  },
});

Aktualisieren Sie immer das Erscheinungsbild, damit die in Connect eingebetteten Komponenten mit dem aktuellen Status der Nutzeroberfläche Ihrer App übereinstimmen.