# 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](https://docs.stripe.com/connect/customize-connect-embedded-components.md) 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](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#customize-the-look-of-connect-embedded-components) them as a parameter in `loadConnectAndInitialize`:

```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: "<<YOUR_PUBLISHABLE_KEY>>",
  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](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#update-connect-embedded-components-after-initialization):

```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.