Summary

The workspace look, or theme, can be customized in Backstage so that it visually matches your organization's identity when the app users access it.

This is done using the Theme editor in Backstage.

This article will take you through our recommended step-by-step process for adding the theme and graphic elements to the workspace.

Theme editor overview

In the workspace dashboard, select the paintbrush icon in the main menu to the left of the screen, then select Theme editor.

The theme editor section in the workspace is composed of a Wizard, as well as the Theme tab and the Graphics tab.

Adding a theme to the workspace

1. Using the theme wizard

The theme wizard will allow you to easily import your organization's colors into the workspace theme, using a logo or any other image resource that represents your organization's colors:

1. In the workspace dashboard, select the paintbrush icon in the main menu to the left of the screen, then select Theme editor.
2. In the Theme tab, click on the Wizard button at the bottom of the screen.
3. Drag and drop a logo or image file that represents your organization's colors.
4. The wizard will suggest six possible color themes for the workspace based on the image that you uploaded. All you need to do is select the one that you prefer, and click on Save and customize.

2. Adjusting the theme colors

After using the theme wizard, you can go to the Theme tab to make any necessary adjustments to theme colors added by the wizard.

The theme tab is the first tab that appears when you open the Theme editor.

Here you can adjust the colors of the various theme items displayed in the app, like the fonts, menus, backgrounds, badges and icons:

The theme tab is composed of three main sections:

• A Theme preview section in the upper part of the screen, which displays how the app will look, so you can see in real-time how changes you make will look in the app.
• A section containing the theme color options, in the lower part of the screen, where you can manually modify the theme elements in the app using the multiple fields and selecting the colors that you want.
• Buttons at the bottom of the screen, for displaying and hiding advanced options, opening the theme wizard, importing a theme, and undoing/redoing actions.

Note: Clicking on the Advanced button at the bottom of the screen will expand the number of theme elements that you can change the colors for. Hovering the cursor over the circles near each element will clearly show you what each element corresponds to in the preview section.

3. Adding the graphic elements to the workspace

The Graphics tab is the second tab available in the Theme editor. 

It is used to change the displayed banners, splash screens, app icons or logos, as well as the colors of the progress bars and text, and their positions on-screen when displayed above these items:

The Graphics tab is composed of two main sections:

• A app icon and splash screen section in the upper part of the screen.
  Here you can click on any of these three items and upload the app icon or splash screens that you need, both for phone and for tablets. The recommended dimensions of these items is specified on the screen.
• A section containing fields allowing you to adjust the colors and positioning of the onscreen elements and text that will be displayed above the app icons and splash screens.

NEXT STEP
For the next steps in this Getting started series, please continue to the Adding app users to the workspace.