---
sourceDocument: Interface do usuário da Now Platform Yokohama
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/yokohama/platform-user-interface

 Release :

    - yokohama

ft:locale :

    - pt-BR

ft:publication_title :

    - Interface do usuário da Now Platform Yokohama

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Tema para Pesquisa com IAem Portal de serviços

# Tema para Pesquisa com IAem Portal de serviços {#ariaid-title1}

* Versão de lançamento: Yokohama
* 
* Atualizado 30 de jan. de 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura

Você pode personalizar a aparência do Pesquisa com IAexperiência em Portal de serviçosAtualizando as variáveis CSS relevantes.
As seguintes variáveis CSS controlam a aparência do Pesquisa com IArecursos em Portal de serviços. Para obter mais informações sobre Pesquisa com IArecursos, consulte [Usando a Pesquisa com IA](https://www.servicenow.com/docs/access?context=use-ais&version=yokohama&pubname=yokohama-platform-administration&ft:locale=en-US).

Você pode editar essas variáveis no Variáveis CSS Campo de um registro de Tema \[sp_theme\]. Você também pode configurar essas variáveis com uma inclusão de CSS associada ao tema de um portal. Para obter mais informações, consulte os seguintes tópicos:

* [Crie um tema do portal](https://servicenow-prod.fluidtopics.net/Pj8KrCDbq7P76d4uYSS43A "Se você precisar de mais personalização do que o Editor de identidade visual pode fornecer, você pode criar seu próprio tema personalizado.")
* [Crie uma inclusão de CSS para substituir temas Pesquisa com IAem Portal de serviços](https://servicenow-prod.fluidtopics.net/Y9auJ9qzsxCLmECQSqPtWg "Substituir tema para Pesquisa com IAem Portal de serviçospara estar em conformidade com a identidade visual da sua empresa.")

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

| Variável | Valor padrão | Descrição |
|-|-|-|
| <var class="keyword varname">now-sp-font-family-sans-serif</var> | `"SourceSansPro", Helvetica, Arial, sans-serif` | Família de fontes para todos os textos. |
| <var class="keyword varname">now-sp-color--text-primary</var> | `cinza-escuro` |  Cor das  guias não selecionadas, do texto do botão Resultado Genius, da cor do texto de ocorrência, dos ícones de resultado e do texto e da cor do ícone da lista suspensa da barra de pesquisa. |
| <var class="keyword varname">now-sp-display-type--secondary--color</var> | `cinza-escuro` | A cor do texto do título nos resultados da pesquisa. |
| <var class="keyword varname">now-sp-display-type--terciário--color</var> | `cinza-escuro` | A cor do snippet de texto nos resultados da pesquisa. |
| <var class="keyword varname">now-sp-color--neutro-12</var> | `cinza-escuro` |  Cor do ícone expandida (divisa) das facetas na exibição para celular. |
| <var class="keyword varname">now-sp-global-border-radius</var> | `4px` |  Cantos arredondados dos resultados de pesquisa que afetam o painel de conteúdo e não os cartões de resultados de pesquisa. Esta variável também afeta os resultados Genius, botões nos resultados Genius e realces do plano de fundo do ícone da barra de pesquisa. Esta variável não afeta os aspectos. |
| <var class="keyword varname">now-sp-color--focus-ring</var> | `marca-primária` | Cor de foco das guias. |
| <var class="keyword varname">now-sp-tabs--selected--color</var> | `marca-primária` | Cor do texto da guia selecionada. Não inclui ao passar o mouse. |
| <var class="keyword varname">now-sp-tabs--color--hover</var> | `marca-primária` | Cor do texto de todas as guias quando o mouse é passado. |
| <var class="keyword varname">now-sp-tabs--border-color</var> | `sp-b-border-color` | Cor de sublinhado das guias. |
| <var class="keyword varname">now-sp-tabs--selected--background-color</var> | `marca-primária` | Cor de sublinhado da guia selecionada. |
| <var class="keyword varname">now-sp-heading--title-primary--color</var> | `cinza-escuro` | Rótulo de Filtros de cor. |
| <var class="keyword varname">now-sp-checkbox-label--color</var> | `cinza-escuro` | Cor do item de filtro (rótulo da caixa de seleção). |
| <var class="keyword varname">now-sp-button--primary--bare--color</var> | `link-color` | Limpar tudo e. Limpar cor do link no filtro de facetas. |
| <var class="keyword varname">now-sp-button--primary--bare--color--active</var> | `link-color` | Limpar tudo e. Limpar cor do link no filtro facetas ao clicar. |
| <var class="keyword varname">now-sp-button--primary--bare--color--hover</var> | `link-hover-color` |  Limpar tudo e. Limpar cor do link no filtro facetas ao passar o mouse. |
| <var class="keyword varname">now-sp-pill--selected--background-color</var> | `marca-primária` | Plano de fundo da cápsula de filtro selecionado. |
| <var class="keyword varname">now-sp-pill--selected--border-color</var> | `marca-primária` |  Cor da borda da cápsula de filtro selecionada. |
| <var class="keyword varname">now-sp-button--secondary--background-color</var> | `btn-default-bg` | Fundo do botão Resultado do Genius. |
| <var class="keyword varname">now-sp-button--secondary--color</var> | `btn-default-color` |  Cor do texto do botão Resultado do Genius. |
| <var class="keyword varname">now-sp-button--secondary--border-color</var> | `btn-default-border` | Cor da borda do botão Resultado do Genius. |
| <var class="keyword varname">now-sp-button--secondary--background-color--hover</var> | `btn-default-bg, 10%)` | Cor de fundo do botão Resultado do Genius ao passar o mouse. |
| <var class="keyword varname">now-sp-button--secondary--color--hover</var> | `btn-default-color` |  Cor do texto do botão Resultado do Genius ao passar o mouse. |
| <var class="keyword varname">now-sp-button--secondary--border-color--hover</var> | `btn-default-border, 12%` |  Borda do botão Resultado do Genius ao passar o mouse. |
| <var class="keyword varname">now-sp-button--secondary--background-color--active</var> | `btn-default-bg, 10%)` | Fundo do botão Resultado do Genius ao clicar. |
| <var class="keyword varname">now-sp-button--secondary--color--active</var> | `btn-default-color` | Cor do texto do botão Resultado do Genius ao clicar. |
| <var class="keyword varname">now-sp-button--secondary--border-color--active</var> | `btn-default-border, 12%` | Cor da borda do botão Resultado do Genius ao clicar. |
| <var class="keyword varname">now-sp-highlighted-value--terciário--color</var> | `cinza-escuro` | Cor do texto do marcador do resultado principal do resultado do Genius. |
| <var class="keyword varname">now-sp-button--border-radius</var> | `now-sp-global-border-radius` | Diferencia o raio dos botões de botão e de bastão de pesquisa. |
| <var class="keyword varname">now-sp-container--border-radius</var> | `now-sp-global-border-radius` | Raio da borda para cartões de resultados de pesquisa, cartões de resultados do Genius e contêiner de resultados de pesquisa. Não afeta a borda entre resultados individuais. |
| <var class="keyword varname">now-sp-button--primary-negative--background-color</var> | `btn-primary-bg` |  Cor de fundo do botão Genius no modal de confirmação de ação EVAM. |
| <var class="keyword varname">now-sp-button--primary-negative--border-color</var> | `btn-primary-border` | Cor da borda do botão Genius no modal de confirmação de ação EVAM. |
| <var class="keyword varname">now-sp-button--primary-negative--background-color--hover</var> | `escuro (btn-primário-bg, 10%)` | Cor de fundo do botão Genius ao passar o mouse no modal de confirmação de ação EVAM. |
| <var class="keyword varname">now-sp-button--primary-negative--border-color--hover</var> | `escurecer (btn-primary-border, 12%)` | Cor da borda do botão Genius ao passar o mouse dentro da confirmação. |
| <var class="keyword varname">now-sp-button--primary-negative--background-color--active</var> | `escuro (btn-primário-bg, 10%)` |  Cor de fundo do botão Genius ao clicar dentro do modal de confirmação. |
| <var class="keyword varname">now-sp-button--primary-negative--border-color--active</var> | `escurecer (btn-primary-border, 12%)` | Cor da borda do botão Genius ao clicar dentro do modal de confirmação. |
| <var class="keyword varname">now-sp-button--primary--background-color</var> | `btn-primary-bg` | Cor de fundo do filtro selecionado (cápsula). |
| <var class="keyword varname">now-sp-button--primary--border-color</var> | `btn-primary-border` | Cor da borda do filtro selecionado (cápsula) |
| <var class="keyword varname">now-sp-button--primary--color</var> | `btn-primary-color` | Cor do filtro selecionado (cápsula). |
| <var class="keyword varname">now-sp-button--primary--background-color--hover</var> | `escuro (btn-primário-bg, 10%)` |  Cor de fundo do filtro selecionado (cápsula) ao passar o mouse. |
| <var class="keyword varname">now-sp-button--primary--border-color--hover</var> | `escurecer (btn-primary-border, 12%)` | Cor da borda do filtro selecionado (cápsula) ao passar o mouse. |
| <var class="keyword varname">now-sp-button--primary--background-color--active</var> | `escuro (btn-primário-bg, 10%)` | Cor de fundo do filtro selecionado (cápsula) ao clicar. |
| <var class="keyword varname">now-sp-button--primary--border-color--active</var> | `escurecer (btn-primary-border, 12%)` | Cor da borda do filtro selecionado (cápsula) ao clicar. |
| <var class="keyword varname">now-sp-rem-fator</var> | `5` | A mesma variável que <var class="keyword varname">--classicsponlydonotuse--rem-multipy </var>. Nota: Não é sugerido usar esta variável. |
[ ]

{#ais-sp-css-vars__table_wcz_tww_knb}