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

# Utilisez les thèmes pour garder les couleurs et les arrondis cohérents dans les écrans Flowstep

> Choisissez ou générez un thème pour chaque fichier, modifiez le style d'un écran à la fois, éditez les thèmes de votre organisation, et liez les couleurs et les arrondis aux jetons de thème pour que les changements se propagent à tous les écrans.

Un thème est une palette de couleurs partagée et un arrondi de coins pour vos écrans. Chaque fichier a un thème et une apparence (clair ou sombre), et les écrans sont stylisés à l'aide des jetons du thème. Modifiez un thème, et chaque écran qui l'utilise suit la modification : votre équipe travaille ainsi à partir d'un seul ensemble de décisions, au lieu de répéter les couleurs dans chaque prompt.

Les thèmes que vous créez ou générez sont enregistrés dans votre organisation et listés sous **Themes** dans Home, afin que tout fichier de l'organisation puisse les utiliser.

## Choisir un thème pour un fichier

Choisissez le thème et l'apparence des nouveaux écrans depuis le compositeur de prompt à l'intérieur d'un fichier. Le bouton de thème n'est pas disponible dans la boîte de prompt sur Home.

<Steps>
  <Step title="Ouvrir le menu des thèmes">
    Dans le compositeur de prompt, cliquez sur le bouton de thème — il affiche l'échantillon de couleur du thème actuel, ou une roue chromatique lorsque le thème est **Automatic**. Le menu est intitulé **Theme for new screens**.
  </Step>

  <Step title="Choisir un thème">
    Sélectionnez **Automatic**, l'un des thèmes de votre organisation (listés en premier), ou un thème intégré : **Default**, **Blue**, **Grayscale**, **Green**, **Ice**, **Orange**, **Red**, **Rose**, **Violet** ou **Yellow**.
  </Step>

  <Step title="Choisir une apparence">
    Sous **Appearance**, choisissez **Light** ou **Dark**, ou **Automatic** pour que Flowstep décide pour chaque écran à partir de votre prompt — « un tableau de bord sombre » sort en sombre.
  </Step>
</Steps>

<Note>
  Votre choix s'applique aux écrans que vous générez ensuite. Les écrans déjà sur le canevas conservent leur apparence.
</Note>

## Laisser Flowstep concevoir un thème

Lorsqu'un fichier n'a pas encore de thème — un nouveau fichier dont le thème est laissé sur **Automatic** —, Flowstep conçoit un thème personnalisé en même temps que les premiers écrans qu'il génère. Vous verrez une étape **Designing theme** dans le clavardage pendant qu'elle travaille.

Flowstep construit le thème à partir de :

* Les couleurs que vous nommez dans votre prompt
* Les couleurs de vos [directives de conception](/fr-CA/design-guidelines)
* Les couleurs de marque provenant des pièces jointes et des [liens que vous collez](/fr-CA/design-references#paste-a-url)
* Le produit et l'ambiance décrits dans votre prompt, lorsqu'il n'y a rien de plus précis sur quoi se baser

Le thème reçoit un nom court, une palette complète pour les modes clair et sombre, ainsi qu'une étape d'arrondi. Il est enregistré dans votre organisation sous **Themes** dans Home, et le fichier l'utilise pour chaque écran généré par la suite.

Une fois qu'un fichier a un thème, Flowstep n'en conçoit pas un autre de sa propre initiative. Pour obtenir un thème tout neuf, sélectionnez de nouveau **Automatic** dans le menu des thèmes — la génération suivante conçoit un nouveau thème, et le fichier s'y fixe. Si Flowstep ne peut pas concevoir de thème, le fichier revient à un thème intégré.

<Tip>
  Mentionnez vos couleurs de marque dans votre premier prompt, ou définissez-les dans vos [directives de conception](/fr-CA/design-guidelines) avant de générer, et le thème généré partira de celles-ci.
</Tip>

## Changer le thème d'un écran

Pour restyler un seul écran sans toucher au reste du fichier :

1. Sélectionnez l'écran sur le canevas.
2. Dans le menu au-dessus de l'écran, cliquez sur le bouton **Theme**.
3. Choisissez l'un des thèmes de votre organisation ou un thème intégré, ou passez de **Light** à **Dark**.

Changer de thème redessine l'écran instantanément. Passer de **Light** à **Dark** demande à l'IA de restyler l'écran, comme pour une [modification par IA](/fr-CA/editing-designs). Le menu n'est pas disponible pendant qu'une génération est en cours.

## Modifier un thème

Ouvrez un thème depuis la section **Themes** dans Home. L'éditeur de thème affiche un aperçu en direct du thème, avec **Theme settings** à droite. Utilisez les boutons **Light** et **Dark** en haut pour changer l'aperçu, et cliquez sur le nom du thème pour le renommer.

* **Colors** — chaque groupe de couleurs comporte un échantillon pour le mode clair et un pour le mode sombre : **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** et **Sidebar**. Cliquez sur un échantillon pour modifier ses couleurs — par exemple, la couleur de remplissage et la couleur du texte d'un groupe — à l'aide du sélecteur de couleur ou d'une valeur hexadécimale.
* **Radius** — choisissez un niveau d'arrondi (**Square**, **Slight**, **Balanced**, **Soft** ou **Round**), ou choisissez **Custom** et faites glisser **Base radius** pour définir votre propre valeur.

Vos modifications sont enregistrées comme brouillon, de sorte que les écrans ne changent pas pendant que vous travaillez. Lorsque vous êtes prêt :

* Cliquez sur **Publish** pour mettre à jour chaque écran qui utilise le thème. Flowstep confirme avec « Published. Screens using this theme are updating. » (« Publié. Les écrans qui utilisent ce thème sont en cours de mise à jour. »)
* Cliquez sur **Reset changes** pour annuler vos modifications non publiées. Les écrans qui utilisent le thème ne sont pas touchés.

Pour supprimer un thème, cliquez sur **Delete theme** au bas de **Theme settings**, ou sur l'icône de corbeille à côté de celui-ci dans la liste **Themes** de Home. Un thème supprimé n'est plus proposé dans les menus de thèmes, mais les écrans qui l'utilisent déjà conservent leur apparence : rien ne change sur votre canevas.

<Note>
  Tous les membres de votre organisation, à l'exception des Guests (invités), peuvent modifier et supprimer des thèmes.
</Note>

## Lier les couleurs et les arrondis à votre thème

Les couleurs et les arrondis peuvent pointer vers un jeton de thème au lieu d'une valeur fixe. Une valeur liée suit le thème de l'écran : lorsque le thème change — un autre thème, une modification publiée, ou un passage du mode clair au mode sombre —, les couleurs et les arrondis liés se mettent à jour avec lui.

**Colors** — dans le panneau **Fill** ou **Border**, cliquez sur l'échantillon de couleur. Sous l'onglet **Token**, recherchez ou choisissez un jeton dans les groupes **Theme**, **Base** ou **Tailwind**. Utilisez l'onglet **Custom** pour une couleur exacte. Une couleur liée affiche le nom de son jeton dans le panneau, et vous pouvez toujours ajuster son opacité.

**Corners** — dans le panneau **Corners**, cliquez sur un aperçu de coin. Sous l'onglet **Token**, choisissez une étape (par exemple, `md` ou `lg`); sous l'onglet **Custom**, saisissez une valeur exacte en pixels. Un coin lié affiche le nom de son jeton, et la modification de l'arrondi du thème le réarrondit.

Pour transformer une valeur liée en valeur fixe, cliquez sur **Detach from token**. La couleur ou le coin conserve son apparence actuelle, mais ne suit plus le thème.

## Bon à savoir

* **Les écrans conservent leur propre thème** — chaque écran retient son thème et son apparence. Changer le thème du fichier n'affecte que les écrans que vous générez ensuite; utilisez le menu **Theme** de chaque écran pour restyler les écrans existants.
* **Versions publiées uniquement** — les écrans affichent la version publiée d'un thème. Les brouillons ne sont visibles que dans l'éditeur de thème jusqu'à leur publication.
* **Les liens vers les jetons survivent aux modifications** — les couleurs du thème utilisées dans les ombres, les filtres et les dégradés restent liées au thème lorsque Flowstep modifie ou régénère un écran.
* **Les étapes d'arrondi qui ne s'adaptent pas** — les jetons de coin `none` et `full` sont toujours carrés et entièrement arrondis, quel que soit l'arrondi du thème.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.