sidebartitle.foreground vscode : Comment Changer cette Couleur ?

Vous voulez changer la couleur du texte dans la barre latérale de VS Code ? Pas de panique.

Ce guide vous donne le code exact à copier-coller pour le faire en moins d’une minute.

La solution directe : le code pour changer la couleur du titre de la sidebar

Le plus simple est d’aller droit au but. Voici le bloc de code à ajouter dans vos paramètres pour modifier la couleur du titre de votre barre latérale (sidebar).


"workbench.colorCustomizations": {
    "sideBarTitle.foreground": "#FFFFFF",
    "sideBarSectionHeader.foreground": "#FFFFFF",
    "sideBarSectionHeader.background": "#001733"
}

Ce code modifie trois éléments clés. Vous n’êtes pas obligé de tous les utiliser. Copiez uniquement les lignes dont vous avez besoin. Remplacez simplement les codes couleur (comme `#FFFFFF`) par ceux que vous voulez.

sideBarTitle.foreground : Change la couleur du titre principal de la vue, comme « EXPLORATEUR » ou « RECHERCHE ». C’est souvent ce que l’on cherche avec la requête `sidebartitle.foreground`.
sideBarSectionHeader.foreground : Change la couleur des titres de chaque section dans la sidebar. Par exemple, le nom de votre dossier de projet, « OUTLINE » ou « TIMELINE ». C’est un réglage très utile.
sideBarSectionHeader.background : Change la couleur de l’arrière-plan de ces titres de section. Utile pour les faire ressortir.

Comment appliquer cette personnalisation dans VS Code ?

Si vous ne savez pas où coller ce code, suivez ces étapes. C’est l’affaire de 30 secondes.

Tout se passe dans un fichier de configuration qui s’appelle `settings.json`. Pour l’ouvrir et ajouter votre personnalisation de thème, voici comment faire.

Ouvrez la palette de commandes avec le raccourci Ctrl+Shift+P (sur Windows/Linux) ou Cmd+Shift+P (sur Mac).
Tapez « settings json » dans la barre de recherche qui apparaît.
Sélectionnez l’option « Preferences: Open User Settings (JSON) ». Le fichier `settings.json` va s’ouvrir.
Dans ce fichier, cherchez une ligne qui contient "workbench.colorCustomizations".
Si elle existe déjà, ajoutez simplement vos lignes (par exemple, "sideBarTitle.foreground": "#votreCouleur") à l’intérieur des accolades {}. N’oubliez pas la virgule après la ligne précédente.
Si elle n’existe pas, ajoutez le bloc de code complet (celui du début de l’article) dans le fichier JSON principal, avant la dernière accolade fermante }.
Sauvegardez le fichier (Ctrl+S ou Cmd+S). Les changements de couleur sont appliqués immédiatement. Pas besoin de redémarrer VS Code.

Référence complète : toutes les couleurs de thème personnalisables

La propriété `sideBarTitle.foreground` n’est qu’une des centaines de couleurs que vous pouvez changer dans Visual Studio Code. Le paramètre workbench.colorCustomizations vous donne un contrôle total sur l’apparence de l’éditeur.

Voici une liste détaillée des autres options disponibles, classées par catégorie. Vous pouvez utiliser n’importe laquelle de ces propriétés dans votre objet `workbench.colorCustomizations`.

Couleurs de base et de contraste

Ces couleurs définissent les éléments fondamentaux de l’interface, comme les bordures et le texte par défaut.

contrastActiveBorder: Une bordure supplémentaire autour des éléments actifs pour un meilleur contraste.
contrastBorder: Une bordure supplémentaire autour des éléments pour les séparer et améliorer le contraste.
focusBorder: Couleur de la bordure autour des éléments qui ont le focus (quand vous cliquez dessus ou naviguez avec le clavier).
foreground: Couleur du texte par défaut dans l’interface de VS Code.
disabledForeground: Couleur du texte pour les éléments désactivés (par exemple, un bouton non cliquable).
widget.border: Couleur de la bordure des widgets comme la recherche ou le remplacement.
widget.shadow: Couleur de l’ombre des widgets.
selection.background: Couleur de fond pour le texte sélectionné dans l’éditeur.
descriptionForeground: Couleur du texte utilisé pour les descriptions d’information.
errorForeground: Couleur du texte pour les messages d’erreur.
icon.foreground: Couleur par défaut des icônes dans l’interface.
sash.hoverBorder: Couleur de la bordure de la barre de séparation (sash) au survol de la souris.

Fenêtre et textes généraux

Contrôle l’apparence de la fenêtre principale et des blocs de texte spécifiques.

window.activeBorder: Bordure de la fenêtre quand elle est active. Ne fonctionne que si "window.titleBarStyle": "custom" est activé.
window.inactiveBorder: Bordure de la fenêtre quand elle est inactive.
textBlockQuote.background: Couleur de fond pour les blocs de citation dans les textes.
textBlockQuote.border: Couleur de la bordure pour les blocs de citation.
textCodeBlock.background: Couleur de fond pour les blocs de code dans les textes.
textLink.activeForeground: Couleur d’un lien hypertexte quand on clique dessus.
textLink.foreground: Couleur par défaut d’un lien hypertexte.
textPreformat.foreground: Couleur du texte pour les segments de texte préformatés.
textSeparator.foreground: Couleur pour les séparateurs de texte.

Éléments d’interface (boutons, menus, champs)

Ce groupe contient toutes les propriétés pour personnaliser les contrôles standards de l’interface.

button.background: Couleur de fond des boutons.
button.foreground: Couleur du texte des boutons.
button.border: Couleur de la bordure des boutons.
button.separator: Couleur du séparateur pour les boutons avec plusieurs actions.
button.hoverBackground: Couleur de fond des boutons au survol de la souris.
button.secondaryForeground: Couleur du texte pour les boutons secondaires.
button.secondaryBackground: Couleur de fond pour les boutons secondaires.
checkbox.background: Couleur de fond des cases à cocher.
checkbox.foreground: Couleur de la coche dans la case.
checkbox.border: Couleur de la bordure des cases à cocher.
dropdown.background: Couleur de fond des menus déroulants.
dropdown.listBackground: Couleur de fond de la liste qui s’ouvre.
dropdown.border: Couleur de la bordure des menus déroulants.
dropdown.foreground: Couleur du texte des menus déroulants.
input.background: Couleur de fond des champs de saisie.
input.border: Couleur de la bordure des champs de saisie.
input.foreground: Couleur du texte dans les champs de saisie.
input.placeholderForeground: Couleur du texte de l’placeholder (le texte qui disparaît quand on écrit).
inputOption.activeBackground: Couleur de fond pour les options activées dans les champs de saisie.
inputValidation.errorBackground: Fond des messages de validation d’erreur.
inputValidation.errorBorder: Bordure des messages de validation d’erreur.
inputValidation.infoBackground: Fond des messages de validation d’information.
inputValidation.infoBorder: Bordure des messages de validation d’information.
inputValidation.warningBackground: Fond des messages de validation d’avertissement.
inputValidation.warningBorder: Bordure des messages de validation d’avertissement.

Listes et arborescences (explorateur de fichiers)

Très important pour personnaliser l’explorateur de fichiers et d’autres vues sous forme de listes.

list.activeSelectionBackground: Couleur de fond de l’élément sélectionné dans une liste active.
list.activeSelectionForeground: Couleur du texte de l’élément sélectionné dans une liste active.
list.dropBackground: Couleur de fond quand on glisse un élément au-dessus de la liste.
list.focusBackground: Couleur de fond de l’élément qui a le focus dans la liste.
list.focusForeground: Couleur du texte de l’élément qui a le focus.
list.focusOutline: Couleur du contour autour de l’élément qui a le focus.
list.highlightForeground: Couleur du texte pour les correspondances surlignées (par ex. lors d’une recherche).
list.hoverBackground: Couleur de fond d’un élément au survol.
list.hoverForeground: Couleur du texte d’un élément au survol.
list.inactiveSelectionBackground: Fond de l’élément sélectionné quand la liste est inactive.
list.inactiveSelectionForeground: Texte de l’élément sélectionné quand la liste est inactive.
tree.indentGuidesStroke: Couleur des guides d’indentation dans l’arborescence (les petites lignes verticales).

Barre d’activité (activity bar)

C’est la barre d’icônes tout à gauche (Explorateur, Recherche, Git, etc.).

activityBar.background: Couleur de fond de la barre d’activité.
activityBar.dropBorder: Couleur de la bordure lors d’un glisser-déposer.
activityBar.foreground: Couleur des icônes (quand elles sont actives).
activityBar.inactiveForeground: Couleur des icônes quand elles sont inactives.
activityBar.border: Couleur de la bordure de la barre d’activité.
activityBarBadge.background: Fond des badges de notification (par ex., le nombre de changements Git).
activityBarBadge.foreground: Texte des badges de notification.
activityBar.activeBorder: Bordure sur le côté de l’icône active.
activityBar.activeBackground: Fond derrière l’icône active.

Barre latérale (side bar)

Cette section est directement liée à votre recherche initiale sur `sidebartitle.foreground`.

sideBar.background: Couleur de fond de toute la barre latérale.
sideBar.foreground: Couleur du texte par défaut dans la barre latérale (par exemple, les noms de fichiers).
sideBar.border: Couleur de la bordure qui sépare la barre latérale de l’éditeur.
sideBar.dropBackground: Couleur de fond lors d’un glisser-déposer dans la barre latérale.
sideBarTitle.foreground: La couleur que vous cherchiez : le titre de la vue (« EXPLORATEUR »).
sideBarSectionHeader.background: Arrière-plan des titres de section (nom du dossier, etc.).
sideBarSectionHeader.foreground: Texte des titres de section.
sideBarSectionHeader.border: Bordure des titres de section.

Minimap

La minimap est l’aperçu du code sur le côté droit de l’éditeur.

minimap.findMatchHighlight: Couleur pour surligner les correspondances de recherche.
minimap.selectionHighlight: Couleur pour surligner la sélection actuelle.
minimap.errorHighlight: Couleur pour surligner les erreurs.
minimap.warningHighlight: Couleur pour surligner les avertissements.
minimap.background: Couleur de fond de la minimap.
minimapSlider.background: Couleur du curseur qui indique la portion de code visible.
minimapSlider.hoverBackground: Couleur du curseur au survol.
minimapSlider.activeBackground: Couleur du curseur quand on clique dessus.

Groupes d’éditeurs et onglets

Permet de personnaliser l’apparence des onglets de fichiers ouverts et des groupes d’éditeurs (split view).

editorGroup.border: Couleur des bordures entre les groupes d’éditeurs.
editorGroup.dropBackground: Fond lors du glisser-déposer d’un onglet pour créer un nouveau groupe.
editorGroupHeader.tabsBackground: Arrière-plan de la barre d’onglets.
tab.activeBackground: Fond de l’onglet actif.
tab.activeForeground: Texte de l’onglet actif.
tab.border: Bordures entre les onglets.
tab.inactiveBackground: Fond des onglets inactifs.
tab.inactiveForeground: Texte des onglets inactifs.
tab.hoverBackground: Fond d’un onglet au survol.
tab.unfocusedActiveForeground: Texte d’un onglet actif dans un groupe qui n’a pas le focus.

Comprendre les formats de couleur et la transparence

Quand vous choisissez une couleur, vous devez utiliser un format que VS Code comprend. Les plus courants sont les formats hexadécimaux.

Voici les types que vous pouvez utiliser :

#RRGGBB : Le format standard, avec deux chiffres pour le Rouge (RR), le Vert (GG) et le Bleu (BB). Exemple : #FFFFFF pour le blanc.
#RGB : Une version courte du précédent. #F0C est équivalent à #FF00CC.
#RRGGBBAA : C’est le format standard avec une information en plus : le canal Alpha (transparence), représenté par AA.
#RGBA : La version courte du format avec transparence.

La transparence est très pratique. La valeur AA va de 00 (totalement transparent) à FF (totalement opaque). Par exemple, si vous voulez un fond de sélection bleu mais qui laisse voir le texte en dessous, vous pouvez utiliser un code comme #007ACC80. Le `80` à la fin rend la couleur semi-transparente.

Vous avez maintenant toutes les clés pour personnaliser en détail votre thème VS Code. La modification de la couleur de `sideBarTitle.foreground` n’est que le début. Tout se passe dans votre fichier settings.json, à l’intérieur de l’objet workbench.colorCustomizations.

N’hésitez pas à expérimenter avec la longue liste de propriétés ci-dessus pour créer un environnement de travail qui vous correspond parfaitement. Il suffit de copier une ligne, choisir une couleur et sauvegarder le fichier pour voir le résultat.