---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Thème pour Recherche IA dans Portail de services

# Thème pour Recherche IA dans Portail de services {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 minutes de lecture

Vous pouvez personnaliser l'apparence de l'expérience Recherche IA en Portail de services mettant à jour les variables CSS pertinentes.
Les variables CSS suivantes contrôlent l'apparence des fonctionnalités dans Portail de services.Recherche IA Pour plus d'informations sur Recherche IA les fonctionnalités, consultez [Utilisation de Recherche IA](https://www.servicenow.com/docs/access?context=use-ais&version=xanadu&pubname=xanadu-platform-administration&ft:locale=en-US).

Vous pouvez modifier ces variables dans le champ des variables CSS d'un enregistrement de thème \[sp_theme\]. Vous pouvez également configurer ces variables à l'aide d'un include CSS associé au thème d'un portail. Pour en savoir plus, consultez les rubriques suivantes :

* [Créer un thème de portail](https://servicenow-prod.fluidtopics.net/wQuvAUvQSX88jQdzR2PsiA "Si vous avez besoin de plus de personnalisation que ce que l’éditeur de marque peut fournir, vous pouvez créer votre propre thème personnalisé.")
* [Créer un include CSS pour remplacer le thème dans Recherche IAPortail de services](https://servicenow-prod.fluidtopics.net/d2QzRePj~VLKMoFTYu_RdA "Remplacez la thématisation pour Recherche IA être Portail de services conforme à l’image de marque de votre entreprise.")

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

| Variable | Valeur par défaut | Description |
|-|-|-|
| <var class="keyword varname">$now-sp-font-family-sans-serif</var> | `<< SourceSansPro >>, Helvetica, Arial, sans-serif` | Famille de polices pour tous les textes. |
| <var class="keyword varname">$now-sp-color--text-primary</var> | `$gray foncé` | Couleur des onglets non sélectionnés, texte du bouton de résultat Genius, couleur du texte d'accès, icônes de résultats et texte de l'élément de liste déroulante de la barre de recherche et couleur de l'icône. |
| <var class="keyword varname">$now-sp-display-type--secondary--color</var> | `$gray foncé` | La couleur du texte du titre dans les résultats de recherche. |
| <var class="keyword varname">$now-sp-display-type--tertiaire--couleur</var> | `$gray foncé` | La couleur de l'extrait de texte dans les résultats de recherche. |
| <var class="keyword varname">$now-sp-couleur--neutre-12</var> | `$gray foncé` | Couleur d'icône développée (chevron) des facettes dans la vue mobile. |
| <var class="keyword varname">$now-sp-global-border-radius</var> | `4px` | Angles arrondis des résultats de recherche affectant le volet de contenu et non les cartes de résultats de recherche. Cette variable affecte également les résultats Genius, les boutons des résultats Genius et les surbrillances de l'arrière-plan du survol de l'icône de la barre de recherche. Cette variable n'affecte pas les facettes. |
| <var class="keyword varname">$now-sp-color--anneau de mise au point</var> | `$brand primaire` | Couleur de focus des onglets. |
| <var class="keyword varname">$now-sp-tabs--selected--color</var> | `$brand primaire` | Couleur du texte de l'onglet sélectionné. N'inclut pas lors du survol. |
| <var class="keyword varname">$now-sp-tabs--color--hover</var> | `$brand primaire` | Couleur du texte de tous les onglets lorsqu'ils sont survolés. |
| <var class="keyword varname">$now-sp-tabs--border-color</var> | `$sp-b-couleur-bordure-` | Les onglets soulignent la couleur. |
| <var class="keyword varname">$now-sp-tabs--selected--background-color</var> | `$brand primaire` | Couleur de soulignement de l'onglet sélectionné. |
| <var class="keyword varname">$now-sp-heading--title-primary--color</var> | `$gray foncé` | Étiquette des filtres de couleur. |
| <var class="keyword varname">$now-sp-checkbox-label--color</var> | `$gray foncé` | Filtrez la couleur de l'élément (étiquette de la case à cocher). |
| <var class="keyword varname">$now-sp-button--primary--bare--color</var> | `$link couleur` | Effacer tout et Effacer la couleur du lien dans le filtre de facettes. |
| <var class="keyword varname">$now-sp-button--primary--bare--color--active</var> | `$link couleur` | Tout effacer et Effacer la couleur du lien dans le filtre de facettes au clic. |
| <var class="keyword varname">$now-sp-button--primary--bare--color--hover</var> | `$link survol couleur` |   Tout effacer et Effacer la couleur du lien dans le filtre de facettes lors du survol. |
| <var class="keyword varname">$now-sp-pill--selected--background-color</var> | `$brand primaire` | Arrière-plan de pilule de filtre sélectionné. |
| <var class="keyword varname">$now-sp-pill--selected--border-color</var> | `$brand primaire` | Couleur de bordure de pilule de filtre sélectionnée. |
| <var class="keyword varname">$now-sp-button--secondary--background-color</var> | `$btn-default-bg` | Arrière-plan du bouton de résultat Genius. |
| <var class="keyword varname">$now-sp-button--secondary--color</var> | `$btn couleur par défaut` | Couleur du texte du bouton de résultat Genius. |
| <var class="keyword varname">$now-sp-button--secondary--border-color</var> | `$btn-default-border` | Couleur de la bordure du bouton de résultat Genius. |
| <var class="keyword varname">$now-sp-button--secondary--background-color--hover</var> | `assombrir ($btn-default-bg, 10 %)` | Couleur d'arrière-plan du bouton de résultat Genius lors du survol. |
| <var class="keyword varname">$now-sp-button--secondary--color--hover</var> | `$btn couleur par défaut` | Couleur du texte du bouton de résultat Genius lors du survol. |
| <var class="keyword varname">$now-sp-button--secondary--border-color--hover</var> | `assombrir ($btn-default-border, 12 %)` | Bordure du bouton de résultat Genius lors du survol. |
| <var class="keyword varname">$now-sp-button--secondary--background-color--active</var> | `assombrir ($btn-default-bg, 10 %)` | Arrière-plan du bouton de résultat Genius au clic. |
| <var class="keyword varname">$now-sp-button--secondary--color--active</var> | `$btn couleur par défaut` | Couleur du texte du bouton de résultat Genius au clic. |
| <var class="keyword varname">$now-sp-button--secondary--border-color--active</var> | `assombrir ($btn-default-border, 12 %)` | Couleur de la bordure du bouton de résultat Genius au clic. |
| <var class="keyword varname">$now-sp-highlighted-value--tertiary--color</var> | `$gray foncé` | Couleur du texte de la balise du résultat Genius Top Result. |
| <var class="keyword varname">$now-sp-button--border-radius</var> | `$now-sp-global-border-radius` | Différencie le rayon des boutons bouton et des boutons chauve-souris de recherche. |
| <var class="keyword varname">$now-sp-container--border-radius</var> | `$now-sp-global-border-radius` | Rayon de bordure pour les cartes de résultats de recherche, les cartes de résultats Genius et le conteneur de résultats de recherche. N'affecte pas la frontière entre les résultats individuels. |
| <var class="keyword varname">$now-bouton-sp-primaire-négatif--couleur d’arrière-plan</var> | `$btn-primary-bg` | Couleur d'arrière-plan du bouton Genius dans le modal de confirmation de l'action EVAM. |
| <var class="keyword varname">$now-bouton-sp-primaire-négatif--couleur-bordure</var> | `$btn bordure primaire` | Couleur de la bordure du bouton Genius dans le modal de confirmation de l'action EVAM. |
| <var class="keyword varname">$now-bouton-sp-primaire--couleur-arrière-plan--survol</var> | `assombrir ($btn-primary-bg, 10 %)` | Couleur d'arrière-plan du bouton Genius lors du survol dans le modal de confirmation de l'action EVAM. |
| <var class="keyword varname">$now-bouton-sp-primaire--couleur-bordure--survol</var> | `assombrir ($btn bordure primaire, 12 %)` | Couleur de la bordure du bouton Genius lors du survol à l'intérieur de la confirmation. |
| <var class="keyword varname">$now-sp-button-primary-negative--background-color--active</var> | `assombrir ($btn-primary-bg, 10 %)` | Couleur d'arrière-plan du bouton Genius lors d'un clic à l'intérieur du modal de confirmation. |
| <var class="keyword varname">$now-bouton-sp-primaire--couleur--bordure --actif</var> | `assombrir ($btn bordure primaire, 12 %)` | Couleur de la bordure du bouton Genius lors d'un clic à l'intérieur du modal de confirmation. |
| <var class="keyword varname">$now-sp-button--primary--background-color</var> | `$btn-primary-bg` | Couleur d'arrière-plan du filtre (pastille) sélectionné. |
| <var class="keyword varname">$now-sp-button--primary--border-color</var> | `$btn bordure primaire` | Couleur de la bordure du filtre (pastille) sélectionné |
| <var class="keyword varname">$now-sp-button--primary--color</var> | `$btn couleur primaire` | Couleur de filtre (pilule) sélectionnée. |
| <var class="keyword varname">$now-sp-button--primary--background-color--hover</var> | `assombrir ($btn-primary-bg, 10 %)` | Couleur d'arrière-plan du filtre (pastille) sélectionnée lors du survol. |
| <var class="keyword varname">$now-sp-button--primary--border-color--hover</var> | `assombrir ($btn bordure primaire, 12 %)` | Couleur de bordure du filtre (pastille) sélectionnée lors du survol. |
| <var class="keyword varname">$now-sp-button--primary--background-color--active</var> | `assombrir ($btn-primary-bg, 10 %)` | Couleur d'arrière-plan du filtre (pastille) sélectionné au clic. |
| <var class="keyword varname">$now-sp-button--primary--border-color--active</var> | `assombrir ($btn bordure primaire, 12 %)` | Couleur de la bordure du filtre (pilule) sélectionné au clic. |
| <var class="keyword varname">Facteur $now-sp-rem</var> | `5` | Même variable que <var class="keyword varname">--classicsponlydonotuse--rem-multipy</var>. Remarque : L'utilisation de cette variable n'est pas recommandée. |
[ ]

{#ais-sp-css-vars__table_wcz_tww_knb}