Popular Themes & Icon Themes

[00:00:00]
>> Burke Holland: So let's talk about customizing the editor, first, I want to talk to you about themes. There is a very exciting theme happening amongst developers, and it's a trend towards dark themes. You may have heard the dark themes are better for your eyes, has anybody heard that? Nobody's heard that?

[00:00:20]
Okay, good because it's not true.
>> Speaker 2: It's not true?
>> Burke Holland: It's not true. Dark themes are anesthetic, so they look nice, and they're trendy. Which is why we're getting dark mode added to just about everything. But the truth of the matter is if you want a theme that's best for your eyes for reading comprehension.

[00:00:38]
Dark text on a light background, is best. Now there is some conjecture about whether or not a dark theme is better for your eyes late at night. But no screen is good for your eyes late at night, go to bed, work on the code in the AM. But what I'm gonna do is show you some of my favorite light themes because I'm the last person alive using a light theme.

[00:01:02]
So we're gonna look at my favorite light themes, and then we're going to look at some dark themes if you must. And then we're gonna look at some fun themes. So let's look at some of my favorite light themes. To change themes, and I've included most of these themes in this extension pack.

[00:01:18]
You're gonna command palette, which is command or control-shift-P. And Preferences, Color Theme, and one of my favorites is called HopLight. This is HopLight, and let me open a code file here so we can see what that might look like. So you can see all of the code here and the different colors.

[00:01:40]
And this probably looks pretty washed-out on that screen, but there you go. I like this view a lot, I think that HopLight has some really nice colors, it's my favorite light theme. Another one that I use a lot is called Night Owl Light, this one here, this one also looks really, really good.

[00:02:00]
It's got very soft colors, I'm a big fan of this. Let's do another theme, another one is one called Noctis, and we're going to talk about Noctis and dark themes too. But you can have your VS code look like a post-it note, if you want to. If you are a big fan of soft purples this is a good one.

[00:02:17]
I think Hibernus is quite interesting, so some good light themes in there. And then there's one called Men, so there's a Men Dark and Men Light. This is Men light, this is extremely minimalist. So if you watched that documentary on Netflix, the minimalist documentary. Anybody see that minimalist documentary on Netflix?

[00:02:36]
Nobody saw it? It's quite good. My wife came to me afterwards and said, hey, why do we have so many spoons? I'm like cuz there's five people in the house, we need these spoons, don't get rid of the spoons. But if you're minimalist and you only wanna own one spoon this theme is for you, this is the Men theme.

[00:02:51]
Okay, let's look at some dark themes. We got a couple, probably the most popular is called Night Owl, let's see here, there we go. This is a high contrast theme, so it's extremely accessible. It probably looks really good on the projector and right about now my argument about light themes isn't holding up so well.

[00:03:12]
But this theme was made by Sarah Drasner, it looks amazing. If I was gonna use dark theme, this would be the one. The other theme that you might wanna look at is called Cobalt2, so we'll look at that one. There is some idea that a very bright yellow text on a dark blue background is also best for reading comprehension.

[00:03:35]
Although there's no WIRED magazine article to validate that, so I cannot I can't say whether that's true or not. We'll need a very mainstream tech article in order to know for sure if that's true. But this one does a good job of implementing that theme without it looking too gaudy.

[00:03:49]
Because bright yellow text usually looks pretty gaudy. And then we had Noctis which we already looked at. And there's another one called Dracula, which I don't think I installed, but let's go ahead. You can install new themes, just so everybody could see how I did that. Let's go back, Preferences, Color Theme, and then if you are looking for one that's not there, or you scroll down to the bottom.

[00:04:11]
There's Install Additional Color Themes, and just look for Dracula Official, we'll install that. And then we've got two, Dracula, and Dracula Soft. But there we go, it's a popular theme, it's got two million plus downloads, so it's doing all right. So those are some of my favorite themes for dark and light.

[00:04:33]
However, you are an individual and you need to stand out. So if you would like to stand out, I have some options for you. The first one is some people really like Slack, they like it a lot. There is a theme for Slack.
>> Burke Holland: So if you can't get enough Slack, you can put Slack right in your VS Code, and then it's like you never have to leave.

[00:05:03]
You can just not be productive for the rest of your life. Now there's another theme for people who miss the old days, anybody ever use Windows 95? Okay, listen, I got one for you, check this out. There's one called Windows 95. That's a good one, Winter Is Coming is a good one, too.

[00:05:24]
So there's one called win95 that you can check out, oops. So let's install this one, there you go, so all of VS code can look like Windows 95 if you wanna roll that way. Hey, listen, I'm not here to tell you how to live your life. And then there's another one called Hot Dog, yeah, very good one, so let's look at Hot Dog.

[00:05:47]
Is it Hot Dog? I think it's HotDogStand, yeah, there we go, so we'll install that and that'sHotDogStand. Obviously, you want your editor to look like that, who doesn't want that? Everybody wants that, and then Mark sent me one last night, what was it called, Mark?
>> Mark: [INAUDIBLE]
>> Burke Holland: Synth?

[00:06:05]
>> Mark: Wave.
>> Burke Holland: Synthwave, that's right, which kinda looks like the 80s and I'm not gonna lie, I kinda like this. I don't hate it, I'm kind of a fan. What did code files look like? Let's take a look. It's not too bad, so that's Synthwave theme as well.

[00:06:22]
So you have those options there for changing your themes. Now when we talk about themes, and let's get back to a light theme since we want to actually be productive. Let's see, where is Hop Light? Hop Light, there we go. We have color themes in VS code, and we also have icon themes.

[00:06:43]
Icon themes control the icons that are on the left-hand side here. Out of the box, you get icons that look like like this, you can change these by installing new icon themes. So I've given you two in the Extension Pack, one is called Material Icons. So let's look at that we can just search for Icon, Preferences, File Icon, Theme, and switch over to Material icons.

[00:07:07]
And then you can see that our icons have changed quite a bit. I like this one a lot because it changes folder colors depending on the types of files that are in the folder, the name of the folder. See how it says routes and it's got a green folder with a little arrow on it?

[00:07:20]
It's just very good for quickly providing cognition around what's in your project. Another really cool thing about this is, let's do a new file here, it's called this index. Anybody ever used Jade or Pug? It's a templateing language that goes with Express. So if you do have Pug, look, look, y'all, come on, I mean seriously, how can you not love this?

[00:07:43]
So you get a pug file right in your editor. Listen, it's the little things. There is also the fact that Material icons is really made for VS code. So it recognizes things like multiple workspaces, and you'll see this later on if you're using multiple icons. It will actually denote multiple workspaces with circles instead of folders.

[00:08:05]
Otherwise everything looks like a folder, and you can't tell that you're in multiple projects in a workspace. So I would highly recommend Material icons, so would like 20 million people. I don't even know how many downloads it has. Now again though, if you are the kind of person who thinks that you should only have one spoon.

[00:08:21]
Then there is a file icon theme for you, and it's called Chalice icons. So let's look for that Chalice, Chalice icons? How do you spell Chalice? There we go, so let's install this and go to Chalice and then we'll go back and look at our Explorer. And you can see it is extremely minimalist, so just folders and very minimal icons.

[00:08:43]
But some people like this, and that's fine Chalice icon themes is for you. So between color themes and icon themes, we've got you good to go.