Theme

The Journey Workspaces user interface (UI) design is based on a theme that includes a color palette of optimized tones and shades derived from a primary color. The theme property defines a set of overrides of the default look and feel; in particular, you can modify the primary color to match your brand.

note

It is strongly recommended to modify the primary color only. Other overrides should be used only if there are contrast issues.

If you need to change the primary color, we have guidance to help you select a color that's compliant with WCAG 2.0 level AA contrast guidelines.

There are two places that you can set the theme and the path to the logo image. The first is via Temenos Journey Manager User Settings, and the other is in the transact-config.json configuration file.

note

If the User Setting is applied in Temenos Journey Manager, it will take precedence over any other places these options are set.

Set theme or logo path via TJM

This option allows the theme to be set dynamically based on the user's profile setting. If the user's profile doesn't contain the theme settings, the app's default theme is applied.

1. Login to Journey Manager.
2. Select Security > User accounts. Locate the user to update, then click the Login Name or the Edit icon in the Action column.
3. Switch to the User Profiles tab, then click the Profile Name or the Edit icon in the Action column.
4. Switch to the User Properties tab.
5. Click New, then enter the user property details.
   1. To add a Theme user property:
      1. In the Type list, select Theme.
      2. In the Value box, enter the theme JSON.
   2. To add a Logo path user property:
      1. In the Type list, select Logo.
      2. In the Value box, enter the logo path as a string.
6. Click Save.

If the Theme or Logo option doesn't exist, you need to add it as a form property type.

1. Login to Journey Manager.
2. Select Forms > Property Types.
3. Click New.
4. In the Name box, enter either Theme or Logo, corresponding to the type of property being created.
5. In the Scope list, select User.
6. Select an appropriate Data Type according to the property type:
   1. For a Theme property, select JSON.
   2. For a Logo property, select string.

Set theme via configuration file

Add the theme JSON to the appDef object.

transact-config.json

{
  "buildDir": "build",
  "domainModelFile": "transact-schema.json",
  "appDef": {
    ...
    "theme": {
      "text": {
        "main": '#4A4A4A',
        "light": '#6B6E71',
      },
      "primary": {
        "main": '#025197',
      },
      "grey": {
        "darkest": '#000000',
        "dark": '#3B3B3B',
        "primary": '#757575',
        "light": '#E5E5E5',
        "lightest": '#F2F2F2',
      },
      "white": '#ffffff',
      "black": '#000000',
      "green": {
        "main": '#5A9B12',
        "light": '#7ED321',
      },
      "red": {
        "main": '#D0021B',
        "light": '#FBF3F4',
      },
      "blue": {
        "main": '#4A90E2',
        "light": '#eef3f8',
      },
      "orange": '#F5A623',
    },
  }
}

Attributes

To review the list of supported attributes, see API Reference.