Prise en charge du mode sombre

Découvrez comment prendre en charge le mode sombre avec des composants intégrés.

Si votre application prend en charge une bascule en mode sombre et utilise les composants intégrés Connect, assurez-vous que l’état de l’interface utilisateur de votre site et des composants intégrés reste cohérent.

Déterminez les propriétés d’apparence du mode sombre

Utilisez l’outil de personnalisation des composants intégrés pour déterminer les bons tokens à prendre en charge en mode sombre. Chaque site Web peut avoir un thème en mode sombre légèrement différent (par exemple, une couleur de fond différente), donc personnalisez cela en fonction de votre application. Notre Démo thème mode sombre prédéfini représente un bon point de départ.

Spécifiez l’apparence lorsque vous initialisez les composants intégrés de Connect.

Après avoir obtenu ces valeurs, spécifiez les en tant que paramètre dans 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
  },
})

Mettre à jour l’apparence après l’initialisation de l’application

Si votre application dispose d’une bascule pour sélectionner le mode sombre et clair, assurez-vous de mettre à jour les composants intégrés en conséquence. Pour ce faire, utilisez l’API update:

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

Mettez toujours à jour l’apparence pour que les composants intégrés de Connect restent cohérent avec l’état de l’interface utilisateur de votre application actuelle.