---
sourceDocument: Gestion des services IT Australie
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/it-service-management

 Release :

    - australia

ft:locale :

    - fr-FR

ft:publication_title :

    - Gestion des services IT Australie

ft:clusterId :

    - itsm

bundleId :

    - itsm

workflow :

    - Technology


---

# Variables de thème

# Variables pour personnaliser un thème pour Desktop Assistant {#ariaid-title1}

* Rversion finale: Australia
* 
* Mis à jour 12 mars 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 5 minutes de lecture

Vous pouvez modifier des variables CSS spécifiques pour personnaliser les thèmes de Desktop Assistant.
{#da-theme-variables__table_irj_z4y_ygc__entry__3}

| Variable | Description | Ordre |
|-|-|-|
| marque-primaire-foncée | La nuance la plus foncée de la couleur primaire de la marque. | 1 |
| marque-primaire-foncé | Teinte légèrement plus claire que la teinte la plus foncée de la couleur primaire de la marque. | 2 |
| Marque primaire | Couleur de marque principale utilisée dans l'interface utilisateur. | 3 |
| marque-primaire-briquet | Teinte plus claire que la couleur principale de la marque. | 4 |
[Tableau 1. Couleur de la bannière]

{#da-theme-variables__table_irj_z4y_ygc}Vous pouvez appliquer un dégradé à la bannière en utilisant les couleurs spécifiées dans l'ordre spécifié.  
{#da-theme-variables__table_fxn_cty_ygc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| arrière-plan secondaire | Couleur d'arrière-plan secondaire utilisée pour les éléments d'interface utilisateur qui ne sont pas au centre de l'attention principale. | `#ffffff` |
| arrière-plan primaire | Couleur d'arrière-plan primaire utilisée pour les domaines d'intérêt principaux de l'interface utilisateur. | `#f6f6f8` |
| font-size-base | Taille de police de base utilisée pour le texte de l'interface utilisateur. | `16px` |
| font-poids-base | font-weight de base utilisée pour le texte du corps de l'interface utilisateur. | `400` |
| font-family-sans-serif | Famille de polices sans empattement par défaut utilisée pour le texte de l'interface utilisateur. | `Lato` |
| ligne-hauteur-base | Hauteur de ligne de texte par défaut pour l'espacement et la lisibilité. | `1.4` |
| taille-police-h5 | Taille de police pour le niveau d'en-tête 5. | `16px` ou valeur de la variable <var class="keyword varname">$font-size-base</var> . |
| taille-police-h4 | Taille de police pour le niveau d'en-tête 4. | `18px` Cette valeur est calculée à l'aide de la fonction ceil () : `ceil(($font-size-base * 1.125))`. Par exemple, si la valeur <var class="keyword varname">font-size-base</var> est de 16 px, la valeur <var class="keyword varname">font-size-h4</var> est de 18 px : `ceil((16px * 1.125))//18px`. |
| font-size-h3 | Taille de police pour l'en-tête de niveau 3. | `20px` Cette valeur est calculée à l'aide de la fonction ceil () : `ceil(($font-size-base * 1.25)).` |
| taille-police xl | Taille de police extra large généralement utilisée pour les titres ou les grandes étiquettes. | `24px` Cette valeur est calculée à l'aide de la fonction ceil () : `ceil(($font-size-base * 1.5)).` |
| font-size-xs | Taille de police extra petite généralement utilisée pour les étiquettes ou légendes mineures. | `12px` Cette valeur est calculée à l'aide de la fonction ceil () : `ceil(($font-size-base * 0.75))`. |
| font-size-small | Police plus petite que la police de base, utilisée pour le texte secondaire. | `14px` Cette valeur est calculée à l'aide de la fonction ceil () : `ceil(($font-size-base * 0.875))`. |
| en-têtes : famille de police | Famille de polices utilisée pour les en-têtes. | `Lato` |
| headings-font-weight | Valeur font-weight utilisée pour les en-têtes. | `600` |
[Tableau 2. Variables de mise en page et de typographie]

{#da-theme-variables__table_fxn_cty_ygc}  
{#da-theme-variables__table_ic1_dsd_zgc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| texte primaire | Couleur principale utilisée pour le corps de texte. | `#181A1F` |
| couleur de texte | Couleur de texte générale pour l'interface utilisateur, qui est identique à <var class="keyword varname">text-primary</var>. Définissez une valeur pour cette variable uniquement si vous n'avez pas déjà défini la valeur de <var class="keyword varname">text-primary</var>. | `$text-primary !default` Par exemple, `$text-primary : #000000 !default ;` |
| texte secondaire | Couleur utilisée pour le texte de l'interface utilisateur moins visible. | `#474D5A` |
| texte tertiaire | Couleur du texte tertiaire tel que le texte d'aide et les annotations. | `#656E81` |
| texte désactivé | Couleur de texte atténuée qui est généralement la même que celle du <var class="keyword varname">texte tertiaire</var>. Définissez une valeur pour cette variable uniquement si vous n'avez pas déjà défini la valeur pour <var class="keyword varname">texte-tertiaire</var>. | `$text-tertiaire !par défaut` Par exemple, `$text-tertiaire : #999999 !default ;` |
| couleur-gris | Couleur gris neutre utilisée pour des éléments tels que les bordures et les arrière-plans. | `#C6CBCB` |
| couleur de lien | Couleur des liens hypertexte. | `#3c59e7` |
[Tableau 3. Variables de couleurs]

{#da-theme-variables__table_ic1_dsd_zgc}  
{#da-theme-variables__table_btw_rf2_zgc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| btn-default-color | Couleur par défaut du texte du bouton. | `$brand-primaire` |
| btn-primaire-couleur | Couleur du texte des boutons primaires. | `$text-blanc` |
| btn-primary-bg | Couleur d'arrière-plan pour les boutons primaires. | `$brand-primaire` |
| Marque primaire | Couleur de marque primaire utilisée dans l'interface utilisateur. | `#4f52bd !par défaut ;` |
| marque-primaire-foncé | Teinte plus foncée de la couleur principale de la marque. | `#333579` |
| marque-primaire-foncée | Teinte la plus foncée de la couleur principale de la marque. | `#1D1E46` |
| marque-primaire-briquet | Une teinte plus claire de la couleur principale de la marque. | `#8789D2` |
| marque-primaire-leplus léger | Teinte la plus claire de la couleur principale de la marque. | `#D1D2EE` |
[Tableau 4. Variables de bouton et d'éléments interactifs]

{#da-theme-variables__table_btw_rf2_zgc}  
{#da-theme-variables__table_rdk_yf2_zgc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| marque-avertissement-plus foncé | Teinte plus foncée de la couleur de l'état d'avertissement de l'interface utilisateur. | `#AFA400` |
| marque-succès-plus foncé | Nuance de couleur plus foncée utilisée pour les états de réussite sur l'interface utilisateur. | `#3B7F00` |
| marque-danger-plus foncé | Nuance de couleur plus foncée utilisée pour les états de danger sur l'interface utilisateur. | `#CC293C` |
| alerte-avertissement-bg | Couleur d'arrière-plan utilisée pour les alertes et les avertissements. | `$state-avertissement-bg` |
| couleur de badge | Couleur du texte des badges sur l'interface utilisateur. | `$text-blanc` |
[Tableau 5. Couleurs d'état et d'alerte]

{#da-theme-variables__table_rdk_yf2_zgc}  
{#da-theme-variables__table_b1n_cg2_zgc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| bordure primaire | Couleur de bordure primaire utilisée pour les éléments principaux de l'interface utilisateur. | `#8790A1` |
| bordure secondaire | Couleur de bordure secondaire utilisée pour les éléments d'interface utilisateur moins visibles. | `#ACB2BE` |
| bordure-tertiaire | Couleur de bordure tertiaire utilisée pour les bordures d'arrière-plan. | `#DADDE2` |
| largeur-bordure x | Largeur de bordure extra-petite utilisée pour les éléments d'interface utilisateur tels que les lignes fines ou les séparateurs légers. | `1px` |
| bordure-style-solide | Définit le style de bordure sur solide. | `solide` |
| border-radius-base | Rayon de la bordure de base pour arrondir les angles des éléments d'interface utilisateur. | `4px` |
| bordure d'entrée | Style de bordure pour les champs d'entrée. | `$border-primaire` |
[Tableau 6. Variables de bordure et de mise en page]

{#da-theme-variables__table_b1n_cg2_zgc}  
{#da-theme-variables__table_o2q_hg2_zgc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| espace-sp--XXL | Espacement extra-extra-large pour de grands espaces ou des mises en page plus grandes. | `32px` |
| espace-sp--xl | Espacement extra-large pour les sections principales. | `24px` |
| espace-sp--lg | Grand espacement pour le remplissage ou les marges. | `16px` |
| espace-sp--md | Espacement moyen ou standard pour la plupart des éléments d'interface utilisateur. | `12px` |
| espace-sp--sm | Petit espacement pour des mises en page compactes. | `8px` |
| espace-sp--xs | Espacement extra-petit pour un minimum d'espaces. | `4px` |
| espace-sp--xxs | Espacement extra-très petit pour des écarts d'interface utilisateur minimes. | `2px` |
| remplissage de l'en-tête du panneau | Remplissage appliqué à la section d'en-tête d'un panneau ou d'une carte. | `$sp-espace--xl` |
[Tableau 7. Variables d'espacement]

{#da-theme-variables__table_o2q_hg2_zgc}  
{#da-theme-variables__table_npr_kg2_zgc__entry__3}

| Variable | Description | Valeur par défaut |
|-|-|-|
| Variable de poids de police |||
| font-weight-lg | Valeur font-weight utilisée pour le texte en gros ou en gras. | `600` Cette valeur est calculée à l'aide de la fonction ceil () : `ceil(($font-weight-base * 1,5)).` |
| Variables d'ombre et d'effets |||
| sp-panneau-boîte-shadow | Style shadow pour les composants de panneau. | `0 4px 8px 0 rgba(23, 40, 52, 0.08)` |
| sp-box-shadow--md | Effets d'ombre de zone moyens pour les composants d'interface utilisateur. |   |
[Tableau 8. Variables de fontweight, d'ombre et d'effets]

{#da-theme-variables__table_npr_kg2_zgc}