> ## 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.

# Utiliser 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, restylez des écrans individuels, modifiez les thèmes de votre organisation et liez les couleurs et les arrondis aux jetons de thème pour que les changements se répercutent sur tous les écrans.

Un thème est une palette de couleurs et un arrondi d'angles partagés pour vos écrans. Chaque fichier a un thème et une apparence (clair ou sombre), et les écrans sont stylisés avec les jetons du thème. Modifiez un thème, et tous les écrans qui l'utilisent suivent la modification. Votre équipe travaille ainsi à partir d'un même ensemble de décisions, au lieu de redéfinir 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** sur Home. Tous les fichiers de l'organisation peuvent donc les utiliser.

## Choisir un thème pour un fichier

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

<Steps>
  <Step title="Ouvrir le menu des thèmes">
    Dans l'éditeur de prompt, cliquez sur le bouton de thème. Il affiche la pastille du thème actuel, ou une roue chromatique lorsque le thème est sur **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 laisser Flowstep décider écran par écran à partir de votre prompt. Par exemple, « a dark dashboard » (un tableau de bord sombre) donne un rendu sombre.
  </Step>
</Steps>

<Note>
  Votre choix s'applique aux écrans que vous générez ensuite. Les écrans déjà présents 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 resté sur **Automatic**), Flowstep conçoit un thème personnalisé en même temps que les premiers écrans générés. Une étape **Designing theme** apparaît dans le chat pendant ce travail.

Flowstep crée le thème à partir de :

* Les couleurs que vous mentionnez dans votre prompt
* Les couleurs de vos [consignes de conception](/fr/design-guidelines)
* Les couleurs de marque issues des pièces jointes et des [liens que vous collez](/fr/design-references#paste-a-url)
* Le produit et l'ambiance décrits dans votre prompt, lorsqu'il n'y a pas d'information plus précise

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

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 neuf, sélectionnez à nouveau **Automatic** dans le menu des thèmes. La génération suivante en conçoit un nouveau, 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 les couleurs de votre marque dans votre premier prompt, ou définissez-les dans vos [consignes de conception](/fr/design-guidelines) avant de générer. Le thème généré partira alors de ces couleurs.
</Tip>

## Modifier le thème d'un seul écran

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

1. Sélectionnez l'écran sur le canevas.
2. Dans le menu situé 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 basculez entre **Light** et **Dark**.

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

## Modifier un thème

Ouvrez un thème depuis la section **Themes** sur 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 a une pastille pour le mode clair et une pour le mode sombre : **Primary**, **Secondary**, **Accent**, **Muted**, **Destructive**, **Background**, **Card**, **Popover**, **Border**, **Input**, **Ring**, **Charts** et **Sidebar**. Cliquez sur une pastille pour modifier les couleurs du groupe, par exemple sa couleur de remplissage et sa couleur de texte, avec le sélecteur de couleurs ou une valeur hexadécimale.
* **Radius** : choisissez un niveau d'arrondi (**Square**, **Slight**, **Balanced**, **Soft** ou **Round**), ou sélectionnez **Custom** et faites glisser **Base radius** pour définir le vôtre.

Vos modifications sont enregistrées en tant que brouillon, si bien que les écrans ne changent pas pendant que vous travaillez. Lorsque vous êtes prêt :

* Cliquez sur **Publish** pour mettre à jour tous les écrans qui utilisent le thème. Flowstep confirme avec le message « 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 abandonner vos modifications non publiées. Les écrans qui utilisent le thème ne sont pas affectés.

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

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

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

Les couleurs et les angles 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 angles liés se mettent à jour avec lui.

**Colors** : dans le panneau **Fill** ou **Border**, cliquez sur la pastille de couleur. Dans l'onglet **Token**, recherchez ou choisissez un jeton parmi 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 d'angle. Dans l'onglet **Token**, choisissez un niveau (par exemple, `md` ou `lg`). Dans l'onglet **Custom**, saisissez une valeur exacte en pixels. Un angle lié affiche le nom de son jeton, et modifier l'arrondi du thème le réarrondit.

Pour redonner une valeur fixe à une valeur liée, cliquez sur **Detach from token**. La couleur ou l'angle conserve son apparence actuelle, mais ne suit plus le thème.

## Bon à savoir

* **Les écrans conservent leur propre thème** : chaque écran mémorise 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 sont conservés** : les couleurs de 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.
* **Niveaux d'arrondi fixes** : les jetons d'angle `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.