---
sourceDocument: Australia Customer Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/customer-service-management

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Customizing component colors

# Customizing the colors of ServiceNow components in AEM {#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

You can define the look and feel of the ServiceNow components in
Adobe Experience Manager (AEM) by specifying colors for them.

As an AEM administrator, you can either modify the color variables preconfigured for all components or use the initializeCSS function for customizing the colors of a particular component using a custom CSS class.
You specify the custom CSS class for a component in the Custom CSS Class property. For more information, see [Display ServiceNow knowledge articles on an Adobe Experience Manager page](https://servicenow-prod.fluidtopics.net/gq5PZTQBnxEbhzh5V~WSYw "Use knowledge components available within Adobe Experience Manager (AEM) to access knowledge bases from the ServiceNow instance and display associated knowledge articles on an AEM-based website.") and [Display ServiceNow cases on an Adobe Experience Manager page](https://servicenow-prod.fluidtopics.net/uuiAQ9CRHaXvh3qXK7_A0Q "Use case components available within Adobe Experience Manager (AEM) to access customer service cases from the ServiceNow instance and display them on an AEM-based website.").  
Nota:  
By default, the ServiceNow components are configured using the Bootstrap v4.4.1 CSS styles. If your AEM page uses a different Bootstrap version, the ServiceNow components style is overridden by the page style.

## Modify the color theme for all ServiceNow components in AEM {#ariaid-title2}

Set the color theme for the ServiceNow components in Adobe
Experience Manager (AEM) all at once by configuring the color variables.

### Antes de Iniciar

Role required: AEM administrator

### Por Que e Quando Desempenhar Esta Tarefa

Nota:  
By default, the ServiceNow components are configured using the Bootstrap v4.4.1 CSS styles. If your AEM page uses a different Bootstrap version, the ServiceNow components style is overridden by the page style.

### Procedimento

1. [Open CRXDE Lite in your browser](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html).  
   For example, in your browser, enter the URL in the format http://\<AEM_hostname\>:\<AEM_port\>/crx/de. The default URL for CRXDE Lite is http://localhost:4502/crx/de.
2. Navigate to appsservicenow-componentsclientlibsclientlib-common.
3. Open the variables.less file.
4. Configure the color variables available for the HTML elements in the ServiceNow components.  
   {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2}

   | Color setting | Variable |
   |-|-|
   | Text content | @text-color |
   | Hyperlinks | @link-color |
   | Badges | @badge-text-color |
   | Badges background | @badge-background-color |
   | Primary color for visual emphasis | @primary-color |
   | Color complementary to the primary color, for visual emphasis | @secondary-color |
   | Component titles | @title-color |
   | Primary button text | @primary-btn-text-color |
   | Primary button background | @primary-btn-bkg-color |
   | Secondary button text | @secondary-btn-text-color |
   | Secondary button background | @secondary-btn-bkg-color |
   [Tabela 1. Color variable settings]

   {#aem-modify-color-all-comp__table_vhh_gjm_2mb}  
   Nota:  
   You specify a color for a variable in one of the following ways:
   * Color nameFor example, <kbd class="ph userinput">red</kbd>

   * HEX value For example, <kbd class="ph userinput">#FF0000</kbd>

   * RGB value For example,
     <kbd class="ph userinput">rgb(255,0,0)</kbd>

   * var function

     Use the var function to specify a
     custom property for a color. For example,
     <kbd class="ph userinput">var(--gray-dark)</kbd>.
   {#aem-modify-color-all-comp__ul_u1g_slm_2mb}
5. From the CRXDE Lite menu, click Save All to save the changes on the AEM server.

## Modify the color theme for a ServiceNow component in AEM {#ariaid-title3}

Override the color theme for a ServiceNow component in Adobe
Experience Manager (AEM) by using the initialize function.

### Antes de Iniciar

Role required: AEM administrator

### Por Que e Quando Desempenhar Esta Tarefa

The color variables you specify in the variables.less file are applied to all ServiceNow components in AEM. You can override the default colors for a particular component by setting the color variables for the component in the initializeCSS function.  
Nota:  
By default, the ServiceNow components are configured using the Bootstrap v4.4.1 CSS styles. If your AEM page uses a different Bootstrap version, the ServiceNow components style is overridden by the page style.

### Procedimento

1. [Open CRXDE Lite in your browser](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html).  
   For example, in your browser, enter the URL in the format http://\<AEM_hostname\>:\<AEM_port\>/crx/de. The default URL for CRXDE Lite is http://localhost:4502/crx/de.
2. Navigate to appsservicenow-componentsclientlibsclientlib-common.
3. Open the variables.less file.
4. Specify the initializeCSS function for a component in the format <kbd class="ph userinput">&lt;component_type&gt;;&lt;class_name&gt;;&lt;color_variable_1&gt;;&lt;color_variable_2&gt;;&lt;color_variable_n&gt;</kbd>.  
   * component_type: The type of the component on which you want to apply the custom color theme, for example, articlelist, articleview, casecards, and so on.
   * class_name: The Custom CSS class you enter in the Custom CSS class property of your component.
   * color_variable_1, color_variable_2, color_variable_n: The color variables you specify for the HTML elements in a component. For more information, see the [Color variable settings](https://servicenow-prod.fluidtopics.net/fNS9sWA~h3__2rSK9EYgog#aem-modify-color-all-comp__table_vhh_gjm_2mb) table.

   {#aem-modify-color-comp__ul_dyk_py4_2mb}

   Use the following sample code as a reference for color styling at the
   component level.

       .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
       .initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;);
       .initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
       .initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
       .initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;);
       .initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;);
       .initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;);
       .initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;)

5. From the CRXDE Lite menu, click Save All to save the changes on the AEM server.