Tips & Tricks

Les dix meilleurs thèmes de WebStorm

Read this post in other languages:

Il est important d’avoir du plaisir à utiliser son IDE. L’un des avantages de WebStorm est qu’il est personnalisable, vous pouvez donc le configurer comme vous le souhaitez. Il est notamment possible de choisir un thème afin d’en modifier l’aspect et la convivialité. Dans cet article, nous vous proposons une sélection des thèmes préférés de notre équipe.

Tous les thèmes mentionnés dans cet article sont directement disponibles ou peuvent être installés gratuitement depuis votre IDE.

  1. Allez dans Preferences / Settings | Plugins, trouvez le plugin de thème que vous voulez utiliser et installez-le. Il sera appliqué automatiquement à votre IDE. Vous pouvez restreindre la recherche de plugins afin que seuls les thèmes soient affichés en ajoutant /tag:Theme au champ Search.
  2. Vous pouvez changer de thème à tout moment en allant dans Preferences / Settings | Appearance & Behavior | Appearance pour y sélectionner le nouveau thème que vous souhaitez utiliser dans le menu déroulant Theme. Vous pouvez aussi utiliser le raccourci ^` (macOS) ou Ctrl+` (Windows, Linux) pour faire apparaître la fenêtre contextuelle Switch… et aller dans Theme.

Thèmes intégrés dans WebStorm

Darcula

Darcula est préinstallé dans WebStorm, pas besoin de plugin de thème supplémentaire. Il s’agit du thème proposé par défaut lorsque vous installez WebStorm pour la première fois et beaucoup d’utilisateurs choisissent de le conserver.

Example of the Darcula theme in WebStorm

Pourquoi il est apprécié :

Les couleurs sombres de Darcula ont une intensité lumineuse réduite. Il permet donc de réduire la fatigue oculaire lorsque vous travaillez longtemps dans votre IDE. Les blancs et autres couleurs de Darcula sont moins vifs que ceux de certains thèmes sombres disponibles, ce que de nombreux utilisateurs préfèrent. Pour en savoir plus sur l’histoire de la création de Darcula, cliquez ici.

Idéal pour :

  • Les environnements à faible luminosité
  • Les yeux sensibles

IntelliJ Light

IntelliJ Light est un autre thème qui est préinstallé avec WebStorm. À l’opposé du thème sombre, il offre une interface d’IDE plus lumineuse. Ce type de thème est adapté si vous travaillez dans des conditions très lumineuses ou avec des applications qui ne sont disponibles que dans un format clair.

Example of the IntelliJ Light theme in WebStorm

Pourquoi il est apprécié :
Il fournit un environnement de travail familier. Il présente un aspect simple et classique que les utilisateurs aiment.

Idéal pour :

  • Les environnements lumineux
  • Les ordinateurs de bureau avec beaucoup d’autres applications uniquement disponibles avec des thèmes clairs

Thème Dark Purple

Dark Purple est l’un des autres thèmes sombres disponibles dans WebStorm. Il offre une interface plus sombre et constatée que Darcula et remplace les bleus et les oranges par des rouges et des violets variés.

Example of the Sark Purple theme in WebStorm

Pourquoi il est apprécié :

Les contrastes plus marqués que dans Darcula sont particulièrement appréciés par les utilisateurs souffrant de déficiences visuelles. Les violets et les roses sont esthétiquement apaisants. Il s’agit du thème préféré d’un grand nombre de membres de notre équipe.

Idéal pour :

  • Les environnements à faible luminosité
  • Les développeurs qui recherchent des couleurs très contrastées

Thème One Dark

One Dark est un autre thème sombre conçu pour améliorer l’expérience de codage. Il est moins lumineux que certains des autres thèmes sombres et fatigue donc moins les yeux.

Example of the One Dark theme in WebStorm

Pourquoi il est apprécié :

Pour certains développeurs, il est plus facile de regarder des tons foncés délavés et des couleurs vives moins contrastées pendant de longues périodes.

Idéal pour :

  • Les environnements à faible luminosité
  • Réduire la fatigue visuelle

Thème Visual Studio Code Dark Plus

Le thème Visual Studio Code Dark Plus est basé sur l’apparence par défaut de Visual Studio Code. Si vous aimez l’aspect et l’ergonomie de Visual Studio Code, vous pouvez donc les retrouver dans WebStorm grâce à ce thème.

Example of the Visual Studio Dark Pro Plus theme in WebStorm

Pourquoi il est apprécié :

Ce thème est proche du thème sombre de VS Code. Ses nuances sombres plus profondes renforcent le contraste entre le texte de l’interface utilisateur et les fenêtres de l’éditeur. La palette de couleurs contient des teintes plus vives que les nuances pastel du thème Darcula par défaut.

Idéal pour :

  • Les environnements à faible luminosité
  • Les utilisateurs habitués à VS Code

Thème Monokai Pro

Le thème Monokai Pro est une adaptation du schéma de l’éditeur Sublime Text. Il est basé sur Monokai Pro, qui est conçu pour favoriser la concentration de l’utilisateur. Il utilise des nuances de couleurs spécialement choisies pour fournir une interface utilisateur sans distraction. Ce thème contient six variantes de thème sombre différentes.

Example of the Monokai Pro theme in WebStorm

Pourquoi il est apprécié :

Le thème Monokai Pro est bien pensé, avec des éléments de texte judicieusement codés par couleur, ce qui facilite la navigation dans votre code. Il offre différentes variantes.

Idéal pour :

  • Les environnements à faible luminosité
  • La révision d’une grande quantité de code

Thème Vuesion

La palette de couleurs du thème Vuesion est basée sur le projet Vuesion. Il apporte à votre IDE les bonnes pratiques modernes en matière d’ingénierie et de design et lui donne un aspect propre et bien organisé.

Example of the Vuesion theme in WebStorm

Pourquoi il est apprécié :

Le thème Vuesion propose une approche différente des autres thèmes sombres. Le bleu-vert est beaucoup plus utilisé, ce que les personnes familières de Vue reconnaîtront. Le surlignage dans l’éditeur offre un contraste élégant et le style du rendu est similaire à celui de Vue : propre, net et avec du vert.

Idéal pour :

  • Les environnements à faible luminosité
  • Les longues sessions de travail dans l’éditeur

Thème Gradianto

Le thème Gradianto vous permet d’apporter de la couleur à votre IDE. Il propose une sélection de dégradés inspirés de la nature afin d’offrir un rendu qui soit coloré et lumineux tout en restant agréable à l’œil.

Example of the Gradianto theme in WebStorm

Pourquoi il est apprécié :

Gradianto est simple et agréable à l’œil. Il n’est pas aussi marqué que certains autres thèmes sombres car il utilise des tons de couleur au lieu de tons noirs, il n’est donc ni trop lumineux ni trop sombre.

Idéal pour :

  • Toutes les conditions de luminosité
  • Les yeux sensibles

Thème Hiberbee

Hiberbee est un thème sombre qui réunit le meilleur de Monokai et de macOS afin de fournir une haute lisibilité et de bons contrastes.

Example of the Hiberbee theme in WebStorm

Pourquoi il est apprécié :

Souvent, les thèmes sombres utilisent des couleurs de type fluo pour assurer un bon contraste entre les textes. Le thème Hiberbee utilise des couleurs vives mais sans tons fluo. La palette de couleurs est également intuitive, certaines balises, classes ou parties du code étant mises en évidence par des couleurs complémentaires.

Idéal pour :

  • Les environnements à faible luminosité
  • Les développeurs recherchant des couleurs fortement contrastées mais sans teintes fluo

Thème Cyan Light

Le thème Cyan Light est le compromis parfait pour les personnes qui préfèrent les thèmes clairs mais n’aiment pas les tons blancs trop éclatants. Il privilégie le gris clair au blanc, pour un environnement de travail très confortable.

Example of the Cyan theme in WebStorm

Pourquoi il est apprécié :

Contrairement à la plupart des thèmes lumineux, Cyan Light utilise des nuances de blanc cassé et des tons cyan pour le contraste. La typographie est sobre et simple, les mots clés, les identificateurs, les champs et les variables étant affichés dans des couleurs sombres pour les différencier de manière subtile.

Idéal pour :

  • Les environnements avec une lumière vive
  • Les yeux sensibles

Comment sélectionner un thème

Pour trouver le thème qui vous convient le mieux, il ne s’agit pas de consulter les classements et les avis d’autres utilisateurs ou de rechercher le thème qui est le plus téléchargé. Il faut avant tout tenir compte de vos besoins et de la façon dont vous utilisez votre IDE. La marketplace JetBrains propose plus de 250 thèmes, vous avez donc toute les chances d’y trouver un thème qui vous corresponde mieux que ceux que nous vous avons présentés dans cet article. Voici quelques-uns des critères que nous vous conseillons de prendre en compte pour choisir le thème idéal pour vous.

Votre environnement de travail

L’environnement dans lequel vous vous trouvez lorsque vous codez peut avoir un impact sur l’interface avec laquelle vous vous sentirez le plus à l’aise pour travailler efficacement. Par exemple, si vous préférez travailler tard dans la nuit à la lumière de votre écran d’ordinateur, l’utilisation d’un thème sombre peut contribuer à réduire la fatigue oculaire.

Votre sensibilité oculaire

Certaines personnes trouvent certaines couleurs difficiles à regarder, et d’autres ne peuvent pas distinguer les nuances entre certaines couleurs. Nous sommes tous différents. Identifier la palette de couleurs avec laquelle vous pouvez confortablement effectuer de longues sessions de travail peut prendre du temps et nécessiter plusieurs essais, mais une fois que vous avez compris ce que vous préférez, vous pouvez rechercher un thème qui présente les caractéristiques pertinentes.

Votre façon de travailler

Si vous êtes multitâche et travaillez sur plusieurs applications, le fait de passer d’un document Google clair à un éditeur d’IDE au thème sombre peut rapidement entraîner fatigue et maux de tête. Cela vaut donc la peine de rechercher un thème qui soit compatible avec votre façon de travailler. Vous pouvez synchroniser le thème avec votre système d’exploitation en cochant l’option Sync with OS dans les paramètres du thème. Si le système d’exploitation est configuré pour changer de thème en fonction de l’heure de la journée, l’IDE changera également de thème automatiquement au même moment.

Développez votre propre thème

Si vous ne trouvez pas le thème idéal sur la Marketplace JetBrains, vous avez aussi la possibilité de créer le vôtre. Nous proposons un tutoriel détaillé sur la création d’un thème personnalisé dans notre documentation. Et si vous pensez que d’autres utilisateurs pourraient bénéficier de votre thème, pourquoi ne pas l’ajouter à la Marketplace pour le leur proposer ?

C’est tout pour aujourd’hui ! Nous espérons que cette présentation ds thèmes pour WebStorm vous a donné des idées pour améliorer votre IDE. S’il y a un thème que vous aimez tout particulièrement, faites-le nous savoir dans les commentaires.

L’Équipe WebStorm

Auteur de l’article original en anglais :

Delphine Massenhove

David Watson

image description