Creating a Custom Color Theme

[00:00:00]
>> Steve Kinney: Let's talk about building extensions, we have seen extensions can be everything. I mean, the dev container stuff is an extension. Just the ability to regex ES build errors is an extension that just provides a problem matcher. Some pretty little icons are an extension. This theme is an extension that AI toolkit that I said that was a full on app that is better than a lot of there are other electron apps.

[00:00:31]
The AI toolkit built into VS code is good, right? Do you look at a PDF if I happen to click on one cuz I work on the website sometimes and terms of service and stuff like that. All of those things, this ability for the ChatGPT macOS app to hook into VS code is an extension, right?

[00:00:55]
So an extension could be everywhere from a theme. All the way up to an embedded app experience. You could build again, there's a thousand of these apps that let you open a MySQL database and see the tables. You could absolutely build that inside of VS code, right? And just if I click on a SQL life file, give me a UI cuz it's again, like there's no SQL.

[00:01:18]
The libraries there's, I'm using them in these applications you could or for whatever you need to do. Again, I work on the developer tool. So, we are working on building one for just using our own developer tool and all the integrations of like, hey, spin up the server.

[00:01:34]
Spin it down, jump into the web UI to debug, start a workflow. Stop a workflow off, those are all things you can do. And so we'll take a look at a bunch of different options. Now if you want to set up the boilerplate, I guess, could you do it by hand?

[00:01:51]
You could do it by hand. Should you do it by hand? Probably not. So let's talk about scaffolding extension, gonna grab two things, which is Yeoman, which is the CLI command is yo. And Yeoman uses generators to generate projects. And this point code, not just generating code, but like VS code, right?

[00:02:14]
And so far that even it's Visual Studio code. So this is the Yeoman generator for VS code extensions, right? You run this, you have the ability to do yo code, which I've been waiting honestly for multiple hours to say. So, awesome. So I also have some boiler plates in that repo ready to go that you can take a look at.

[00:02:42]
But for funsies, we're gonna run it ourselves. So I'm just in that main directory, yo code. Cool, and you can see all of the different kinds of extensions that you can build, we'll talk about them. New extension is kind of world's your oyster, right? You can go anywhere from building that AI toolkit to VS code pets, right?

[00:03:17]
Yes, I will remind you VS code test still exists. It has not gone on my last three hours, that is a VS code extension we all deserve. You can do that either TypeScript or JavaScript, what's the difference? One has a compile step. I had a one point check, which is I believe that they are all still common JS because electron did not support ES modules forever and ever and ever and ever and VS code is an electron app.

[00:03:47]
So there is a compile step here, so on and so forth. You just wanna make a color theme? Okay, you want to support your new programming language. There's a front end master scores taught by a very handsome instructor building on programming language and then you can make a language server for it too.

[00:04:05]
You just wanna have your code snippets available for either your team cuz you think you did it better than somebody else. Extension packs, web extensions cuz you can run VS Code in the browser. It's a different story for a different day, but if you've ever seen GitHub Code spaces or Code Sandbox or Stack Blitz or a thousand other things.

[00:04:34]
Monaco is the name of the editor inside VS Code. You can just put that in a browser, it's so cool. Notebook renders are like, if you've ever seen like Python, Jupiter, is it Jupiter or Jupyter? I've never said it out loud before in my life.
>> Speaker 2: Jupyter.
>> Steve Kinney: It's gotta be Jupiter, I'm gonna be really sad.

[00:04:54]
I'm pretty Jupiter and then I said it.
>> Speaker 2: Spell Jupyter, but.
>> Steve Kinney: Yeah, I've said Jupiter privately all the time, but I also said Vite instead of Vite for years. So I don't know what's going on. And you can create any given ones, I already made a color theme extension that's in there, but yeah, you can generate one.

[00:05:14]
You will see some boilerplate, I have a few ready to go, but other than run this generator and put in the pieces of code that have nothing to do with Visual Studio Code, like the ones I have in the repo are the same thing. So let's go ahead and we'll do that instead.

[00:05:35]
So we've got regular expressionists, we've got very cool colors. We're gonna start there and we're gonna take a look at it. And we're gonna open it up in code, that font is so big. How did I end up with this Amazon Q thing? I was talking, I said yes.

[00:05:56]
I regret everything, I'll install it later. I don't even know what it is, cool. So in this case, this is, again, the output of the generator for a VS code extension, which really in this point, if we look at the package JSON, the one of the major things in any VS code extension is, what does it contribute?

[00:06:22]
Right? If it is commands, we saw that we can always assign key bindings to a given command where it would been, workbench.actions or GitHub, dot whatever, temporal, dot whatever, so on and so forth. You can contribute settings, you can get anything that like, what are the ways in which you are extending VS code with this plugin that goes in your package, JSON as a manifest, right?

[00:06:50]
So in this case, we are just contributing a theme, which I have called very cool colors, which is a dark theme. And it is available in /themes/Very Cool Colors-color-theme.json, right? Other tasty notes here is we can see that there is a launch.json, which is using a type we haven't seen before, called extensionHost.

[00:07:18]
This basically gives you the ability to launch the extension in a little real separate version of VS code and play around with it, right? And so if we think about this extension, this is our very simple start here where effectively we've got a package JSON. We got a theme JSON, we got a lot of JSON in here.

[00:07:41]
We don't have anything, but JSON. We got a VS code ignore, which is like, what are the parts that are not part of the extension? It's very similar to an NPM ignore, or, arguably, get ignore, which is like, which are the parts we don't need to publish NPM, which are the parts that should not be bundled in the extension, so on and so forth.

[00:07:58]
But yeah, actually, we just got JSON files, so I can hit F5 and you can see I get a more different version of VS Code. What is fundamentally different about this VS Code? The theme, why? Cuz this is the rando theme that I made. I don't know, it's a theme, this Amazon, IQ is still here.

[00:08:24]
Yeah, is it a good looking theme? No, did I just pick random colors? 100%, do I kind of like it? It's a little retro and I'm kind of into it and it's kind of growing on me.
>> Speaker 3: Does it also change the font colors too?
>> Steve Kinney: Yeah.
>> Speaker 3: Cool.

[00:08:48]
>> Steve Kinney: Yeah, cuz if we look, I mean, it's very subtle. I mean, there's nothing in this file, but.
>> Speaker 3: Nice.
>> Steve Kinney: Yeah, and so I mean, I basically just generated a color palette and kind of ad hoc replaced existing colors with.
>> Speaker 3: What's the steps if you want to publish this on to the world?

[00:09:14]
>> Steve Kinney: Yeah, so there is another tool called VSCE. I think if I just do NPM. VSCE obviously, so now it's been renamed VS code. Okay, the binary is the same.
>> Steve Kinney: So here we can kind of go ahead and you can MPM it or whatever. But basically, I think you run, if I'm not mistaken, you run VSE package and then VSE publish, right?

[00:09:48]
You need an account and stuff like that, but that is the same. It's not dissimilar to NPM, right? And that is why it is also, if we go to the extensions. There's a few where everyone made their own version of it. You know what I mean? Even like night owl, the theme, there's night owl, there's Sarah's, then there's not all black and there's night all theme and there's overnight owl then there's, like, it doesn't take a lot to follow us a theme.

[00:10:27]
[LAUGH] Right which is also the free tidbit themes whatever pick the thing you like extension of like work with Postgres database, choose the one that has the downloads, please. Don't choose the one that is, all the way at the bottom where it's 814 people have ever downloaded it.

[00:10:50]
You know what I mean? I'm very curious what Iron Man theme is. But, for some of these, there you'll see, a lot of copies of a given, like, one, I'm sure, if I type in SQLite, there's this one that's got 3.3 million downloads, and then there's lots of other ones, right?

[00:11:15]
Not say they're bad, but again, the bar, you do not need to get. It's not like getting into the Apple App Store, you gotta sign the thing and pay the however many hundreds of dollars. It's like, NPM, make an account, hit Publish. Yeah, you made extension. Yeah, so, yes, that's a theme, right?

[00:11:37]
And like I said, all I really did was adjust some colors, right? And so if you like a theme or you wanna like, and these are all the various, every, when VS Code looks at your code, again, whatever the language service is, figures out what every token is.

[00:11:57]
Const means this. Is equal, you know what I mean? Figures out what every token is, and then for, obviously panel background makes sense, but for the token colors, comments, comments should be Italic and be this color variables, you get the point right. You kind of tweak the colors to your heart's content.

[00:12:19]
If it's not running, you hit F5. And then when you are in there, you do have to hit command R to refresh and reload the extension. And so for instance, let's say too many windows open. Variables, let's change this to something egregious, sure that should get the point across, right?

[00:12:54]
>> Steve Kinney: All right, now my hello is a deep fiesta red. And you can kind of get a sense that get everything working the way that you want it to get it to work. And that is true of other extensions as well. Let's take a look at another extension.

[00:13:10]
I need to make this, I don't know what Amazon Q is, but it needs to go away. So I'm not setting it up right now. It's the most capable generative AI powered system for building, operating, transforming software. I will definitely play with it later, seems cool. Not right now, I'm busy with my friends.

[00:13:30]
And then you can either close it or let's close some of these. That was very cool colors. You can hit it's the same as the debugger where you can at the stop example from before as well.