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 on the bottom of the left-hand sidebar, and then open the Theme tab. Note: You need to have the admin or owner role to edit custom themes.

The left side of the Theme tab shows properties (colors and styles) that you can customize, and the right side shows a preview of how various UI elements would look given 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 what the Prismatic app itself looks like when you use "dark" or "light" mode. Each of your team members 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 in to Prismatic.

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

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

If you would like to override the dark/light mode behavior for embedded, and only show 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 you have a custom font for your app, and would like to use the same font in the embedded marketplace.

Prismatic currently supports any font that is 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 is simple - a loading icon on top of a mono-color background.

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

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