VISUAL STUDIO CODE THEME ACCENT WINDOWS

VISUAL STUDIO CODE THEME ACCENT WINDOWS

You will see your editor open up two windows in a side-by-side split view – the changes that you make will be on the right of these two editors. To start modifying your workbench settings in VS Code, open up Code and click File > Preferences > Settings. It’s been a huge help for me in terms of choosing themes and various accent shades/highlights, and gives you a variety of different methods for choosing your colors. Whenever I have to choose colors for a project, I turn immediately to Paletton, an online site that provides a really handy UI for picking out complementary color sets.

The first thing that I did was figure out what kind of color theme I wanted to do – which involved picking out colors! I knew that I wanted to keep my dark color theme as the base, so one of my first decisions involved finding the accent colors that I would use for my editor bars and ultimately, the syntax highlighting. In the `workbench` settings, you can pick and choose different colors to use for each component of the editor, which I’ll break down further in this post If you look at the Microsoft theme color reference documentation for VS Code, it can be overwhelming (I certainly found it to be!) so I’ve also included a list of what I customized below, which hit the main areas for my desired changes. Visual Studio Code has a workspace file that you can customize with your own settings for your editor and project preferences, which is the primary mechanic for customizing your own color theme.

Visual studio code theme accent