Edit components

As you create or manage your theme, you can edit individual components to better suit your brand and to meet accessibility compliance standards. The theme hooks you can edit are specific to each type of component.

Before you begin

Role required: admin

About this task

The components you can edit in Theme Builder were created in the Now Design System. For more information, see Next Experience Components on the ServiceNow Developer Portal.

The total number of accessibility violations per component are indicated on the editing panel page.

Procedure

1. Navigate to All > Now Experience Framework > Themes > Theme Builder.
   The Theme Builder landing page displays in the Home page view.
2. From the Home button, select the Editor page view.

   Figure 1. Editor page view

   

3. Select the theme for which you want to edit components.
4. In the Editor page view, select the Component styles tab.
   The component styles are graphically listed.

   

5. Select Editing.
   Note:

   The components that can be edited are displayed. For information on how to filter the list of components to locate the component you want to edit, see Preview components.
6. Select the component you want to edit.
   If you see a warning on the editing tab, you must resolve all the warnings inside the component interaction panel to remove the warning sign from the component.
7. In the configurable style panel at the right, edit the theme hooks available for the selected component as needed.

   The editable theme hooks available depend on the type of component you selected. 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.

   After you update the component-specific hooks, any changes that you make to the global style won't update the component styles. This is because component-specific styles takes precedence over globally defined styles.

8. If you select a color to be edited, the color picker opens.

   Figure 2. Color picker

   

   Note:

   By default, the color picker shows all available colors for the component. You can select the Hide inaccessible choices slider to limit the color choices to those identified as accessible, based on current WCAG guidelines.
9. When you have completed your changes, select Save changes.
10. When looking at the components listed in the Editing page, notice that some components may display the following symbol.

    

    Note:

    The accessibility warning symbol indicates that the color contrast of the selected component does not adhere to WCAG 2.1 accessibility standards for color contrast. For more information, see Adjust components to meet accessibility standards.