Plugin Theming

This guide walks you through plugin theming.

This is useful to help your plugin seamlessly blend with the existing user interface for the financial institution. Within the Consumer API there is an endpoint which provides all theme information for the given institution. In this guide we will describe how to use this information to create configurable themes for your plugin.

Requests

GET /institutions/{institutionId}/themes

curl https://{CONSUMER_API_ENVIRONMENT}/a/consumer/api/{API_VERSION}/institutions/{institutionId}/themes

Where:

• CONSUMER_API_ENVIRONMENT is specific to your financial institution and matches with Banno Online for your institution.
  • Example: for the Garden demo institution the CONSUMER_API_ENVIRONMENT would be digital.garden-fi.com.
• API_VERSION: API Version (ie. v0)
• institutionId: The ID of the desired institution

Response

The themes endpoint will return details for all defined themes. First you will see the default themes (light and dark). If there are any additional themes, there will also be an additionalThemes array with any others.

Each defined themed will have a series of many keys which represent elements of the user interface, but we will primarily use the primaryThemeBackgroundColor as an example. Each key in the defined theme will be in the extended hex format of #RRGGBBAA: R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F).

{
  "default": {
    "name": "default",
    "light": {
      ...
      "primaryContentBackgroundColor": "#9900AAFF",
      "primaryThemeBackgroundColor": "#9900AAFF",
      "primaryThemeTextColor": "#9900AAFF",
      ...
    },
    "dark": {
      ...
      "primaryContentBackgroundColor": "#9900AAFF",
      "primaryThemeBackgroundColor": "#9900AAFF",
      "primaryThemeTextColor": "#9900AAFF",
      ...
    }
  },
  ...
}

Using the Theme Data in Your Plugin

Financial institutions typically do not update their themes very often, because of this, we do not recommend fetching theme data in real-time for your plugin. It is advised to store this theme data and only update it at as necessary.

Within your plugin, identify which design elements should be customized for each financial institution. This customization could range from altering the background or text color to more complex changes.

The method of implementing these customizable styles depends on your development environment. However, it is advisable to utilize semantic class names, such as bg-primary or text-primary, for styling. This approach not only ensures consistency in design but also simplifies the application of themes by clearly defining the purpose of each color within the interface.

In this example we are configuring the background color based on the defined themes for the financial institution.

Next steps

Take a look at specific documentation in the API Reference.