Renato Setoue

Posted on Aug 17, 2023

How to Customize or Make your own VSCode Color Theme

#vscode #colortheme #nebulaonitheme #tutorial

So far I've been talking about how you can modify the Nebula Oni Color Theme, but this time it's a quick guide on how to customize the VSCode - both the Workbench and the Syntax.

This knowledge should also be enough to make your own Color Theme! Or at least that's how I started. If you haven't read yet, you can check other articles from this color theme series here.

Customizing your VSCode

For either the Workbench or the Syntax customization, you have the option to make changes that affect any theme you use or make changes specific to a theme option.

All Themes

You can set it for all themes:

"customizations": {
    "rule1": "color",
    "rule2": "color"
}

Specific Theme

When you change your settings, just substitute NAME-OF-THE-THEME by the name that appears on Setttings > Workbench > Appearance > Color Theme Menu. This way you will only target a specific color theme.

For example: [Nebula Oni (Hourglass)].

"customizations": {
  "[Nebula Oni (Hourglass)]": {
    "rule1": "color",
    "rule2": "color"
  }
}

Oni UI

These settings change the VSCode Interface. For more information, check the VSCode documentation for color theme customization.

"workbench.colorCustomizations": {
  "[NAME-OF-THE-THEME]": {
    "foreground": "#B4BBC8",
    "selection.background": "#5124B3A6",
    "editor.background": "#262A30"
  }
}

Another option that might help you with the Workbench customization is using the Command Palette and Generate Color Theme From Current Settings.

For the workbench, there are a lot of hidden and commented settings because it includes the settings from all the extensions that somehow modify the workbench.

For the syntax, it's a good starting point but not as useful since it doesn't copy exactly the theme you are using but it's kind of an interpretation of it. For instance, it might not include the semantic token and they are better to catch the exceptions or make the tokes less verbose.

Nebula Syntax

If you want to customize the syntax colors, you have two options depending on what you are targeting. Your main tool will be the Developer: Inspect Editor Tokens and Scopes and the settings.json file.

Just open your Command Palette and search for it. You can target a certain parameter by either targeting Semantic Token or TextMate Token.

If there is a conflict between Semantic Token or TextMate Token, VSCode will probably give the Semantic Token priority and it will override the TextMate Token color rule.

Font Style

For fontStyle you can choose regular, italic, bold or underline or just combine them underline italic or bold italic.

{
  "fontStyle": "underline bold italic"
}

Semantic Token

In this example, the function is colored by the function Token Type, a more general parameter, but you can also target it by adding a Token Modifier like function.declaration or function.readonly if you want to be more specific.

Semantic Token Example

"editor.semanticTokenColorCustomizations": {
  "[NAME-OF-THE-THEME]": {
    "rules": {
      "function.declaration": {
        "foreground": "#2FDE73",
        "fontStyle": "bold italic"
      },
      "function": "#2FDE73" // if it's just the foreground
    }                       // you can just use it as a String
  }
}

You can also target by language:

"variable.readonly:java":"#4FE0E0" // only for Java

Or by Token Modifier:

"*.defaultLibrary": {
    "fontStyle": "bold" // all defaultLibrary will be bold
  }

More Info (Semantic Tokens)

Semantic Highlight Guide

TextMate Token

On TextMate you can either specifically target a textmate scope like entity.name.function without the file extension, which will target all functions for all languages or you can change something specific for a language like entity.name.function.js, which will only affect Javascript.

Into the scope you can either put the string directly or use multiple textmates strings inside an array. You can also put multiple textmate into a single string if you separate them by a comma, but I wouldn't recommend that.

You can also chain scopes to be more specific like source.js meta.function.arrow.js entity.name.function.js. The best way is to try and test it.

TextMate Token Example

"editor.tokenColorCustomizations":{
  "[NAME-OF-THE-THEME]": {
    "textMateRules": [
      { // you can target specific file extension
        "scope": ["source.js meta.function.arrow.js entity.name.function.js"],
        "settings": { 
          "foreground": "#FF9EE7"
        }
      },
      { // or you can target all languages
        "scope":["entity.name.function", "storage.type"],
        "settings": {
          "foreground": "#D3D1EB",
          "fontStyle": "regular"
        }
      }
    ]
  }
}

With this, you should be able to not only modify a color theme to your liking but also try to make your own color theme!

More Info (TextMate Tokens)

Syntax Highlight Guide

Help Support Nebula Oni Color Theme

If you want to support this theme, would you consider:

sharing this theme with friends and colleagues
rating it on Visual Studio Code Market Place and Open VSX Market Place
giving it a star on Github

And if you really liked this theme, would you consider buying me a coffee?

Thanks,

[ psudo.dev ]

DEV Community