VS Code Themes

[00:00:00]
>> Mike North: When dealing with theming you can have two kinds of themes that work. One is a color theme. And I will show you what that looks like. So I just did shift command P and then if you just search for a theme, you will see you get to color theme and color icon theme

[00:00:19]
>> Mike North: And so, you can actually go up and down, and it should update sort of in real time with whatever you are asking for.
>> Mike North: You also get a file icon theme. And let's
>> Mike North: Let's look at how that appears. Notice I've got icons to the left here.

[00:00:44]
And just because I've named these files in a particular way they get a special icon. Like client has a tiny little laptop and a mobile device.. Server has a big tower. Box there. Webpack has its own icon, and those are their own themes.
>> Mike North: And you can pick what you want, so you see this is like the one that ships the Visual Studio Code.

[00:01:08]
This is a ridiculously popular one, VSCode Icons. It probably is by far the most downloaded extension. It's got like 3 million Downloads total which is huge for something like this. So you get to pick what you want, setti is something that's sort of is a, it was popular with,

[00:01:33]
>> Mike North: I think that comes from Adam but, you see, we've got, like, some file icons here. The folders don't get icons, it's a little bit more, sort of, minimal, if what I had going on there was a little bit too busy for you. So, I was going to go through, like, the ability to define your own theme, so that we could each build our own little extension and install that as our own color scheme.

[00:01:57]
The good news is you don't have to do that anymore. As of two weeks ago, you can do this right in your settings, you can pick a base theme that you're interested in. And you can do whatever you want in terms of colors right there in your own configuration, without having to worry about making it a separate project that you then push to the marketplace, and then bring into your Visual Studio Code.

[00:02:17]
And it's like Much less hassle to just do it. And if you wanna share it, just share your settings files or share the subset that's just your colors. Again, tons of options here for customizing things. So I'm not gonna tell you the entire list, IntelliSense will help you out a lot.

[00:02:38]
Let me show you.
>> Mike North: So here I've got,
>> Mike North: Let's do workbench.colorCustomizations, and then in here I'm going to delete that. That is extra.
>> Mike North: We need a comma there. So here you can see we've got a whole array of options to pick from. So we could do something really obvious, editor.background, and we'll make it,

[00:03:12]
>> Mike North: Bright red.
>> Mike North: And it takes effect immediately. And if I remove that and save, It goes away. Really easy to do, one that I have all the time in place. Actually, I don't do much with color customizations. I do something else, though. And that is a Syntax Highlighting Customization.

[00:03:35]
So what you're seeing here, this is a representative example of different things you can do with syntax highlighting. And you see starting from the top we've got comments and types. So that would be any of the types that we were working with before, like constructors, you would see those colored in a particular way with that color, right, comments, it would brighten up.

[00:03:56]
This is one that I have for real in my user settings all the time, because most developers want the comments to sort of be A secondary aspect of their code, meaning it doesn't compete for attention with the function itself. Unless you're training people and presenting on a projector all day, at which point the comments are probably very important.

[00:04:17]
So I will pick a theme and then make sure the comments are appropriately emphasized. So, these are examples of sort of basic things you can do. Here is an example of using text mate rules. So text mate is another editor that defined a really comprehensive and complete way of editing themes at a far more granular level, where you can say.

[00:04:44]
Yeah, I want to apply the following styles to just variables when they are arguments to functions or parameters. And only then should you make them bold and red.
>> Mike North: So you have far more knobs to turn once you get into these text-made styles. And then finally down here, it's an example of, maybe we don't wanna change the color of something, but we can change its style and we will see why that might be interesting in a moment.