6 - Theme editor: use a light, dark, or custom appearance for the app

The Theme editor in Backstage is used to personalize the appearance of the event app when seen on mobile and on web app.

You can use it to first choose an appearance for the app, and then adjust the individual colors that will be applied to the app.

Tip: You also have the option of importing an image into the Theme editor, using the Quick setup. In doing so the theme editor will take the colors from the image and add them to the selected appearance.

As you adjust the theme colors, a preview will show you how it looks in the app. You can toggle between the mobile and the web app preview to see how it looks on both platforms

Note: The theme editor will always apply the selected theme appearance and colors to both the web app and the mobile app.

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 - OPTIONAL - Using the Quick setup

You can use the Quick set-up to instantaneously import your organization's colors or branding, simply by uploading an image. Uploading the image will extract the colors, and add them to the color options for your theme appearance.

1. In the Design > Theme editor > Theme tab, click on the Quick set-up button at the bottom of the page:
   
2. Drag and drop an image to upload in order to extract the colors.
   Please note that importing an image to extract the colors will overwrite any selected colors in the theme.
   The wizard will suggest six possible color selections based on the image that you uploaded:
   
3. Select the option that you wish to use for your theme appearance, then click on Save and customize.

Once you have imported your colors via the Quick set-up, you can proceed to choose the app appearance and adjust the colors based on your needs.

2 - Choose the app appearance

You will need to choose between a light, dark, or custom appearance for your theme. When you select an appearance, the options available for configuring the colors that are used will vary:

Uploading the "dark" icon set (only if you choose to use a "dark" appearance)

If you choose to use a "dark" appearance for your event app, we recommend that you upload the provided "dark mode" icon set to the workspace. These icons are better suited for the dark theme.

This is done via the Content category in the workspace main menu, in the Files section, and then in the Icons tab:

Click on the Upload button to import the .zip file. Once uploaded, these "dark" icons will overwrite and be used instead of the default icons (as long as their file names are not modified).

Note: If you wish to revert the event to a "light" appearance, you will need to re-upload the default icon set to the workspace using the same approach as described above (therefore overwriting the "dark" icons).

Adjusting the colors for a light or dark appearance

If you select the "Light" or "Dark" appearance, the same options are available to help you adjust the colors and appearance of the app:

By looking at the colors in the preview, you can see exactly what elements in the app are affected by the below options.

Primary brand color 
This color is applied to the app header background, selected items throughout the app, and graphic elements.

Custom icons color (header / menu)
You can enable this option in order to be able to adjust the Header icons color and the Menu icons color. If this option is enabled, the colors selected in the below Header icons and Menu icons fields will overwrite the existing color of the icon set used in the workspace. If you are using a custom set of icons, and you do not enable this option, they will keep their own colors.

Header icons / initials
This color is applied to the user profile's initials and the text in the live session buttons. The selected color is also applied to the icons in the header, but only if the above Custom icons color option is enabled, and will overwrite the existing color of the icon set used in the workspace.

Menu icons
The selected color is applied to the icons in the menu, but only if the above Custom icons color option is enabled, and will overwrite the existing color of the icon set used in the workspace.

Session registration checkmark background (applied on mobile app only)
This is the background color for the checkmark that appears on sessions to indicate that the app user has registered to it. This adjustment is only applied on the mobile app.

Adjusting the colors for a custom appearance

If you select the custom appearance, additional options are available to allow you to adjust the colors and appearance of the app:

By looking at the colors in the preview above and the selected colors, you can see exactly what elements in the app are affected by the below options.

Header background / Primary brand color 
This color is applied to the app header background, any selected items throughout the app, and graphic elements.

Custom icons color (header / menu)
You can enable this option in order to overwrite the Header icons color and the Menu icons color. If this option is enabled, the colors selected in the below Header icons and Menu icons fields will overwrite the existing color of the icon set used in the workspace. If you are using a custom set of icons, and you do not enable this option, they will keep their own colors.

If you are using custom multi-color icons, we recommend that you disable this option, otherwise the app will always overwrite the color of the outlines used by the custom icons.

Header icons / initials
This color is applied to the user profile's initials and the text in the live session buttons. The selected color is also applied to the icons in the header, but only if the above Custom icons color option is enabled, and will overwrite the existing color of the icon set used in the workspace.

Menu icons
The selected color is applied to the icons in the menu, but only if the above Custom icons color option is enabled, and will overwrite the existing color of the icon set used in the workspace.

Menu text - Mobile app only
This is the color of the text in the mobile app menu.

Navigation - selected item - Mobile app only
This is the background color for selected tabs/buttons or navigation bar items.

More settings in the custom appearance

By clicking on the More settings button, you can access the below additional color settings in the custom appearance:

By looking at the colors in the preview above and the selected colors, you can see exactly what elements in the app are affected by the below options.

Menu - user's name
This is the color of the text for the attendee's name in the profile section above the app menu.

Menu - workspace name
This is the color of the text for the workspace's name in the profile section above the app menu.

Home page background - Mobile app only
This is the color of the background for the home page on the mobile app only.

Menu section separator background - Mobile app only
This is the color of the background for the section separators located in the app menu, and is only applicable to the mobile app. 

Menu section separator text - Mobile app only
This is the color of the text present in the section separators located in the app menu only, and is only applicable to the mobile app.

Session registration checkmark background - Mobile app only
This is the background color for the checkmark that appears on sessions to indicate that the app user has registered to it. This adjustment is only applied on the mobile app.

3. Adding the graphic elements to the workspace

The Graphics tab is used to add an in-app icon for the workspace.

This icon will be used for the favicon in the browser (web app) and in the list of available events on mobile and on web. It is also visible as part of the event registration page design.

To add an in-app icon, simply drag and drop from your computer or upload the file.

The preview will show how this will look on web app and on mobile app:

Note: The app loading screens now need to be added via part of the app container. 

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