Comment personnaliser VSCode ?

1. Téléchargez une font qui vous plait et installez la sur votre ordinateur (exemple ici avec JetBrains Mono):

Le nom à indiquer dans les parametres de VSCode est le nom indiqué lors de l'installation : "JetBrains Mono"

2. Choisir un thème qui vous plait

Rendez vous dans la section des extensions et tapez :

@category:"themes" @popular 

3. Apres avoir installé votre thème, définissez votre thème (exemple ici avec le thème AYU - Light bordererd)

4. Selectionnez ce que vous voulez modifier :

Allez dans le fichier json :

Ajoutez le code (en bas de page) à la suite du choix du thème :

La "sidebar" est la barre d'icones se trouvant sur le coté gauche

L' "editor" est l'endroit où vous écrivez votre code

L' "activityBar" est la section de recherche gauche

Le "badge est un indicateur

La "Tab" est l'ensemble des onglets en haut du logiciel

L' "editor.tokenColorCustomizations" représente l'ensemble de la coloration syntaxique

La "list" est le menu des dossiers et fichiers

A vous tester (avec l'auto-complétion) le reste et de copier/ coller ce que vous avez besoin

Il vous suffit de changer les couleurs et d'enregistrer le document "json" pour voir vos changements

  "workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#025591",
    "sideBar.background": "#f0f0f0",
    "sideBar.foreground": "#000000",
    "sideBarSectionHeader.background": "#287f9c",
    "sideBarSectionHeader.foreground": "#e4e4e4",
    "sideBarTitle.foreground": "#000000",
    "editor.background": "#f0f0f0",
    "editor.foreground": "#e4e4e4",
    "editorGroup.border": "#e4e4e4",
    "editor.findMatchBorder": "#ff0000", 
    "foreground": "#000000",
    "activityBar.border": "#7a7a7a",
    "activityBar.foreground":"#34e6fa",
    "activityBar.background": "#303030",
    "statusBar.background": "#3794a2",
    "badge.background": "#094050",
    "tab.activeBackground": "#f0f0f0",  
    "tab.activeForeground": "#ffffff",
    "tab.activeBorder": "#ffffff",
    "tab.inactiveBackground": "#363636",
    "titleBar.activeForeground": "#ffffff",
    "titleBar.activeBackground": "#484848",
    
},
"editor.tokenColorCustomizations": {
  "numbers": "#ec8740",
  "comments": "#87998b",
  "functions": "#eaea37",
  "keywords": "#4598dc",
  "variables": "#48d2f1",
  "types": "#24c23e",
  "strings": "#cd7783",
},

5. exemple d'un thème Dark, avec un menu Light :