UI Builder – Theming

[Community Alums]

 Center of Excellence / UI Builder / UI Builder Quick Start / Theming

Work with Themes

This article is intended to walk admins through the following scenarios:

1. Next Experience UI is disabled, and a workspace or portal experience is being themed.

2. Next Experience UI is enabled, and a portal experience is being themed.

Workspaces inherit the Next Experience UI theme when it is enabled, for more information see the Next Experience UI - Theming article. (Coming soon)

Themes enable you to change the visual style of your app's experiences so that they express the look and feel of your brand.

Before creating a theme to apply to your experience, create a theming plan for all of the experiences that your users interact with. Your theming plan can consider:

• What kinds of experiences do my users interact with?
• What similarities and differences should the visual styles of these experiences have?

For example, if you just want to create one theme that represents a singular branding look and feel throughout all of your experiences, then you might want to create a main theme only. However, if you want to represent multiple branding variations that are based on an overall brand style, you can create a main theme and then extend that theme to create theme variations.

Creating your main theme

Your main theme represents the overall look and feel of your organization's brand. When creating a main theme, consider the following:

• Which brand colors do you want to display to users for:
  1. Primary, or the most important, actions?
  2. Secondary, or complementary, actions?

After choosing your brand colors, you can then assign color values, as RGB triplets, to the following Next® Experience CSS custom properties for theming:

CSS custom property	RGB color value to assign
--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 your Experience

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

[jonathanadlum]

Hi Nicholas,

Great article, it has helped our team out alot.

One thing which has us completely stumped is.. how can we change the background color of the footer(s)?

I'm assuming its either a Now® Experience CSS custom property or an option on the definition of the footer itsellf.. either way can you help us out?

Thanks in advance

Jon