Support dark mode

Learn how to support dark mode with embedded components.

If your application supports a dark mode toggle and uses Connect embedded components, ensure the UI state for your site and embedded components remain consistent.

Determine dark mode appearance properties

Use the embedded components customization tool to determine the right tokens to support dark mode. Each website can have a slightly different dark mode theme (for example, a different background color), so customize this depending on your app. A good starting point is our Demo dark mode theme preset.

Specify the appearance when you initialize Connect embedded components

After you obtain these values, specify them as a parameter in 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 the appearance after app initialization

If your app has a toggle to select dark and light mode, ensure that you update embedded components accordingly. To do this, use the 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
  },
});

Always update the appearance to keep Connect embedded components consistent with your current app’s UI state.