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

# Thèmes Replit

> Apprenez à personnaliser l'Éditeur de projet avec des thèmes personnalisés, des palettes de couleurs et une coloration syntaxique.

Les thèmes dans Replit vous permettent de personnaliser l'apparence de l'Éditeur de projet, des couleurs d'arrière-plan et des éléments d'interface utilisateur à la coloration syntaxique de votre code. Personnalisez votre environnement de développement pour une meilleure lisibilité, une réduction de la fatigue oculaire et une expérience de codage plus agréable.

<Frame>
  <img src="https://mintcdn.com/replit/9NKf1XREDj9JhKJb/images/workspace/themes.jpg?fit=max&auto=format&n=9NKf1XREDj9JhKJb&q=85&s=c281da129853b7482f8c89f75777f415" alt="Capture d'écran de l'éditeur de thèmes Replit montrant les options de personnalisation des couleurs" width="1920" height="1080" data-path="images/workspace/themes.jpg" />
</Frame>

## Créer un thème personnalisé

Suivez ces étapes pour créer et personnaliser votre propre thème :

1. Ouvrez [Paramètres](https://replit.com/settings) et accédez à **Utilisateur** → **Personnalisation** (ou la section **Thèmes**)
2. Sélectionnez **Créer un nouveau thème**
3. Entrez un titre, sélectionnez une palette de couleurs (claire ou sombre) et ajoutez une description facultative
4. Sélectionnez **Créer un thème** pour ouvrir l'Éditeur de thèmes

Les paramètres globaux du thème contrôlent l'apparence générale de l'interface utilisateur :

* **Arrière-plan** : Définit la couleur de base pour la plupart des surfaces de l'interface utilisateur
* **Contour** : Contrôle la couleur des bordures et des séparateurs
* **Premier plan** : Détermine les couleurs du texte et des icônes
* **Principal** : Définit la couleur des boutons et des éléments interactifs
* **Positif** : S'applique aux indicateurs de succès comme le bouton **Exécuter**
* **Négatif** : S'affiche pour les erreurs et les avertissements d'actions destructives

Sélectionnez **Appliquer le thème** pour commencer à utiliser votre thème personnalisé immédiatement.

## Coloration syntaxique

Personnalisez l'apparence des différents éléments de code pour améliorer la lisibilité et la compréhension.

<Tip>
  Une coloration syntaxique appropriée rend le code plus facile à analyser et à comprendre d'un coup d'œil. Choisissez des couleurs qui fonctionnent bien ensemble et offrent un contraste suffisant par rapport à votre arrière-plan.
</Tip>

<Accordion title="Éléments de coloration syntaxique">
  | Élément                       | Description                                                                                       |
  | ----------------------------- | ------------------------------------------------------------------------------------------------- |
  | **Noms de variables**         | S'applique aux variables où aucun mot-clé de déclaration n'est utilisé                            |
  | **Définitions de variables**  | Colore les noms de variables lorsqu'elles sont définies avec des mots-clés comme `const` ou `var` |
  | **Références de fonctions**   | S'applique lors de l'appel de fonctions                                                           |
  | **Définitions de fonctions**  | Colore les noms de fonctions lors de leur déclaration                                             |
  | **Mots-clés**                 | Met en évidence les mots-clés du langage comme `import`, `function` et `return`                   |
  | **Noms de propriétés**        | Colore l'accès aux propriétés depuis les variables                                                |
  | **Définitions de propriétés** | Utilisé lors de la définition des propriétés d'objet                                              |
  | **Propriétés de fonctions**   | S'applique lors de l'appel de méthodes sur des objets                                             |
  | **Noms de balises**           | Utilisé pour les balises HTML et JSX                                                              |
  | **Noms de types**             | Colore les annotations de type dans les langages typés                                            |
  | **Noms de classes**           | S'applique aux déclarations et références de classes                                              |
  | **Noms d'attributs**          | Met en évidence les attributs HTML et JSX                                                         |
  | **Commentaires**              | S'applique à tous les commentaires du code                                                        |
  | **Chaînes**                   | Colore les littéraux de chaîne                                                                    |
  | **Nombres**                   | Met en évidence les valeurs numériques                                                            |
  | **Booléens**                  | Formate les valeurs booléennes (`true`/`false`)                                                   |
  | **Expressions régulières**    | Colore les motifs regex                                                                           |
  | **Opérateurs**                | Met en évidence les opérateurs comme `+`, `-`, `*` et `/`                                         |
  | **Crochets**                  | Colore les crochets carrés et angulaires le cas échéant                                           |
</Accordion>

## Bonnes pratiques de conception de thème

Créez des thèmes visuellement attrayants et fonctionnels en suivant ces directives :

### Couleur et contraste

* **Équilibrer le contraste** : Assurer une différence suffisante entre les éléments d'arrière-plan et de premier plan
* **Créer des palettes cohésives** : Choisir des couleurs qui se complètent plutôt que de se heurter
* **Maintenir une luminosité cohérente** : Conserver un niveau de luminosité similaire dans tous les éléments syntaxiques
* **Concevoir pour l'accessibilité** : Prendre en compte les utilisateurs ayant des déficiences visuelles en évitant les combinaisons à faible contraste

<Warning>
  Problèmes courants de conception de thème à éviter :

  * Différences de luminosité excessives entre les éléments syntaxiques
  * Couleurs mal assorties qui créent une discordance visuelle
  * Contraste insuffisant entre le code et l'arrière-plan
</Warning>

## Gérer vos thèmes

Accédez et gérez tous vos thèmes installés dans [Paramètres](https://replit.com/settings) sous **Utilisateur** → **Personnalisation** (ou la section **Thèmes**).

### Changer de thème

Sélectionnez le bouton à côté du titre d'un thème pour l'activer comme thème actuel.

### Modifier les thèmes

Modifiez vos thèmes personnalisés en sélectionnant le menu à trois points et en cliquant sur **Modifier**.

<Note>
  Seuls les thèmes personnalisés que vous avez créés peuvent être modifiés ou supprimés. Les thèmes par défaut et les thèmes créés par d'autres ne peuvent pas être modifiés.
</Note>

### Supprimer des thèmes

Supprimez des thèmes personnalisés en utilisant le menu à trois points et en sélectionnant **Supprimer**.

## Explorer les thèmes de la communauté

Découvrez les thèmes créés par la communauté Replit sur la [Page d'exploration des thèmes](https://replit.com/themes).

### Trouver des thèmes

* Rechercher par nom pour trouver des thèmes spécifiques comme « Atom One Dark »
* Filtrer par auteur pour explorer les thèmes de créateurs spécifiques
* Parcourir par palette de couleurs pour trouver des thèmes clairs ou sombres
* Rechercher par couleurs spécifiques pour correspondre à vos préférences

Prévisualisez n'importe quel thème avant de l'installer pour voir comment il apparaîtra dans l'Éditeur de projet.

## Portage depuis VS Code

Importez vos thèmes VS Code préférés vers Replit en mappant les couleurs équivalentes pendant le processus de création de thème.

<Frame>
  <iframe width="100%" height="400" src="https://www.loom.com/embed/ba4eb90eb3dd4ec7802954bf695b9c82?sid=4a5274a2-cfd7-4f2b-9c11-f54d7a56eb7f" frameborder="0" allowfullscreen />
</Frame>

## Publier votre thème

Partagez vos thèmes personnalisés avec la communauté Replit en suivant ces étapes :

1. Ouvrez l'Éditeur de thèmes pour votre thème personnalisé
2. Sélectionnez le bouton **Publier**
3. Complétez les champs de titre et de description
4. Soumettez votre thème

Une fois publié, votre thème apparaîtra sur la Page d'exploration des thèmes, où d'autres utilisateurs pourront le prévisualiser et l'installer.

## Ressources connexes

* [Fonctionnalités de l'Éditeur de projet](/core-concepts/project-editor/editor-and-tools/console) - Explorer d'autres fonctionnalités de l'Éditeur de projet comme la Console, le Shell et le Multijoueur
* [Paramètres utilisateur](/core-concepts/project-editor/editor-and-tools/user-settings) - Configurer vos préférences de l'Éditeur de projet
* [Raccourcis clavier](/core-concepts/project-editor/editor-and-tools/keyboard-shortcuts) - Accélérez votre workflow avec des raccourcis clavier
* [Inviter des coéquipiers](/replitai/invite-teammates) - Collaborer en temps réel avec des membres de l'équipe
