Theming

Finastra design system is flexible enough to support theming. It comes by default with an accessible light version suitable for most needs. Theming gives you control over colors and typography. For intensive app usage you may opt for the dark version of the theme.

Custom themelink

You can create custom themes when your application needs to adapt to a different branding. By applying new primary, secondary and background colors, your application will already feel integrated. If necessary, you can go further and override every UI element and component styles.

Using the generated custom themelink

With applications using Finastra's Design Systemlink

The generated custom theme is intended to provide the best developer experience for our Design System's users.
If that is your case, export the theme in CSS:

css export from theme editor

Then, it's only a matter of adding this style into a css file or into a <style> attribute.


With applications NOT using Finastra's Design Systemlink

If your application is not using our Design System, don't worry, you're still welcome ! 🤗
However, the name of our CSS Variables may not match your application, so we recommend using the Metadata export:

css export from theme editor

You now have a set of variables and associated color value. The goal is to set those values so that they impact your application.

There are several ways to do so depending on your context and constraints, but we would recommend using CSS Variables whenever possible.
It will then be as easy as iterating over the previously generated json and setting the relevant property for your application:

document.documentElement.style.setProperty('variable-name', 'value');

As described on Mozilla's documentation