How to Customize or Make your own VSCode Color Theme
Tags: vscode, colortheme, nebulaonitheme, tutorial
Published: 2023-08-17 23:16:39

So far I've been talking about how you can modify the [Nebula Oni Color Theme](https://tiny.cc/nebula-oni), 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](https://dev.to/psudo-dev).

## 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:

```json
"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)]`.

```json
"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](https://code.visualstudio.com/api/references/theme-color).

```json
"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`.

```json
{
  "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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kbv3fxnakfbtriezj0e.png)

### Semantic Token Example

```json
"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:

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

Or by `Token Modifier`:

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

#### More Info (Semantic Tokens)

[Semantic Highlight Guide](https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide#semantic-token-classification)

---

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kbv3fxnakfbtriezj0e.png)

### TextMate Token Example

```json
"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](https://code.visualstudio.com/api/language-extensions/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](https://marketplace.visualstudio.com/publishers/psudo-dev) and [Open VSX Market Place](https://open-vsx.org/extension/psudo-dev/nebula-oni-theme)
- giving it a _**star**_ on [Github](https://github.com/psudo-dev/nebula-oni-theme/)

And if you really liked this theme, would you consider [buying me a coffee?](https://buymeacoff.ee/psudodev)

Thanks,

[ [psudo.dev](https://github.com/psudo-dev) ]