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


---

# Theming for AI Search in Service Portal

# Theming for AI Search in Service Portal {#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 customize the look and feel of the AI Search experience in Service Portal by updating the relevant CSS variables.
The following CSS variables control the look and feel of the AI Search
features in Service Portal. For more information about AI Search features, see [Using AI Search](https://www.servicenow.com/docs/access?context=use-ais&version=australia&pubname=australia-platform-administration&ft:locale=en-US).

You can edit these variables in the CSS variables field of a Theme \[sp_theme\] record. You can also configure these variables with a CSS Include associated with a portal's theme. For more information, see
the following topics:

* [Create a portal theme](https://servicenow-prod.fluidtopics.net/PLJPBE9mlCQqJoXsi90bNQ "If you need more customizations than the Branding Editor can provide, you can create your own custom theme.")
* [Create a CSS include to override theming for AI Search in Service Portal](https://servicenow-prod.fluidtopics.net/Db~WJejyk0JCmTG7C9oKAg "Override theming for AI Search in Service Portal to match your company branding.")

{#ais-sp-css-vars__ul_dp5_p4l_3xb} {#ais-sp-css-vars__table_wcz_tww_knb__entry__3}

| Variable | Default value | Description |
|-|-|-|
| <var class="keyword varname">$now-sp-font-family-sans-serif</var> | `"SourceSansPro", Helvetica, Arial, sans-serif` | Font family for all texts. |
| <var class="keyword varname">$now-sp-color--text-primary</var> | `$gray-dark` |  Color of   unselected tabs, Genius result button text, hit text color, result icons, and  search bar drop down list item text and icon color. |
| <var class="keyword varname">$now-sp-text-link--primary--color</var> | `$gray-dark` | The color of the title text in search results. |
| <var class="keyword varname">$now-sp-display-type--tertiary--color</var> | `$gray-dark` | The color of the text snippet in search results. |
| <var class="keyword varname">$now-sp-color--neutral-12</var> | `$gray-dark` |  Expanded icon color (chevron) of the facets in mobile view. |
| <var class="keyword varname">$now-sp-global-border-radius</var> | `4px` |  Rounded search results corners affecting the content pane and not search result cards. This variable also affects Genius results, buttons on Genius results, and search bar icon hover background highlights. This variable doesn't affect facets. |
| <var class="keyword varname">$now-sp-color--focus-ring</var> | `$brand-primary` | Tabs focus color. |
| <var class="keyword varname">$now-sp-tabs--selected--color</var> | `$brand-primary` | Text color of selected tab. Doesn't include on hover. |
| <var class="keyword varname">$now-sp-tabs--color--hover</var> | `$brand-primary` | Text color of all tabs when hovered. |
| <var class="keyword varname">$now-sp-tabs--border-color</var> | `$sp-b-border-color` | Tabs underline color. |
| <var class="keyword varname">$now-sp-tabs--selected--background-color</var> | `$brand-primary` | Selected tab underline color. |
| <var class="keyword varname">$now-sp-heading--title-primary--color</var> | `$gray-dark` | Color Filters label. |
| <var class="keyword varname">$now-sp-checkbox-label--color</var> | `$gray-dark` | Filter item (checkbox label) color. |
| <var class="keyword varname">$now-sp-button--primary--bare--color</var> | `$link-color` | Clear All and Clear link color in facets filter. |
| <var class="keyword varname">$now-sp-button--primary--bare--color--active</var> | `$link-color` | Clear All and Clear link color in facets filter on click. |
| <var class="keyword varname">$now-sp-button--primary--bare--color--hover</var> | `$link-hover-color` |  Clear All and Clear link color in facets filter on hover. |
| <var class="keyword varname">$now-sp-pill--selected--background-color</var> | `$brand-primary` | Selected filter pill background. |
| <var class="keyword varname">$now-sp-pill--selected--border-color</var> | `$brand-primary` |  Selected filter pill border color. |
| <var class="keyword varname">$now-sp-button--secondary--background-color</var> | `$btn-default-bg` | Genius result button background. |
| <var class="keyword varname">$now-sp-button--secondary--color</var> | `$btn-default-color` |  Genius result button text color. |
| <var class="keyword varname">$now-sp-button--secondary--border-color</var> | `$btn-default-border` | Genius result button border color. |
| <var class="keyword varname">$now-sp-button--secondary--background-color--hover</var> | `darken($btn-default-bg, 10%)` | Genius result button background color on hover. |
| <var class="keyword varname">$now-sp-button--secondary--color--hover</var> | `$btn-default-color` |  Genius result button text color on hover. |
| <var class="keyword varname">$now-sp-button--secondary--border-color--hover</var> | `darken($btn-default-border, 12%)` |  Genius result button border on hover. |
| <var class="keyword varname">$now-sp-button--secondary--background-color--active</var> | `darken($btn-default-bg, 10%)` | Genius result button background on click. |
| <var class="keyword varname">$now-sp-button--secondary--color--active</var> | `$btn-default-color` | Genius result button text color on click. |
| <var class="keyword varname">$now-sp-button--secondary--border-color--active</var> | `darken($btn-default-border, 12%)` | Genius result button border color on click. |
| <var class="keyword varname">$now-sp-highlighted-value--tertiary--color</var> | `$gray-dark` | Genius result Top Result tag text color. |
| <var class="keyword varname">$now-sp-button--border-radius</var> | `$now-sp-global-border-radius` | Differentiates the radius for button and search bar buttons. |
| <var class="keyword varname">$now-sp-container--border-radius</var> | `$now-sp-global-border-radius` | Border radius for search result cards, genius result cards, and the search results container. Doesn't affect the border between individual results. |
| <var class="keyword varname">$now-sp-button--primary-negative--background-color</var> | `$btn-primary-bg` |  Genius button background color in the EVAM action confirmation modal. |
| <var class="keyword varname">$now-sp-button--primary-negative--border-color</var> | `$btn-primary-border` | Genius button border color in the EVAM action confirmation modal. |
| <var class="keyword varname">$now-sp-button--primary-negative--background-color--hover</var> | `darken($btn-primary-bg, 10%)` | Genius button background color on hover in the EVAM action confirmation modal. |
| <var class="keyword varname">$now-sp-button--primary-negative--border-color--hover</var> | `darken($btn-primary-border, 12%)` | Genius button border color on hover inside the confirmation. |
| <var class="keyword varname">$now-sp-button--primary-negative--background-color--active</var> | `darken($btn-primary-bg, 10%)` |  Genius button background color on click inside the confirmation modal. |
| <var class="keyword varname">$now-sp-button--primary-negative--border-color--active</var> | `darken($btn-primary-border, 12%)` | Genius button border color on click inside the confirmation modal. |
| <var class="keyword varname">$now-sp-button--primary--background-color</var> | `$btn-primary-bg` | Selected filter (pill) background color. |
| <var class="keyword varname">$now-sp-button--primary--border-color</var> | `$btn-primary-border` | Selected filter (pill) border color |
| <var class="keyword varname">$now-sp-button--primary--color</var> | `$btn-primary-color` | Selected filter (pill) color. |
| <var class="keyword varname">$now-sp-button--primary--background-color--hover</var> | `darken($btn-primary-bg, 10%)` |  Selected filter (pill) background color on hover. |
| <var class="keyword varname">$now-sp-button--primary--border-color--hover</var> | `darken($btn-primary-border, 12%)` | Selected filter (pill) border color on hover. |
| <var class="keyword varname">$now-sp-button--primary--background-color--active</var> | `darken($btn-primary-bg, 10%)` | Selected filter (pill) background color on click. |
| <var class="keyword varname">$now-sp-button--primary--border-color--active</var> | `darken($btn-primary-border, 12%)` | Selected filter (pill) border color on click. |
| <var class="keyword varname">$now-sp-rem-factor</var> | `5` | The same variable as <var class="keyword varname">--classicsponlydonotuse--rem-multipy</var>. Nota: It's not suggested to use this variable. |
| <var class="keyword varname">$sp-search-result-title-highlight--background-color</var> | None | Text background color for title highlights in search results. Nota: For this theme setting to take effect, you must add the static value `removeHitHighlighting` with value `"false"` for the `sn-search-result-evam-card` component in the relevant EVAM view template, as shown in this example: { "component": "sn-search-result-evam-card", "staticValues": { "removeHitHighlighting": { "translatable": true, "key": "false" } }, } To learn about configuring settings in EVAM view templates, see [Define an EVAM view template](https://www.servicenow.com/docs/access?context=define-evam-template&version=australia&pubname=australia-servicenow-platform&ft:locale=en-US). |
[ ]

{#ais-sp-css-vars__table_wcz_tww_knb}