Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Plugin Theming

Plugin Framework > Guides > 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
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).

themes response
{
  "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.

Theme Demo Plugin with green background Theme Demo Plugin with red background

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.

Have a Question?
Have a how-to question? Seeing a weird error? Get help on StackOverflow.
Register for the Digital Toolkit Meetup where we answer technical Q&A from the audience.
Last updated Tue Feb 27 2024