Theming for AI Search in Service Portal

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 11분

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

    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:

    Variable Default value Description
    $now-sp-font-family-sans-serif "SourceSansPro", Helvetica, Arial, sans-serif Font family for all texts.
    $now-sp-color--text-primary $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.
    $now-sp-text-link--primary--color $gray-dark The color of the title text in search results.
    $now-sp-display-type--tertiary--color $gray-dark The color of the text snippet in search results.
    $now-sp-color--neutral-12 $gray-dark  Expanded icon color (chevron) of the facets in mobile view.
    $now-sp-global-border-radius 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.
    $now-sp-color--focus-ring $brand-primary Tabs focus color.
    $now-sp-tabs--selected--color $brand-primary Text color of selected tab. Doesn't include on hover.
    $now-sp-tabs--color--hover $brand-primary Text color of all tabs when hovered.
    $now-sp-tabs--border-color $sp-b-border-color Tabs underline color.
    $now-sp-tabs--selected--background-color $brand-primary Selected tab underline color.
    $now-sp-heading--title-primary--color $gray-dark Color Filters label.
    $now-sp-checkbox-label--color $gray-dark Filter item (checkbox label) color.
    $now-sp-button--primary--bare--color $link-color Clear All and Clear link color in facets filter.
    $now-sp-button--primary--bare--color--active $link-color Clear All and Clear link color in facets filter on click.
    $now-sp-button--primary--bare--color--hover $link-hover-color  Clear All and Clear link color in facets filter on hover.
    $now-sp-pill--selected--background-color $brand-primary Selected filter pill background.
    $now-sp-pill--selected--border-color $brand-primary  Selected filter pill border color.
    $now-sp-button--secondary--background-color $btn-default-bg Genius result button background.
    $now-sp-button--secondary--color $btn-default-color  Genius result button text color.
    $now-sp-button--secondary--border-color $btn-default-border Genius result button border color.
    $now-sp-button--secondary--background-color--hover darken($btn-default-bg, 10%) Genius result button background color on hover.
    $now-sp-button--secondary--color--hover $btn-default-color  Genius result button text color on hover.
    $now-sp-button--secondary--border-color--hover darken($btn-default-border, 12%)  Genius result button border on hover.
    $now-sp-button--secondary--background-color--active darken($btn-default-bg, 10%) Genius result button background on click.
    $now-sp-button--secondary--color--active $btn-default-color Genius result button text color on click.
    $now-sp-button--secondary--border-color--active darken($btn-default-border, 12%) Genius result button border color on click.
    $now-sp-highlighted-value--tertiary--color $gray-dark Genius result Top Result tag text color.
    $now-sp-button--border-radius $now-sp-global-border-radius Differentiates the radius for button and search bar buttons.
    $now-sp-container--border-radius $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.
    $now-sp-button--primary-negative--background-color $btn-primary-bg  Genius button background color in the EVAM action confirmation modal.
    $now-sp-button--primary-negative--border-color $btn-primary-border Genius button border color in the EVAM action confirmation modal.
    $now-sp-button--primary-negative--background-color--hover darken($btn-primary-bg, 10%) Genius button background color on hover in the EVAM action confirmation modal.
    $now-sp-button--primary-negative--border-color--hover darken($btn-primary-border, 12%) Genius button border color on hover inside the confirmation.
    $now-sp-button--primary-negative--background-color--active darken($btn-primary-bg, 10%)  Genius button background color on click inside the confirmation modal.
    $now-sp-button--primary-negative--border-color--active darken($btn-primary-border, 12%) Genius button border color on click inside the confirmation modal.
    $now-sp-button--primary--background-color $btn-primary-bg Selected filter (pill) background color.
    $now-sp-button--primary--border-color $btn-primary-border Selected filter (pill) border color
    $now-sp-button--primary--color $btn-primary-color Selected filter (pill) color.
    $now-sp-button--primary--background-color--hover darken($btn-primary-bg, 10%)  Selected filter (pill) background color on hover.
    $now-sp-button--primary--border-color--hover darken($btn-primary-border, 12%) Selected filter (pill) border color on hover.
    $now-sp-button--primary--background-color--active darken($btn-primary-bg, 10%) Selected filter (pill) background color on click.
    $now-sp-button--primary--border-color--active darken($btn-primary-border, 12%) Selected filter (pill) border color on click.
    $now-sp-rem-factor 5 The same variable as --classicsponlydonotuse--rem-multipy.
    주:
    It's not suggested to use this variable.
    $sp-search-result-title-highlight--background-color None Text background color for title highlights in search results.
    주:
    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.