Edit components

Edit Theme Builder individual components to better suit your brand and to support accessibility requirements. Each component type supports specific customization options called theme hooks.

Before you begin

Role required: ui_builder_admin

For information on granular roles, see Granular admin roles.

About this task

The components available in Theme Builder were created in the ServiceNow AI Platform Design System. When you edit component-specific theme hooks, those changes take precedence over globally defined styles.

For more information, see Next Experience Components on the ServiceNow Developer Site.

For instructions on editing the Unified Navigation component, see Align with your brand by using the Unified Navigation component.

The total number of accessibility violations is indicated on the red numbered badge icon alongside the Accessibility inspector panel. You can review and fix these violations as part of this task. See Adjust a component to meet accessibility standards for guidance.

Procedure

1. Navigate to All > Now Experience Framework > Theme Builder.
   The Theme Builder landing page displays in the Home page view.
2. From the Page drop-down list, select Editor.

   Figure 1. Page drop-down list

   

3. From the Theme drop-down list, select the theme to edit.
4. From the Editor page, select Component styles.
   The component styles are graphically listed.

   

5. Select Editing to switch from the Preview view to the editable view.

   

   The component list displays, organized by category.

6. Locate the component to edit by scrolling through the categories or using the filter icon .
   Some components display an accessibility warning symbol.

   

   Note:

   The accessibility warning symbol indicates that the color contrast of the selected component may not meet color contrast requirements. For information on resolving color contrast issues, see Adjust a component to meet accessibility standards.
7. Select the component to open the Configurable Style panel.

   Figure 2. Configurable style panel

   

   The Configurable Style panel displays all available theme hooks for that component. The type and number of theme hooks vary by component. For example, if you select a Badge component, you can edit the colors and accessibility hooks for the badge. If you select a Text link component, you can edit the base color and accessibility hooks.

8. If the component has editable color hooks, select the color to change.
   The color picker opens.

   Figure 3. Color picker

   

   Note:

   By default, the color picker shows all the available colors for the component. Use the My Colors tab to select from a predefined list of colors or choose the Custom tab to select the specific color model that you prefer: HEX, RGB, or HSL.
9. When you have completed your color changes, select Save changes.
10. If the component has shape properties, use the selector modals to adjust border width and corner radius.
11. When you have completed your shape changes, select Save changes.
12. If the component has editable font properties, select the font family or font face to edit.

    Figure 4. Edit font family modal

    

    Note:

    If you have uploaded a custom font, it appears in the modal for selection. You can also upload a custom font directly from the selector modal making it available throughout your theme. For more information, see Upload a custom font to your theme.
13. When you have completed your font changes, select Save changes.
14. Optional: Select the undo icon to revert your font to Source Sans Pro, if needed.
15. Optional: Access the Component Editor for deeper styling where you can style various aspects of a component by using one of the two ways listed:
    • Select the component tile twice.
    • Select either the Style interactions, Style subcomponents, or Style variants button within the configurable styles panel, depending on what is available for that specific component.
      Note:

      Not all components contain editable parts. These buttons only appear if they're available for your selected component.

      Figure 5. Component Editor

      

16. From the Component Editor, choose the interaction, variant, or subcomponent of the selected component.
17. Edit the available theme hooks.
    Note:

    After saving changes to a color hook, a Remove override symbol appears. The Remove override symbol reverts color changes to the original auto-generated colors.

    

18. Optional: Use the navigational breadcrumb path to return to the Component Styles section or the component overview.

    Figure 6. Component editing breadcrumb navigation

    

Result

Component edits are saved to the selected theme.

If your theme is published, your component edits are visible to users who have your theme applied on refresh. For information on publishing your theme, see Publish your themes with Theme Builder.