---
sourceDocument: Australia ServiceNow AI Platform user interface
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/platform-user-interface

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Edit components

# Edit components {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read

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](https://www.servicenow.com/docs/access?context=granular-admin-roles&version=australia&pubname=australia-platform-security&ft:locale=en-US).

## 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](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?releases[]=vancouver&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades) on the ServiceNow Developer Site.

For instructions on editing the Unified Navigation component, see [Align with your brand by using the Unified Navigation component](https://servicenow-prod.fluidtopics.net/ZVLvdZowR9G6Dc~I7~X5Rg "Align your experience more closely with your brand by editing the Unified Navigation component and its subcomponents.").

The total number of accessibility violations is indicated on the red numbered badge icon ![Accessibility inspector badge.]() 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](https://servicenow-prod.fluidtopics.net/czDvA66DZItbdM3jgBmuQg "Adjust a component to meet the Web Content Accessibility Guidelines (WCAG) 2.1. When you're editing a component in Theme Builder and see a warning symbol, that indicates that the component doesn't conform with the guidelines for color contrast.") for guidance.

## Procedure

1. Navigate to AllNow Experience FrameworkTheme 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.  
   ![Component styles Editing tab.]()

   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. ![Accessibility error.]()  
   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](https://servicenow-prod.fluidtopics.net/czDvA66DZItbdM3jgBmuQg "Adjust a component to meet the Web Content Accessibility Guidelines (WCAG) 2.1. When you're editing a component in Theme Builder and see a warning symbol, that indicates that the component doesn't conform with the guidelines for color contrast.").
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](https://servicenow-prod.fluidtopics.net/tjrDCuGuWgbppsPws6fFEQ "Upload and preview up to 10 custom font families and an unlimited number of associated font faces in your Theme Builder 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
    {#tb-edit-components__ul_idn_dqs_tdc}
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. ![Remove override symbol.]()
18. **Optional:** Use the navigational breadcrumb path to return to the Component Styles section or the component overview.  
    Figure 6. Component editing breadcrumb navigation
{#tb-edit-components__steps_zc5_vgt_zyb}

## 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](https://servicenow-prod.fluidtopics.net/GEHVSNoQw7f8uunQ6C4DQg "Publish multiple themes to your web instance or a single theme to your mobile instance to reflect your company's brand.").

*[\>]: and then