Skip to content
Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

Comment créer un thème pour Visual Studio Code ?

La plupart du temps, quand je discute avec un développeur, qu’il soit dev web ou dev barbu sous Linux, celui-ci me fait toujours de très bons retours sur le Visual Studio Code.

Développé par Microsoft, Visual Studio Code est un éditeur de code qui tourne aussi bien sous Linux que MacOS ou encore Windows et qui propose de nombreuses fonctionnalités très cooll de debug, de coloration syntaxique, d’auto complétion, de snippets ou encore une bonne base de plugins divers et variés et une intégration avec Git aux petits oignons.

Visual Studio Code propose comme la plupart des logiciels permettant d’éditer du code, un thème sombre, mais vous permet également d’aller encore plus loin en lui appliquant des thèmes. C’est très cool parce que comme ça vous pouvez avoir vraiment l’éditeur de code source qui vous convient. Soit parce que vous aimez certaines couleurs et que ça vous fait plaisir, soit parce que vous avez des particularités visuelles qui vous obligent à préférer des couleurs ou des polices de caractères à d’autres.

Dans cet article, je vous liste les différentes méthodes que vous avez à votre disposition pour changer ou créer un thème pour votre éditeur de code Visual Studio.

Sommaire :

VSCode Themes

Sur ce site, vous trouverez une sélection de qualité avec des skins sombres ou lumineux pour Visual Studio Code. C’est évidemment téléchargeable gratuitement et ils sont installables directement via le site web. Que ce soit pour faire coller VS Code à votre macOS ou pour lui donner un look hacker ou hyper lumineux, vous trouverez forcément votre bonheur.

capture écran de VS Code Theme

Marketplace Visual Studio

Sur la place de marché officielle de Visual Studio, vous trouverez évidemment des plugins, des snippets…etc., mais également des centaines de thèmes. Il y en a vraiment pour tous et chacun y va de sa petite référence… Du thème Game of Thrones, au thème Dracula, Linux ou encore des portages de thèmes d’applications concurrentes comme Sublime Text.

marketplace visual studio code

VSCode.one

Le site VSCode.one propose non seulement des tonnes de thèmes à parcourir et à télécharger, mais également un assistant qui vous permettra de créer vos propres skins pour Visual Studio Code. Rien de bien sorcier, il ne s’agit ici que de couleurs à changer. Vous choisissez un élément comme la barre de titre, les onglets, la zone de code, les widgets…etc. et vous sélectionnez ensuite la couleur qui vous convient.

éditeur de Thème VSCode.one

Theme Generator

Theme Generator est téléchargable sur la place de marché des plugins de Visual Studio, mais ce n’est pas une extension officielle de Microsoft. Toutefois, celui-ci vous permettra de modifier assez basiquement un thème dark ou light et de générer ensuite un nouveau template pour VS Code.

script générateur de theme

VS Code Theme Generator

Ce script proposé par Daniel Imms permet également de générer des skins pour Visual Studio Code, sauf qu’ici, Daniel a choisi la simplicité. A savoir laisser à l’utilisateur la possibilité de choisir quelques couleurs de base comme celle du fond de l’éditeur, de l’avant plan, et 4 couleurs d’accentuation) et de laisser tout le reste être géré par le script. Cela permet d’obtenir des thèmes personnalisés sans trop dénaturer VS Code et surtout sans repartir sur les bugs d’un thème d’origine.

vs code theme generator

Themer

Themer est un site un peu différent des outils précédents puisqu’il permet de créer 1 thème pouvant s’appliquer à plusieurs logiciels. Cela vous permet de choisir des couleurs qui vous plaisent et d’avoir la même ambiance dans tous vos outils comme votre terminal, votre éditeur de code (comme VS Code mais également Vi, XCode, Atom, Sublime Text… etc.) et d’avoir également des fonds d’écran ou de la customisation dans Firefox , Chrome, Brave ou encore Slack. C’est fou non ? Par contre, pas de prévisualisation possible, ce qui est dommage.

Interface themer avec fonds d'écran

Créer un thème à la main

Si vous utilisez VS Code, c’est probablement parce que vous êtes codeur… Donc pourquoi ne pas réaliser vous-même votre propre thème directement à la main ? Pour cela, Microsoft a réalisé une documentation assez claire que vous pouvez retrouver ici. J’ai également trouvé une documentation alternative ici.

documentation theme visual studio

Mais le fonctionnement est assez simple puisque faire un thème consiste à créer une extension pour VS Code. Vous devez installer le package Yeoman ainsi que le générateur de code comme ceci :

npm install -g yo generator-code

Puis vous placer dans le répertoire où vous souhaitez créer votre thème et lancer la commande :

yo code

Cela aura pour effet de lancer le générateur d’extensions de Visual Studio Code (VSCE). Ce dernier vous proposera un menu, à vous de choisir « New Color Theme »…

yeoman theme VSCode

Puis de répondre à quelques questions pour au final obtenir un squelette de thème à modifier ensuite comme vous le voudrez.

création theme ligne de commande

Pour aller plus loin :


NordVPN à moins de 3€/mois

-68% 3,3€/mois durant 2 ans

Protection en un clic, fonctionnalité Kill Switch, masquage de votre adresse IP, prise en charge des partages de fichiers en p2p, protection contre les malwares et les pubs, streaming sans interruption, test de fuite DNS et même possibilité de coupler l’outil avec l’anonymat de The Onion Router … sont quelques-unes des autres options disponibles.

NordVPN a tissé une toile de serveurs dans le monde entier (plus de 5 500 dans 60 pays) permettant ainsi de se localiser dans la zone géographique de son choix. Vous avez envie d’un Anime japonais ou bien d’une exclusivité US ? Aucun problème. À vrai dire, vous pouvez même vous localiser en France en cas de déplacement à l’étranger.

En complément de cet impressionnant réseau, NordVPN a aussi développé la fonctionnalité SmartPlay qui permet d’accéder en toute sécurité aux contenus qui sont normalement inaccessibles. C’est un système de SmartDNS performant qui ne nécessite pas d’intervention complexe, vous profitez d’une connexion sécurisée et vous visionnez le contenu de votre choix en streaming sans vous prendre la tête.

Profiter de la promo



Les articles du moment