---
sourceDocument: Australia Conversational Interfaces
sourceDocumentLink: https://www.servicenow.com/docs/r/conversational-interfaces

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Conversational Interfaces

ft:clusterId :

    - convint

bundleId :

    - convint

workflow :

    - Platform


---

# Theming for ServiceNow Otto for Virtual Agent enhanced and premium chat

# Theming for ServiceNow Otto for Virtual Agent enhanced and premium chat {#ariaid-title1}

Release version: Australia  
Updated August 31, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read  
You can customize the look and feel of the ServiceNow® Otto for Virtual Agent enhanced and premium chat experience in your ServiceNow portal by updating the relevant Cascading Style Sheet (CSS) variables.
As a Virtual Agent admin or admin, you can customize the default enhanced and premium chat theming variables. Information on how to customize theming can be found in [Create a portal theme](https://www.servicenow.com/docs/access?context=c_CustomCSS&version=australia&pubname=australia-platform-user-interface&ft:locale=en-US). Edit these variables in the following table within the CSS variables field (sp_theme) record. You can also configure these variables with a CSS Include associated with a portal's theme.  
Note:  
The chat header logo is shared between standard and enhanced chat, and it's determined by the selected standard chat branding profile. You can't configure a separate chat header logo for each experience.
Updating the chat header logo in one experience updates it for the other. To view the branding profile, navigate to Assistant DesignerAssistantsBranding.
For the variables, nass refers to enhanced or premium chat.

For more information about enhanced chat, see [Enhanced chat](https://www.servicenow.com/docs/~gNWCNo3JNVlg5dvBADfNQ "ServiceNow Otto for Virtual Agent enhanced chat is a conversational support experience within a dynamic window that also includes the ability to have multiple active conversations and superior search capabilities. Turning on enhanced chat's full-page experience further combines chat and search capabilities by redirecting you into a full-page chat after entering a query into a portal's search bar."). For more information about premium chat, see [Premium chat](https://www.servicenow.com/docs/poQlvCI1S43Fsvkr2i0a1g "ServiceNow Otto for Virtual Agent premium chat is a contextual chat experience that appears throughout the platform, adapting its behavior and interface based on where users are and what they're doing.").  
{#theming-na-full-page-experience__table_ok3_wwm_bdc__entry__3}

| Variable | Description | Default Values |
|-|-|-|
| $now-sp-nass-agent-bubble-font-color | Agent text message font color. | $text-color |
| $now-sp-nass-chat-user-message-bubble-bg-color | User text message bubble background color. | $brand-primary-lightest |
| $now-sp-nass-user-bubble-font-color | User text message font color. | $text-color |
| $now-sp-nass-timestamp-color | Timestamp text color. | $text-muted |
| $now-sp-nass-secondary-text-color | Secondary text color for example for Active. | $gray-dark |
| $now-sp-nass-system-msg-text-color | System message text color. | $text-muted |
| $now-sp-nass-base-input-field-placeholder-and-highlight-text-color | Input text color and with .45 opacity for placeholder. | $text-color |
| $now-sp-nass-base-link-color | Link color. | $brand-primary |
| $now-sp-nass-color-secondary_2 | Now Design System secondary-2 color. | $brand-primary-darker |
| $now-sp-nass-modeless-dialog-header-bg-color | Background color for primary ServiceNow Otto header bar. | #ffffff |
| $now-sp-nass-modeless-dialog-header-text-color | Text color for primary ServiceNow Otto header. | $text-color |
| $now-sp-nass-base-toolbar-labels-and-icons-color | Left-panel tool bar icons. | $gray-light |
| $now-sp-nass-toolbar-icons-color--hover | Left-panel tool bar icons in hover state. | $gray-dark |
| $now-sp-nass-toolbar-icons-color--active | Left-panel tool bar icons in active state. | $text-color |
| $now-sp-nass-toolbar-icons-fullscreen-mode-color | Left-panel tool bar icons in full-screen mode. | darken ($brand-primary-darker, 15%) |
| $now-sp-nass-toolbar-icons-fullscreen-mode-color--active | Left-panel tool bar icons in full-screen mode for active state. | $brand-primary-darker |
| $now-sp-nass-window-control-icons-color | Window controls icons. | $text-muted |
| $now-sp-nass-window-control-icons-color--hover | Window controls icons in hover state. | $text-color |
| $now-sp-nass-window-control-icons-color--active | Window controls icons in active state. | $text-color |
| $now-sp-nass-feedback-and-search-result-panel-color | Feedback panel and search result icon. | $text-muted |
| $now-sp-nass-feedback-and-search-result-panel-selected-color | Selected icon in feedback panel. | $text-muted |
| $now-sp-nass-action-and-kb-citation-color | Action and Knowledge Base link color | $link-color |
| $now-sp-nass-color-primary-0 | Primary-0 for pills/primary buttons. | $brand-primary-lightest |
| $now-sp-nass-color-primary-2 | Primary-2 for pills/primary buttons in active state. | $brand-primary-darker |
| $now-sp-nass-button-primary-bg-color | Submit button in choice picker control. | $btn-primary-bg |
| $now-sp-nass-button-primary-bg-active-color | Button primary active background color. | $btn-primary-bg |
| $now-sp-nass-button-selection-text-color | Now Design System secondary-1 color | $brand-primary |
| $now-sp-nass-tooltip-bg-color | Tooltip background color for input field icons. | $tooltip-bg |
| $now-sp-nass-tooltip-text-color | Tooltip text color for input field icons. | $tooltip-color |
| $now-sp-nass-alert-critical-color | Unread indicator color. | $brand-danger |
| $now-sp-nass-input-field-icon-color | Icon and attachment icon in the input field | $text-muted |
| $now-sp-nass-color-alert-moderate-3 | Animated loading icon color. | #4345a6 |
| $now-sp-nass-body-bg | Body primary background color. | #ffffff |
| $now-sp-nass-base-highlight-color | Background-color of matched text when searching emojis. | lighten ($warning, 35%) |
| $now-sp-nass-color-primary-3 | Bare buttons color in active state. | darken ($brand-primary-darker, 15%) |
| $now-sp-nass-color-background-primary | Content background color. | #ffffff |
| $now-sp-nass-header-panel-bg-color | Header panel background color. | #ffffff |
| $now-sp-nass-button-bg-action-color | Image picker select button background color. | $brand-primary |
| $now-sp-nass-primary-button-action-text-color | Image picker select button color. | $sp-btn-text-color |
| $now-sp-nass-base-separator-color | Separator. | $border-tertiary |
| $now-sp-nass-chat-agent-message-bubble-bg-color | Agent message bubble background color. | $gray-light |
| $now-sp-nass-citation-badge-color | Citation badge color. | $gray-lighter |
| $now-sp-nass-divider-and-border-tertiary-color | Divider and border color of mid-topic switch in search results. | $border-tertiary |
| $now-sp-nass-highlight-value-tertiary-info-bg-color | Highlighted info value in the mid-topic card. | $state-info-bg |
[Table 1. CSS variables for ServiceNow Otto for Virtual Agent enhanced chat]

{#theming-na-full-page-experience__table_ok3_wwm_bdc}  
{#theming-na-full-page-experience__table_udm_vs5_fkc__entry__3}

| Variable | Description | Default Values |
|-|-|-|
| $now-sp-nass-FAB-icon | Icon imagery that appears on the floating action button. | ai-sparkle-icon |
| $now-sp-nass-FAB-gradient-color-1 | First color of background gradient for chat floating action button icon. | $now-actionable--primary-ai--background-color-gradient--start which is RGB (134, 246, 115) |
| $now-sp-nass-FAB-gradient-color-2 | Second color of background gradient for chat floating action button icon. | $now-actionable--primary-ai--background-color-gradient--end which is RGB (113, 213, 254) |
| $now-sp-nass-FAB-hover-bg-color | Solid background color for chat floating action button icon in hover state. | $now-actionable--primary-ai--background-color-gradient--start which is RGB (134, 246, 115) |
| $now-sp-nass-FAB-active-bg-color | Solid background color for chat floating action button icon in active state. | $now-actionable--primary-ai--background-color-active which is RGB (125, 229, 107) |
| $now-sp-nass-FAB-icon-color | Color of icon imagery that appears on the floating action button. | $now-actionable_icon--primary-ai--color which is RGB (0, 79, 101) |
| $now-sp-nass-FAB-focus-ring-color | Focus ring color around the chat floating action button in focus state. | $now-color_focus-ring which is RGB (36, 138, 19) |
| $now-sp-nass-FAB-icon-size-factor | Handles size of Image within the chat icon. | 1 |
[Table 2. CSS variables for ServiceNow Otto for Virtual Agent enhanced and premium chat]

{#theming-na-full-page-experience__table_udm_vs5_fkc}

*[\>]: and then