Skip to main content
Skip table of contents

Theme editor

Introduction

This document explains how to use the theme editor to customize the look and feel of your end users' MFA graphical interfaces.

You can customize the following interfaces look and feel:

  • TrustBuilder Authenticator 6 app → general interface and authentication page

  • Virtual Authenticator authentication page (see examples screenshots below)

  • The following connector authentication pages: OpenID connect and Entra ID (formerly Azure AD)

Prerequisites

Before you begin, make sure you have:

  • an administrator login to access the administration console,

  • a TrustBuilder MFA service activated (the customized theme will be applied for the end-users registered in the service).

The theme editor is available for versions 6.16 and higher of the TrustBuilder Authenticator app.

Accessing the theme editor

You can access the theme editor from the administration console V2, in the “Graphical themes” tab.

Overview

From the theme editor home page, you can see:

  • a Theme settings panel the list of themes from which you can manage themes and change the active theme.

  • a Theme preview panel (Click-scroll horizontally to see more interfaces previews).

Using the theme editor

By default, the active theme is none. This means that no theme from the “Theme editor” is applied to the interfaces. The interfaces are in their initial appearance. It is the default value when using the “Theme management” feature.

Creating a new theme

To create a a new theme:

  • Click the “New theme” button at the bottom of the themes list.

  • Enter a name for the new theme and click on “Save”. The new theme now appeared in the themes list.

  • Click the edit button (pencil icon) of the new theme to access the theme settings.

  • Configure the new theme’s settings

Settings

Description

Theme Name

Edit the theme name

Header

Not yet usable

Message of the day

Edit the message of the day.

The message of the day lets you inform users about important information. This message is displayed in Virtual Authenticator only.

You can click the “Translation” icon to define this setting in others languages.

Text alignment

Not yet usable

Text area background

Set the main text area background.

Page background

Set the page background.

Banner color

Set the banner color. It is the top area in Virtual Authenticator (VA).

Buttons and text highlight

Set the main color. It is used for the main button and text highlights.

Text color

Set the text color.

Input field background

Set the input fields background.

Error message:

Set the text color of error messages (only on Entra ID (formerly Azure AD) and OIDC).

Pinpad button color

Set the background of pinpad button

There can be a maximum of 4 custom themes.

Think about accessibility when setting colors. The combination of text color and text area background has an impact on readability. In general we recommend previewing the theme before deploying it.

Importing a theme

Importing a theme is useful if you want to apply a theme from one service to another service (See “Manage themes” section below to know how to export a theme)

Click on Import and select your JSON file to import a theme.

Example of theme JSON file you can import

Please, refer to the “Creating a new theme” sub-section above to see the theme settings details.

JSON
{
	"name":" MyCustomThemeName",
	"default":false,
	"serviceName":"MyTrustBuilderMFAServiceName",
	"color":
			{
			"bgColor":"#FFFFFF",
			"zoneColor":"#F2F2F2",
			"bannerColor":"#203E92",
			"principalColor":"#203E92",
			"textColor":"#202020"
			},

	"serviceLogo":{"visible":true,"img":""},
	"messageDay":
			{
			"en":{"value":"","default":true},
			"fr":{"value":"","default":false},
			"man":{"value":"","default":false},
			"de":{"value":"","default":false},
			"es":{"value":"","default":false}
			},
	"textAlign":"left",
	"advanced":
			{"color":
					{
					"inputColor":"#d3d3d3",
					"placeHolderTextColor":"#808080",
					"msgErrorColor":"#ff0000",
					"pinPadButtonColor":"#808080",
					"pinPadTextColor":"#ffffff"
					},
             }
}
Others examples of themes JSON files
CODE
{"name":" Burgers","default":false,"serviceName":"McDonalds","color":{"bgColor":"#FFFFFF","zoneColor":"#F2F2F2","bannerColor":"#f5f5f5","principalColor":"#21522f","textColor":"#202020"},"header":{"en":{"value":"","default":true},"fr":{"value":"","default":false},"man":{"value":"","default":false},"de":{"value":"","default":false},"es":{"value":"","default":false}},"logoBanniere":{"visible":true,"img":""},"serviceLogo":{"visible":true,"img":"https://www.develop.product.kiwi.devil.ninja/logo/d477b04dfe383df90785ff784c24b38a_128x128.png?1641476951"},"messageDay":{"en":{"value":"","default":true},"fr":{"value":"","default":false},"man":{"value":"","default":false},"de":{"value":"","default":false},"es":{"value":"","default":false}},"textAlign":"center","advanced":{"color":{"inputColor":"#f6f6f6","placeHolderTextColor":"#151515","msgErrorColor":"#ff0000","pinPadButtonColor":"#808080","pinPadTextColor":"#ffffff"},"darkMode":false}}
CODE
{"name":" InWeBank","default":false,"serviceName":"RevueFonctionnelle","color":{"bgColor":"#FFFFFF","zoneColor":"#FFFFFF","bannerColor":"#ff7f27","principalColor":"#000000","textColor":"#202020"},"header":{"en":{"value":"","default":true},"fr":{"value":"","default":false},"man":{"value":"","default":false},"de":{"value":"","default":false},"es":{"value":"","default":false}},"logoBanniere":{"visible":true,"img":""},"serviceLogo":{"visible":true,"img":"https://www.featureflag.dev.kiwi.devil.ninja/logo/2d39bdf4e306fc34dddafed51902fb70_128x128.png?1651672940"},"messageDay":{"en":{"value":"Hello","default":true},"fr":{"value":"","default":false},"man":{"value":"","default":false},"de":{"value":"","default":false},"es":{"value":"","default":false}},"textAlign":"left","advanced":{"color":{"inputColor":"#F2F2F2","placeHolderTextColor":"#808080","msgErrorColor":"#ff0000","pinPadButtonColor":"#ff7f27","pinPadTextColor":"#ffffff"},"darkMode":false}}

Applying a theme

  • Click on Change active theme in the Theme settings panel.

  • Select the theme you want to become the active theme for the interfaces and click on Save.

  • The active theme appears with a check icon.

Active theme

Here are some information concerning the selected active theme:

  • none → this means that no theme from the “Theme editor” is applied to the interfaces. The interfaces are in their initial appearance. It is the default value when using the “Theme management” feature.

  • Default → this is the “Theme management” feature default theme. It cannot be edited. It's almost the same as if no theme had been applied. The default theme uses colors from the TrustBuilder graphical identity. Depending on the tool (VA, Authenticator…), some of the colors can be slightly different.

  • Azure AD→ this is a theme with Microsoft Entra ID (formerly Azure AD) graphic charter applied on interfaces. It cannot be edited.

  • custom themes → any other custom theme can be edited. The selected theme will be applied to the interfaces.

Managing themes

Use the tools panel to manage your themes.

  • Edit the theme

  • Duplicate the theme

  • Download the theme (.json file)

  • Delete the theme

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.