| | | |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| --now-color_brand--primary | Your primary brand color Note: A saturated, darker color works best, as this color frequently appears on a light background. Dark backgrounds are not currently supported. |
| --now-color--primary-1 | Same as previous. Your primary brand color Note: A saturated, darker color works best, as this color frequently appears on a light background. Dark backgrounds are not currently supported. |
| --now-color--primary-0 | Slightly lighter variation of your primary brand color |
| --now-color--primary-2 | Slightly darker variation of your primary brand color |
| --now-color--primary-3 | Darkest variation of your primary brand color |
| --now-color_brand--secondary | Your secondary brand color |
| --now-color--secondary-1 | Same as previous. Your secondary brand color |
| --now-color--secondary-0 | Slightly lighter variation of your secondary brand color |
| --now-color--secondary-2 | Slightly darker variation of your secondary brand color |
| --now-color--secondary-3 | Darkest variation of your secondary brand color |

You can then use these CSS custom properties in a Theme [sys_ux_theme] record to Create a custom theme.

The following images demonstrate where Next® Experience CSS custom properties appear in a Workspace and Portal. Refer to these images when determining which CSS custom properties you want to set values for in your theme.

Where CSS custom properties appear in a Workspace experience

Where CSS custom properties appear in a Portal experience

Note: To change the banner image, you must first upload a new image at System UI > Images and copy the Image [db_image] record's Name field. Then in UI Builder, select the Hero Banner's Row container. In CSS styles, set the value of the background-image property to be the URL for the image's Name field. For example, if your image's name is my_image.png, set the value of background-image to url(my_image.png).

Creating variations on your main theme

You can create variations on your main theme depending on the type of experience that you're building for your users. When creating a variation on a main theme to apply to an experience, consider the following:

• What roles do your users have in this experience?
• What tasks are your users focusing on the most in this experience?
• How might your users be feeling when working in this experience?

Asking your team these questions can help you better understand your approach for creating a variation on your main theme. For example, if you're creating a theme variation for fulfillers who have strict SLAs for completing actions in a Workspace, consider calling more attention to primary and secondary actions in the Workspace by transforming all button text to uppercase.

The following is an example of how to style a main theme and two variations on a main theme:

Note: Your instance doesn't apply your main theme and theme variations to experiences automatically. To step through an example of creating a main theme and a variation on a main theme, see Extend a theme.

Apply a theme to change the visual style of your experience and provide a consistent look and feel across all pages.

Themes enable you to override default component styles, such as fonts and colors, and create a consistent look and feel across your entire experience.

With Theme [sys_ux_theme] records, you can set style properties that are passed down to all of the visual elements in your experience, without needing to rebuild components from scratch. For more information on creating your own theme, see Create a custom theme.

1. Select an experience from the list, or select + Create experience in Platform to create a new experience and add it to the list. After selecting the experience you want to build, the UI Builder environment appears.
2. Make sure that your selected application scope is the same scope that your experience is associated with. To change your application scope, in the main header select the application picker and then select the appropriate application scope.
3. In the UI Builder main header, select Menu > Edit experience settings. The Experience Settings screen appears.
4. From the settings menu, select Branding and theming.
5. From the Themes list, select the theme that you want to apply to all pages in your experience. The following themes are available for you to select:
   
   • Default - The default ServiceNow theme
     
   • Base Agent Workspace theme - The default theme for a Workspace experience
     If you want to create a new theme, select Create a theme. See Create a custom theme.
6. After selecting a theme to apply, select Save all changes.
   To view your theming changes, select Open in the URL header.

Applying a theme to your experience in UI Builder