6 - Adding a theme to the workspace

The workspace look or theme, can be customized in Backstage to visually match your organization's identity or branding. This is done using the Theme editor.

In the workspace main menu to the left of the screen, select the paintbrush icon (Design category), then select Theme editor.

1. Adding a theme with the wizard

The theme editor is composed of a Theme tab, a Graphics tab, and a Wizard tab.

The wizard will allow you to easily import your organization's colors into the workspace, using any image asset that represents your organization's colors:

1. In the Theme tab, click on the Wizard button at the bottom of the screen.
2. Drag and drop a logo or image file that represents your organization's colors into the wizard.
3. The wizard will suggest six possible color themes 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 to add your theme colors, you can go to the Theme tab to make any necessary adjustments.

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. Here you can also use the Appearance field to set your event to dark mode (for virtual events only).
• 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 used to personalize app icons or logos, as well as the colors of the progress bars and text, and their positions on-screen:

The Graphics tab is composed of two main sections:

• A app icon and splash screen section in the upper part of the screen, that is no longer used and will be removed soon.
  Important: The app loading screens now need to be added via part of the app container. The "upload splash screen images" sections in the Graphics tab are no longer used in Backstage.
  
  
• A section containing fields that allow 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
Find out how you can build your audience in your event, or continue to the Adding app users to the workspace article.