6 - Adding a theme to the workspace

Note: This article is applicable to workspace that were created before April 11, 2023.
If your workspaces was created after April 11, 2023, then please refer to this article for guidance on using the Theme editor.

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, open the Design category and select Theme editor.

For more information on the different types of images and graphics that can be used in the workspace, please refer to the Workspace theme and graphics article.

1. Adding a theme with the wizard

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

In the Theme tab, you can launch the Theme wizard. 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 in-app icon shown here is used for the app container and also for the event registration page design.

The app loading screens now need to be added via part of the app container. The below displayed "upload splash screen images" sections in the Graphics tab are no longer used in Backstage.

You can also configure how the loading message and progress bar will look on mobile apps. You'll want to ensure that the loading message and progress bar does not cover/hide any important information on your loading screen images.

NEXT STEP
Find out how you can build your audience in your event, or continue to the Adding app users to the workspace article.