Creating a new Theme in the Next Experience UI

Themes in the new Next Experience UI are made up of UX Styles and UX Theme records. In order to style a theme, you first want to create the UX style record that contains the CSS properties you want to include in the theme. In our case we will just be changing the banner on the instance.

1. Navigate to sys_ux_style.list in the Application Navigator
2. Create a new record by filling out the following fields:
   1. Name – whatever name you would like to give to the new style
   2. Type – choose Core for a baseline style, Variant for a user selectable theme override.
   3. Style – This is where you would enter the properties for the theme in a JSON format. In our example the below base values contain the overall style of the instance, while the properties value contains the override for the navigation banner

All colors are displayed in RGB values. To create a color profile with the appropriate JSON values, you can make use of this website: https://theme.deoprototypes.com/color-generator-advanced (Note: This site is not owned or operated by ServiceNow or Pathways Consulting Group.)

3. Create a UX Theme record by going to Now Experience Framework -> Theme Management -> Themes
4. Click New
5. Fill out the Name and Description fields and click save
6. On the Compositional: App Theme embedded list, add records for the following Core types, adding the OOB styles for Colors, Typography, U16 Dashboard Visualization Compatibility, Shape and Form. Add the custom style created in Step 2 at a higher order.

7. Now we have to set the custom theme as the theme the system will use. Go to the System Properties (sys_properties.list)
8. Add/edit the property glide.ui.polaris.theme.custom, setting the value field to the sys_id of the UX Theme record from Step 6. Reload the browser and you should see the custom theme in the instance UI.
9. (optional) Set a data preserver for the system property so it’s not cloned over.
   1. Go to System Clone -> Clone Definition -> Preserve Data
   2. Create a new record form the list view
   3. Fill out the following fields
      1. Name — whatever you would like
      2. Table — System Property [sys_properties]
      3. Condition — Name is glide.ui.polaris.theme.custom
      4. Theme — true

More Info:

Create your first Next Experience UI Theme: https://www.servicenow.com/community/next-experience-articles/create-your-first-next-experience-ui-theme/ta-p/2331961