This post was originally posted on my blog Brownhu. site

I used One Dark Pro all the time and then switched to the Material Theme Palenight and then Dracula. I always feel that some color scheme is strange (too busy), so I wrote a VSCode dark theme: Duang, called Duang because it is very black, very bright, very soft….

You can download the experience here

Making here

If you have a preference for your own unique style of editor, but none of the thousands of themes are entirely to your taste, then follow the process below to create your own theme.

Register your developer account and configure tokens

If you have installed other VSCode themes, you should know that all themes belong to VSCode plug-ins. The essential tool for developing plug-ins is VSCE, which is the official plugin management tool. All plug-ins are distributed through this tool.

If your English is good enough, it is recommended to read this article on VSCode’s official website to learn the whole process from applying for an account to publishing a plug-in. It is very detailed. Of course, you can also follow the process behind me.

Install vsCE globally first:

npm install -g vsce
Copy the code

Then you need to register a account, address in this: Azure enterprise Services | Microsoft Azure

After login, first create a new public project:

To get your Personal Access Tokens, click on the picture in the upper right corner and click On Security.

Give your token a name and the maximum maturity can be set to one year.

Click to view all the configuration items, go to Marketplace and select Acquire and Manage:

Click Create to copy the generated token, and then use the VSCE we just installed to Create a new publisher.

Vsce Create - PublisherCopy the code

You will be prompted for name, email, and the token you just copied.

Now you can log in with the following command:

Vsce Login (publisher's name)Copy the code

So that’s the first step, don’t get too fussy, because we only need to configure this once, and we don’t have to repeat this every time we develop the plug-in.

If you encounter a problem not mentioned in the article, I continue to recommend that you read these two official articles

  • Create account
  • An expansion

Use scaffolding to generate basic plug-in code

Then we need to install a scaffold tool:

npm install -g yo generator-code
Copy the code

Then run the following command 👇, which generates a basic set of plug-in code in any directory:

yo code
Copy the code

We are going to develop a Theme, so select a New Color Theme, and you will be asked if you want to create a New Theme or import it from an existing Theme.

And then we’ll ask you some questions:

  • The plugin name
  • identifier
  • Description (this can be changed later in package.json)
  • Name of publisher (see previous)
  • This is the name of the plug-in for the user
  • Is the theme dark or light or high contrast

This will then generate a basic set of theme plugin code for us. By this point we are 80% done, the only thing left to do is to change the JSON file under the themes build directory, but….

Modify the JSON file under Themes

The seemingly simple thing is actually the most difficult in my opinion, because it is really difficult to design a good-looking theme and match colors!!

A lot of colors I thought would be very nice, but to improve like a shit….

em….. digress

First open the generated directory with VSCode and see the structure as follows:

Later we will start our work in themes json file, don’t be afraid, we don’t need to look through the hundreds or thousands of lines of json file meaning.

First let’s go ahead and debug mode to see what the theme generated automatically by the script looks like:

Clicking debug will automatically open a new VSCode window showing the preset theme.

Next Command + Shift + P type Developer: Inspect TM Scopes

Now you can see where the color configuration for each character in the file is, just search the JSON file for the corresponding configuration.

If you’re not used to it, you can even open the same developer tools as Chrome, with shortcut keys option + Command + I

However, I recommend using the first method, because developer tools sometimes find colors, but you can’t find configuration items.

The color scheme

If you don’t know what to do and you don’t want to change a few colors, take a look at my color scheme suggestions:

First of all, my advice is to directly copy the JSON files corresponding to your favorite or mature themes, such as One Dark Pro, Material Theme Palenight, Dracula

There are several reasons for this:

  1. Scaffolding configuration items are not complete, for example, the bottom status bar, sidebar and even cursor color is not available, but the more mature theme with more downloads are configured, we just take it and replace the corresponding color in the whole world, there is no need to go to the official website to find the corresponding configuration items.
  2. Not every type of character with a color, many types are reuse the same color, but the corresponding relationship is not easy to find, so if we see a change to a very easy to change the mess, so copy after each change color, must be global replacement, not just change one!!
  3. You might have a theme you liked, but there were some elements of the theme you didn’t like, and that would have saved you a lot of work.
  4. You can borrow some of the theme colors, or the overall style, because it’s all in the JSON file, so you can easily find it.

So the question is, where can I find json files for those themes?

There are almost all of the famous VSCode themes, you can click on github to see their json files, you can clone the entire project, or you can just copy json.

Notice, don’t copy it all, just copy itcolors å’Œ tokenColorsThat’s it.

As for the selection of color here recommend several websites for your reference:

  1. Colorable
  2. colorsafe
  3. Adobe Color CC