---
title: "Styles réutilisables"
description: "Enregistrez les paramètres de texte et de couleur sous forme de styles réutilisables, appliquez-les à n'importe quel élément et mettez à jour tous les éléments qui les utilisent en une seule fois."
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skills: `npx adapty skills install --yes`

Créez un style pour enregistrer des paramètres de texte ou un remplissage (comme une couleur, un dégradé ou une image de fond), et réutilisez-le sur des éléments dans plusieurs écrans. Lorsque vous modifiez un style, la modification s'applique à tous les éléments et écrans qui l'utilisent.

Chaque flow possède son propre ensemble de styles.

Ouvrez le panneau **Styles** Styles pour créer, parcourir et modifier les styles de votre flow :

- **Styles de texte** : Paramètres typographiques (police, graisse, taille).
- **Styles de couleur** : Remplissages tels que les couleurs, les dégradés et les images. Un même style de couleur peut inclure des versions distinctes pour le mode clair et le mode sombre.

## Styles de texte \{#text-styles\}

:::link
Article principal : [Contenu textuel](onboarding-text)
:::

Les styles de texte regroupent un ensemble de paramètres typographiques : famille de polices, graisse, taille, interligne et espacement des lettres. Chaque template de flow inclut des préréglages par défaut, et vous pouvez créer des styles personnalisés.

Pour créer un style de texte :

1. Ouvrez le panneau **Styles** Styles.
2. Dans l'en-tête du panneau, cliquez sur Create style **Create style**.
3. Définissez **Type** sur **Text**, entrez un nom et configurez les paramètres typographiques.
4. Cliquez sur **Create**.

Pour enregistrer les paramètres typographiques actuels d'un élément texte en tant que nouveau style de texte, cliquez sur Create text style à côté des onglets du sélecteur de police. L'élément utilise alors le nouveau style.

Pour appliquer un style de texte, sélectionnez un élément texte et choisissez le style dans le menu déroulant des polices de la section **Typography**.

Pour modifier un style de texte, cliquez sur son entrée dans le panneau **Styles**, modifiez ses paramètres, puis cliquez sur **Save**.

## Styles de couleurs \{#color-styles\}

Un style de couleur est un [remplissage](builder-styling#fill) enregistré : une couleur, un dégradé, une image, une vidéo, ou une combinaison de ces éléments. Si vous utilisez un [thème sombre](#dark-mode), il peut avoir des versions spécifiques à chaque thème. Le chiffre affiché dans l'entrée du style indique le nombre d'éléments et d'écrans qui l'utilisent.

### Créer un style de couleur \{#create-a-color-style\}

Pour créer un style de couleur :

1. Ouvrez le panneau **Styles** Styles.
2. Dans l'en-tête du panneau, cliquez sur Create style **Create style**.
3. Définissez **Type** sur **Color** et saisissez un nom.
4. Configurez le style. Vous pouvez modifier la couleur ou le [type de remplissage](#edit-a-color-style) de son calque, et ajouter [d'autres calques](#multi-layer-styles) par-dessus.
5. Cliquez sur **Save**.

Pour transformer la valeur actuelle d'un calque de remplissage ou d'une couleur en style, cliquez sur son swatch, puis sur l'icône Create color style à côté des onglets **Custom** et **Styles**, et cliquez sur **Save**. Le calque de remplissage ou la couleur utilise désormais ce style.

### Modifier un style de couleur \{#edit-a-color-style\}

Pour modifier un style de couleur :

1. Ouvrez le panneau **Styles** Styles.
2. Sélectionnez l'onglet **Colors**.
3. Cliquez sur une entrée de style.
4. Chaque version peut contenir plusieurs [calques](#multi-layer-styles). Cliquez sur l'échantillon pour définir le calque selon son type de remplissage :
    - [Couleur unie](#solid-colors)
    - [Dégradé](#gradients)
    - [Image ou vidéo](#images-and-videos)

#### Couleurs unies \{#solid-colors\}

1. Définissez la couleur : saisissez une valeur hexadécimale ou cliquez sur l'aperçu pour en choisir une.
2. Réglez l'opacité avec le curseur.
3. Cliquez sur **Save**.

#### Dégradés \{#gradients\}

1. Sélectionnez le type de remplissage Gradient **Gradient**.
2. Définissez les points d'arrêt, leurs couleurs et la **Direction**.
3. Cliquez sur **Save**.

:::tip
Pour rendre les éléments de texte placés au-dessus d'une image de fond plus lisibles, [assombrissez le bord de l'image](paywall-head-picture#tint-a-background) derrière eux. Ajoutez un [calque](#multi-layer-styles) dégradé par-dessus l'image. Faites partir le dégradé d'un arrêt opaque sur ce bord jusqu'à un arrêt transparent de l'autre côté.
:::

#### Images et vidéos \{#images-and-videos\}

Un élément Image ou Vidéo ne peut pas avoir un fichier différent pour le thème sombre. À la place, créez un conteneur [et définissez son arrière-plan](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme) sur un style de couleur. Dans chaque version du style, configurez une couche image ou vidéo :

1. Sélectionnez le type de remplissage Image **Image** ou Video **Video**.
2. Importez le fichier source pour la [locale](custom-media#localize-media) sélectionnée dans la barre d'outils inférieure. Vous pouvez cliquer sur **Replace** si un fichier est déjà importé.
3. Cliquez sur **Save**.

:::tip
Pour teinter une image ou une vidéo, ajoutez un calque de couleur semi-transparent [par-dessus](#multi-layer-styles).
:::

### Styles multi-couches \{#multi-layer-styles\}

Chaque version d'un style de couleur peut contenir plusieurs couches. Vous pouvez utiliser des styles multi-couches pour créer des visuels plus complexes, comme des images teintées.

Pour ajouter un calque, cliquez sur l'entrée de style. Ensuite, dans la section **Properties**, **Light** ou **Dark**, cliquez sur le bouton Plus. Un nouveau calque apparaît au-dessus des calques existants. Pour modifier l'ordre des calques, faites glisser leurs lignes. Configurez le nouveau calque, puis cliquez sur **Save**.

Les calques ne s'affichent pas tous partout où vous appliquez le style. Certains calques ne sont visibles que si vous appliquez le style à certaines propriétés ou certains éléments :

- **Remplissage (champs de saisie et sélecteurs)** : Couche inférieure uniquement. Les autres couches sont ignorées.
- **Remplissage (tous les autres éléments)** : Toutes les couches.
- **Bordure (champs de saisie et sélecteurs)** : Une seule couleur unie ou dégradé. Les couches image et vidéo sont ignorées.
- **Bordure (tous les autres éléments)** : Couleurs unies et dégradés. Les couches image et vidéo sont ignorées.
- **Couleur du texte** : Couches de couleur unie uniquement. Les couches dégradé, image et vidéo sont ignorées. Si une version ne contient aucune couche de couleur unie, le texte n'a pas de couleur dans ce mode et est invisible.
- **Icône, ombre et autres couleurs** : Ne prend pas en charge les styles multicouches. Vous ne pouvez appliquer qu'un style de couche unique avec une couleur unie.

### Appliquer un style de couleur \{#apply-a-color-style\}

Pour appliquer un style de couleur à un élément, cliquez sur le swatch de son calque de remplissage, de sa couleur de texte, de sa couleur de bordure ou de sa couleur d'icône. Remplacez la valeur statique par le style en cliquant sur l'onglet **Styles** et en sélectionnant l'entrée de style souhaitée. Si aucun style ne correspond à la valeur dont vous avez besoin, [enregistrez la valeur actuelle comme style](#create-a-color-style).

Pour appliquer un style à plusieurs éléments d'un écran, demandez à l'[AI Editor](flow-ai-editor), par exemple : `Apply the Card background style to all cards`. Pour configurer des styles et les appliquer à l'ensemble du flow, utilisez le [skill flow-generator](flow-generator-skill).

Vous ne pouvez pas appliquer un style de couleur à un élément Image ou Vidéo, car ces éléments n'ont pas de remplissage. À la place, créez un conteneur [et définissez son arrière-plan](paywall-dark-mode#recipe-add-an-image-that-changes-with-the-theme).

## Gérer les styles \{#manage-styles\}

Dans le panneau **Styles** Styles :

- Pour renommer un style, cliquez sur son entrée, modifiez le champ **Name**, puis cliquez sur **Save**.
- Pour dupliquer un style, faites un clic droit sur son entrée et sélectionnez **Duplicate**.
- Pour supprimer un style, cliquez sur son entrée, puis cliquez sur **Delete style**. Si des éléments utilisent ce style, sélectionnez le style qui le remplacera.
- Pour modifier l'ordre des styles, faites glisser leurs entrées vers le haut ou vers le bas dans la liste.
- Pour copier des styles dans un autre flow, sélectionnez leurs entrées (Maj+clic pour en sélectionner plusieurs) et appuyez sur ⌘C / Ctrl+C. Ouvrez le même onglet (**Text** ou **Colors**) dans l'autre flow et appuyez sur ⌘V / Ctrl+V.

## Mode sombre \{#dark-mode\}

:::link
Article principal : [Mode sombre](paywall-dark-mode)
:::

Un style de couleur peut avoir une valeur distincte pour le mode sombre. Lorsque l'appareil de l'utilisateur est en mode sombre, le flow utilise cette valeur à la place.

Pour utiliser des valeurs sombres, [ajoutez un thème sombre](paywall-dark-mode#add-a-dark-theme) au flow. Ensuite, [modifiez la valeur sombre](paywall-dark-mode#configure-the-dark-theme) de chaque style qui doit différer en mode sombre.