Adjusting Themes

00:00 Once you’ve installed the extension and checked it out how your code looks with the extension, you’re good to go. But maybe there are some minor adjustments that you would love to do with this theme.

00:12 And that’s where the settings for VS Code come into play again, because there you can actually add adjustments to an installed theme on top, which is cool to adjust some slight details of a theme. As so often, the VS Code documentation got you covered.

00:29 There you can find all settings that you can use to adjust the colors of your theme. For example, window border, text color, and so on. And maybe you remember when we were looking at the Dobri theme that they actually had a little code snippet there where they showed you how you can adjust the Visual Studio Code border and have the suggested color for every theme there.

00:55 So let’s go ahead and grab that whole thing. I will talk more about it in a second.

01:02 Copy it and paste the whole JSON object at the end of your settings.json

01:09 and once you hit Save, well, not much happens because apparently the theme uses the color that we’re using here. But to see it in action, let’s investigate it a bit more.

01:21 And here for now, I’m just interested in one setting so I remove the rest and then I will talk a bit more about this setting.

01:31 To make individual adjustments to an installed theme, you can use the workbench.colorCustomizations property that’s lowercase color and customizations with an uppercase C.

01:43 And in there you can use all the things that you just saw in the VS Code documentation. For example, editorGroupHeader.tabsBorder. That’s also in camel case, that means lowercase E at the beginning and then an uppercase G, and then uppercase H for GroupHeader and lowercase tabs with an uppercase B for Border.

02:06 So editorGroupHeader.tabsBorder. And then as a value, you can choose a color often in hex code, but you can also use RGB for this. One nice thing about VS Code is when you’re working with colors is that they have this little square next to it and once you click it, you can actually select your own color.

02:27 Now let’s see if something changes here.

02:31 Let’s go for a nice Pythonic green, make it a little bit poppy,

02:39 and then save it. And now you see that the top bar below the tabs change to this green, so that way you can make nice little adjustments to a theme, which is cool because with all the options that VS Code offers, you can basically take a theme that you like and really fine-tune it for your liking.