Theming Embedded

Theming embedded marketplace

You can theme your embedded marketplace to match your app's look and feel. To create a custom theme for your customers, click your organization's name at the bottom of the left-hand sidebar, then open the Theme tab. Note: You must have the admin or owner role to edit custom themes.

The left side of the Theme tab displays customizable properties (colors and styles), while the right side provides a preview of how various UI elements will appear with those custom properties.

Your embedded themes will be reflected in your embedded application:

Light and dark mode themes

Under Theme Mode, you have four options:

• Light and Dark determine the appearance of the Prismatic application when using "dark" or "light" mode. Each team member can configure dark or light mode settings from their profile settings page, or they can choose to have Prismatic follow their operating system's dark/light mode theme.

  Note: Your customers will not see Light or Dark themes unless you create customer users for them and they log directly into Prismatic.

• Embedded Light and Embedded Dark determine the theme for your embedded marketplace. These are the themes that your customers using the embedded marketplace in your app will see.

By default, the embedded marketplace follows your customers' operating system dark/light mode theme settings. This is beneficial if your app has dark and light modes that also follow OS theme settings - the embedded marketplace will switch between dark and light modes alongside your app.

To override the dark/light mode behavior for embedded and display only either the dark or light theme, add a theme property to your showMarketplace invocations:

Only show light-mode theme

prismatic.showMarketplace({
  selector: `#my-embedded-div`,
  usePopover: false,
  theme: "LIGHT", // or "DARK"
});

Using a custom font

You can use a custom font for your embedded marketplace. This is useful if your app uses a custom font and you want to maintain consistency in the embedded marketplace.

Prismatic currently supports any font available on Google Fonts. To use a custom font, add it to prismatic.init() as fontConfiguration.google.families:

Use a custom font

prismatic.init({
  fontConfiguration: {
    google: {
      families: ["Inter"],
    },
  },
});

Customizing the loading screen

A loading screen appears briefly when prismatic.showMarketplace() is invoked. The screen consists of a loading icon on a solid-color background.

You can customize the background color and the color of the loading icon and "Loading" text by adding a screenConfiguration.initializing argument. Add it to prismatic.init() to customize colors for all marketplace loading screens, or to prismatic.configureInstance() or prismatic.showMarketplace() to customize colors for a specific marketplace div. Colors can be any valid CSS color value.

Customize loading screen color

prismatic.init({
  screenConfiguration: {
    initializing: {
      background: "#FF5733",
      color: "blue",
    },
  },
});

// or

prismatic.showMarketplace({
  screenConfiguration: {
    initializing: {
      background: "rgb(5,102,0)",
      color: "rgba(255,153,255,.2)",
    },
  },
});