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

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia ServiceNow AI Platform user interface

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Edit components

# Edit components {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura

Edit Theme Builder individual components to better suit your brand and to meet accessibility compliance standards. The theme hooks that you can edit are specific to each type of component.

## Antes de Iniciar

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).

## Por Que e Quando Desempenhar Esta Tarefa

The components that you can edit in Theme Builder were created in the ServiceNow AI Platform
Design System. 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/nO6r1RR_kMtUyCD9RDBlmQ "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.

## Procedimento

1. Navigate to AllNow Experience FrameworkThemesTheme Builder.  
   The Theme Builder landing page displays in the Home page view.
2. Use the Page drop-down list to select the Editor page view.  
   Figura 1. Page drop-down list
3. From the Theme drop-down list, select the theme that you want to edit components for.
4. From the Editor page view, select the Component styles tab.  
   The component styles are graphically listed.
5. Select the Editing tab.  
   ![Component styles Editing tab.]()  
   Nota:  
   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](https://servicenow-prod.fluidtopics.net/JbL3M0mjAtSeFFiI8mmzvw "As you’re creating or managing your theme, you can preview the components available for inclusion on your instance.").
6. Select the component that you want to edit to access the Configurable Style panel.  
   When you're looking at the components listed in the Editing page, notice that some components may display the following symbol. ![Accessibility error.]()  
   Nota:  
   The accessibility warning symbol indicates that the color contrast of the selected component doesn't adhere to Web Content Accessibility Guidelines (WCAG) 2.1 accessibility standards for color contrast. For information on editing components with accessibility violations, see [Adjust a component to meet accessibility standards](https://servicenow-prod.fluidtopics.net/y0Osv0uHT1lkZoJAip3P2w "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 comply with the guidelines for color contrast.").
7. From the Configurable style panel, edit the theme hooks that are available for the selected component, as needed.  
   Figura 2. Configurable style panel

   The editable theme hooks that are 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.  
   Nota:  
   After you update the component-specific hooks, any changes that you make from global styles won't affect your component edits. Component-specific styles take precedence over globally defined styles.
8. If you select a color to be edited, the color picker opens.  
   Figura 3. Color picker  
   Nota:  
   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 you select a shape to be edited, use the selector modals to choose border width and corner radius.
11. When you have completed your shape changes, select Save changes.
12. If you select a font family or font face to be edited, the selector modal opens.  
    Figura 4. Edit font family modal  
    Nota:  
    If you have uploaded a custom font, it will appear in the modal for selection. You can also upload a custom font directly from the selector modal making it available for use throughout your theme. For more information, see [Upload a custom font to your theme](https://servicenow-prod.fluidtopics.net/4vT5SdOQe1THTXqfxVcrmA "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. **Opcional:** Select the undo icon to revert your font to Source Sans Pro, if needed.
15. Access the Component Editor where you can style various aspects of a component by using one of the two ways listed:  
    * Double-click the component tile.
    * 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.  
      Nota:  
      Not all components contain editable parts.
      Figura 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, then edit the available theme hooks.  
    Nota:  
    After you save the changes to any of the color hooks, a Remove override symbol appears. The Remove override symbol enables you to revert your color changes back to the original auto-generated colors. ![Remove override symbol.]()
17. **Opcional:** Return to the Component Overview screen using the links within the navigational path.  
    Figura 6. Component editing breadcrumb navigation
{#tb-edit-components__steps_zc5_vgt_zyb}

## Resultado

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/mh8~2NoMfoPjrgtYb4sbmw "Publish multiple themes to your web instance or a single theme to your mobile instance to reflect your company's brand.").