> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.fr/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Héritage des paramètres de marque

> Découvrez comment utiliser les paramètres de marque, tels que les logos et les couleurs de marque, dans un thème ou dans des fichiers HubL/HTML et CSS. 

Grâce aux [paramètres de marque](https://knowledge.hubspot.com/settings/customize-branding-for-your-hubspot-content#customize-your-company-logo-and-colors), les utilisateurs peuvent configurer les couleurs, les logos et les favicons de l'entreprise à utiliser dans les contenus HubSpot. Cela vous permet d'accéder à ces paramètres de marque avec des jetons dans le fichier `fields.json` d'un thème et dans les fichiers HTML/HubL et CSS. Vous pouvez également accéder aux couleurs de la marque dans le fichier `fields.json` d'un module.

Après avoir ajouté ces jetons dans un fichier `fields.json`, les créateurs de contenu peuvent modifier leurs valeurs dans l'éditeur de paramètres de thème. Lorsque vous ajoutez ces jetons dans un HTML, un HubL ou un CSS, les valeurs seront fortement codées et ne pourront pas être modifiées dans l'éditeur de page par les créateurs de contenu.

Découvrez ci-dessous les variables de configuration de marque disponibles ainsi que des exemples de mise en œuvre.

## Variables des paramètres de marque

La liste suivante est une liste des options accessibles depuis la zone des paramètres de la marque, dans la valeur de l'objet `property_value_paths` ou dans les fichiers HTML/HubL et CSS.

### Couleurs

Les couleurs de la marque sont accessibles à la fois dans le [fichier fields.json](#fields-json-color) d'un thème ou d'un module et dans les fichiers HTML/HubL et CSS à l'aide des jetons HubL suivants :

* **Principal :**

  * `{{brand_settings.primaryColor}}`
  * `{{brand_settings.colors[0]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-primary.png" alt="brand-colors-primary" />
</Frame>

* **Secondaire :** `{{brand_settings.secondaryColor}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-secondary.png" alt="brand-colors-secondary" />
</Frame>

* **Couleurs du thème :**

  * `{{brand_settings.accentColor1}}`
  * `{{brand_settings.accentColor2}}`
  * `{{brand_settings.accentColor3}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-accent.png" alt="brand-colors-accent" />
</Frame>

* **Couleurs supplémentaires :**

  * `{{brand_settings.colors[1]}}`
  * `{{brand_settings.colors[2]}}`
  * `{{brand_settings.colors[3]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-additional.png" alt="brand-colors-additional" />
</Frame>

Pour accéder directement au code hexadécimal d'une couleur, incluez un filtre `hex` dans le jeton. Par exemple : `{{brand_settings.primaryColor.hex}}`

Pour inclure les couleurs des paramètres de marque dans le fichier `fields.json` d'un thème ou d'un module, utilisez le format suivant :

```json theme={null}
//Example of using the primary color in within a theme's
// field.json file
{
  "name": "branding_color",
  "label": "branding_color",
  "type": "color",
  "default": {
    "color": "#26ff55",
    "opacity": 60
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "brand_settings.primaryColor"
    }
  }
}
```

<Warning>
  Il se peut que les comptes n'aient pas de couleurs supplémentaires configurées dans leurs paramètres de marque. Si votre code fait référence à une couleur héritée qui n'existe pas dans les paramètres de marque, la logique de repli suivante est utilisée :

  * `secondaryColor` revient à la première couleur supplémentaire (`colors[1]`).
  * `accentColor1` revient à la deuxième couleur supplémentaire (`colors[2]`).
  * `accentColor2` revient à la troisième couleur supplémentaire (`colors[3]`).
  * `accentColor3` revient à la quatrième couleur supplémentaire (`colors[4]`).
  * Les couleurs supplémentaires (par exemple : `colors[3]`) reviendront à la valeur `default`. S'il n'y a pas de jeu de couleur de propriété par défaut, `primaryColor` sera utilisé.
</Warning>

### Logos

Les logos de marques sont accessibles dans le fichier `fields.json` d'un module et dans les fichiers HTML/HubL et CSS.

Vous pouvez utiliser les jetons suivants pour accéder au logo principal défini dans les paramètres de la marque :

* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-logo0.png" alt="brand-settings-logo0" />
</Frame>

Tous les logos supplémentaires sont accessibles en utilisant `{{brand_settings.logos[1-19]}}`.

En outre, vous pouvez accéder aux attributs de logo suivants :

* **URL du logo :** `{{brand_settings.primaryLogo.link}}`
* **Texte alternatif du logo :** `{{brand_settings.primaryLogo.alt}}`
* **Hauteur du logo :** `{{brand_settings.primaryLogo.height}}`
* **Largeur du logo :** `{{brand_settings.primaryLogo.width}}`
* **Lien vers l'image du logo :** `{{brand_settings.primaryLogo.src}}`

### Favicons

Les favicons de marques ne sont accessibles que dans les fichiers HTML/HubL et CSS.

Vous pouvez utiliser les jetons suivants pour accéder au logo principal défini dans les paramètres de la marque :

* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-favicon0.png" alt="brand-settings-favicon0" />
</Frame>

Tous les favicons supplémentaires sont accessibles en utilisant `{{brand_settings.favicons[1-19]}}`.

Vous pouvez accéder directement à l'URL du logo en incluant un filtre `src`. Par exemple : `{{brand_settings.primaryFavicon.src}}`.