Skip to main content

Activity 4

Explore the Theme Record​

This section will focus on how a theme is comprised of a theme record and associated style records, with a short overview of the new data model used for theming.

  1. In the All menu navigate to Now Experience Framework > Theme Management > Themes

  2. Locate the Wasabi Donut Theme in the list, or search for it in the filter, and click on the record to open it.

  3. Within the UX Theme record, you’ll see the theme name, description, application scope, and if the theme is active. You will also see two form sections:

    1. Compositional: App Theme – This is the new data model for theming Next Experience UI and associated workspaces. A compositional theme uses one Theme record as a container and multiple style records to hold CSS for colors, fonts, etc. This means that there is not one large JSON object for all theming elements, and style records can be re-used across themes. There is more information on this new data model in the community.

    2. Legacy: Experience Theme – This is the previous data model that uses one JSON object. It is used when Next Experience UI is not enabled, and for Portal Experiences (Not Service Portal).

  4. Theme Builder automatically generated 5 Core style records for the Wasabi Donut Theme, and changes made in Theme Builder are reflected in these records.

    1. Colors: Contains the CSS Variables of the brand colors defined in the wizard, as well as colors generated from branding colors.

    2. Typography: CSS Variables for the selected font, with associated weights, styles, and links to the style assets themselves, i.e., attachments for fonts.

    3. Imagery: Contains the logo file.

    4. Shape and Form: Contains the CSS Variables for the rounded corners that were selected in the wizard and other form elements.

    5. Mobile Colors: Defines the color variables that apply to Mobile applications.

Edit a UX Style Record​

This section will walk through making an edit to the Shape and Form UX Style record and view how that change applies to the theme. As of this lab, changes made in UX Style records will not reflect in Theme Builder.

  1. In the Wasabi Donut Theme record, click on the Shape and Form link under the Style column to open the UX Style record.

  2. Within the Style field, locate the “—now-container—border-width” CSS variable (the 4th variable from the left), it currently has a value of 1px, change the value to 10px.

  3. Click Update.

  4. Navigate back to the landing page by clicking the ServiceNow logo in the top left corner. You may need to refresh the browser window for the changes to take effect.

  5. Notice that some of the components on the page have a border width of 10px.

Note: Changes made to the UX Style record(s) will not reflect in the current version of Theme Builder used for this lab. Ensure you are making changes incrementally and testing when making changes in the UX Style records. If a previous version of the record is needed, add the Versions related list to the UX Style record form and revert to the version needed.