Issue #55 (Advanced Workbench Color Customizations)05/10/23
I've talked about many of the ways you can customize VS Code visually, including file icons, editor fonts, terminal fonts, ligatures, the cursor, and others. If you really want to get into advanced ways to customize the look and feel of VS Code, you'll want to look into the
Workbench: Color Customizations option.
If you search for this option in your UI Settings, you'll notice it will direct you to "edit in settings.json", as shown in the image below.
This means any customizations you make have to be written directly in the JSON settings file. When you click this, VS Code will automatically create an object in the JSON file called "workbench.colorCustomizations" and you can start looking for things to customize by triggering IntelliSense (i.e. start typing an opening quote or hit CTRL/CMD-SPACE).
You can scroll through the different values to get an idea of the stuff you can change, which is basically anything in VS Code. Some examples:
- The color of the activity bar (the bar usually found on the left side of your editor where you open folders, extensions, etc.)
- The look of active or inactive tabs for open files
- The different colors used for the icons, error messages, etc. found in VS Code's debugger
Below I'm using VS Code's Darcula color theme, but I've changed the color of the activity bar to a dark purple shade.
These settings, as you can guess, are the same ones used by extension authors who create specific color themes for VS Code. Downloading an extension is naturally much easier than going through all of these to pick your own customizations. But that being said, it can be useful to make small adjustments to themes.
For example, you'll notice when you trigger IntelliSense in the JSON file for colorCustomizations, the top options are things like [Monakai], [Darcula], [Sunburst], etc. You can insert one of these bracketed themes, then choose any of the customization options and your customizations will apply only to the selected theme.
This is the same idea as applying settings to specific programming languages, where you would include the programming language in square brackets, then the settings nested inside that object.
I've only briefly covered what's possible with the color customizations. You can read more about this
in the VS Code docs.
Now on to this week's hand-picked links!
