Themes in UI Builder Fundamental
Within the Next Experience UI Framework, you can create and apply a theme to an experience to change its overall visual style, across all pages, to match your organization’s branding. A theme can include styles that specify things like primary and secondary colors, logos, and fonts.
There are three main baseline themes that are available for use:
- Default
- Base Agent Workspace theme
- Polaris
You may see more Theme records in your instance, depending on your licensing.
Creating a Theme
To create a new Theme, you will need to create a new UX Theme record in the standard view. Navigate to this table in one of the following two ways:
1. Within UI Builder, navigate to Menu > Edit experience settings > Branding and theming and select the Create a theme link to redirect you to the standard view.
2. Navigate to Now Experience Framework > Themes in the Application Navigator within the standard view and select New.
Within the UX Theme record, you will populate the Theme field using Next Experience CSS custom properties and values. These need to be formatted as a JSON object that consists of key-value pairs, as shown in the image of the Default Theme record image below.
It is important to note that hex color values are not supported in UX Theme records. All color values must be specified as RGB triplet values.
Common CSS custom properties
To add a logo, other images, or fonts, you will use the UX Theme Assets related list within the UX Theme record. In Lab 7, you will be adding a custom logo to a Theme using this related list.
Below is a list of commonly used CSS custom properties used to specify colors for your branding. You can find additional properties available for use by checking out the Default Theme record in your instance.
--now-color_brand--primary :Your primary brand color.
--now-color--primary-1: Same as above - your primary brand color.
--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 above - 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.
Refer to the following images which indicate where the above CSS custom properties appear in both a Workspace and a Portal experience.
Recall there is a Styles tab in the component Configuration Panel that lets you apply CSS to your component. Note that this will let you style the container of the component, but it does not style the component itself. You will need to use the CSS custom properties to accomplish that.
Extending a Theme
Much like extending a data table, you can also extend a theme. Extended themes inherit all styles from the parent theme, which you can override, and they can include additional styles as well.
If your organization plans on creating multiple workspace or portal experiences, it is good practice to create a main theme record that can then be extended. The practice of extending a theme allows you create and customize styles for each experience, while still having access to common styles within the parent theme.
Extending the baseline Default theme is a great option as a starting point for a theme that you can customize as needed.
Also, when you create a portal or workspace experience from within the App Engine Studio, a custom theme will automatically get created and applied to it, which extends one of the baseline themes.
For portal experiences, the theme will extend the Default theme.
For workspace experiences, the theme will extend the Base Agent Workspace theme.
Check out the Themes in UI Builder section in the UI Builder Product Documentation to learn more about creating custom themes and considerations when creating a theming plan.
Themes in UI Builder: Themes enable you to change the visual style of your app's experiences so that they express the look and feel of your brand.
Applying a Theme
To apply an existing theme:
1. Within UI Builder, navigate to Menu > Edit experience settings > Branding and theming.
2. Select a Theme to apply from the dropdown.
Theme Preview Page
Create a new page within your experience, using the Theme Preview page template, to enable the ability to view how a theme will look on a page. The theme preview page displays how common components will look with the currently applied theme, such as colors, text, buttons, form controls, etc.
Once the new page is created, open it to preview the page in your browser. Apply a different theme within UI Builder to see how the same page and its elements look with the new theme. Lab 7 will walk you through creating and using a Theme preview page.
Check out the ServiceNow Theming Essentials course within Now Learning to get more information on how to create and apply themes to your ServiceNow instance.
ServiceNow Theming Essentials: Learn how to change the look of a ServiceNow instance. NOW LEARNING
Knowledge Test
Q1: Hex color values are supported in UX Theme records.
- True
- False
Hex color values are not supported in UX Theme records.
Q2: Which table would you use to add images (such as a logo) or fonts to a Theme?
- UX Logo
- UX App Configuration
- UX Theme
- UX Theme Assets
The UX Theme Assets table, which is a related list on the UX Theme record, can be used to include images and fonts to a Theme.
Q3: When creating multiple workspace or portal experiences that share similar branding styles, which option is a good practice?
- Create a new Theme record for each experience that does not extend another Theme.
- Use the Styles tab in the Configuration Panel to style the components within each experience individually.
- Create a main theme record that can then be extended for each experience theme.
- None of the above.
When creating multiple experiences that share similar branding styles, it is good practice to create a main Theme record that can then be extended for each experience theme.
Next
Lesson 16 - Lab 7: Theming and Menus