Nebula Oni Color Theme: Extensions Guide!
Tags: vscode, colortheme, nebulaonitheme, tutorial
Published: 2023-08-16 15:19:51


![Nebula Oni Color Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/592p2p3q0ip0lo8zhwje.png)

- (updated) New setting option for `Better Comments`

If you haven't read yet, you can check other articles from this color theme series [here](https://dev.to/psudo-dev).

Since I've made a color theme, I also ended up customizing the Extensions that use color schemes like **Better Comments** and **Indent Rainbow** and trying to match them with the [Nebula Oni Color Theme](https://tiny.cc/nebula-oni). So, of course, in order to follow this guide you've got to download them first.

Originally, I had made a color scheme for the **Bracket Pair Colorization** but since I originally launched the theme, Bracket Pair Colorization became part of VSCode - and if I'm not mistaken it's now active by default.

![Bracket Pair Colorization](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj9c78aklq7tnwvopdci.png)

## Bracket Pair Colorization

Initially, I was trying to make them different from the **Nebula Syntax**, so I wouldn't confuse them, but it's hard to use colors that are different enough because if they are close and almost the same color, it kind of bothers me.

These **6 colors** have the same **hue** as the colors from **Nebula Syntax** and I combine them in a way that the colors I prefer appear more often and that each pair can work well together within the iteration cycle.

It was quite a hassle, but in the end, I think it works well and it's aesthetically pleasing.

`Hourglass/Spirograph`
![Hourglass/Spirograph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsek8e0w7gsw9ejmwwe1.png)

`Pegasus/Cerberus`
![Pegasus/Cerberus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2b2u2b32w6kzy43a0mp.png)

`Spirograph`
![Spirograph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5cx7i7giswxryyrbii4.png)

`Cerberus`
![Cerberus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmzieyk48qhyrqpilrnm.png)

## Better Comments

I customized the tags that trigger the colors as well as the colors themselves. They are not the same as the **Nebula Syntax** but they have a similar hue but are brighter, more saturated.

![Shortcuts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7jjn0kwxg0vffqsdx28.png)

All **triggers** need the **Shift Key** except for the ~~**strikethrough**~~ _(double slash: **/ /** )_.

For the other tags, you basically have 4 triggers in the **numbers row**, a pair on the **far left** `~` and `!` and another on the **far right** `_` and `+` and then the 4 colors I use the most are near the **Right Shift** `<` and `>` and then `?` and `:`.

But of course, depending on your keyboard layout, it may vary. So if you prefer some other character, you just have to change it on the `settings.json` file. You might need to `reload window` for the new trigger characters to take effect.
These are the settings I use:

### Option 1

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0ezfwooej0p91yvf35o.png)

```json
	"better-comments.highlightPlainText": true,
	"better-comments.tags": [
		{
			"backgroundColor": "transparent",
			"color": "#F22468",
			"strikethrough": false,
			"tag": "!"
		},
		{
			"backgroundColor": "transparent",
			"color": "#FFA233",
			"strikethrough": false,
			"tag": "~"
		},
		{
			"backgroundColor": "transparent",
			"color": "#18F26C",
			"strikethrough": false,
			"tag": "<"
		},
		{
			"backgroundColor": "transparent",
			"color": "#E645BD",
			"strikethrough": false,
			"tag": ">"
		},
		{
			"backgroundColor": "transparent",
			"color": "#E6E648",
			"strikethrough": false,
			"tag": "?"
		},
		{
			"backgroundColor": "transparent",
			"color": "#A273FF",
			"strikethrough": false,
			"tag": ":"
		},
		{
			"backgroundColor": "transparent",
			"color": "#6699FF",
			"strikethrough": false,
			"tag": "_"
		},
		{
			"backgroundColor": "transparent",
			"color": "#2EE6E6",
			"strikethrough": false,
			"tag": "+"
		},
		{
			"backgroundColor": "transparent",
			"color": "#737880",
			"strikethrough": true,
			"tag": "//"
		}
	]
```

### Option 2

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pl5hp1b5zcyddxznt5x.png)

```json
	"better-comments.highlightPlainText": true,
	"better-comments.tags": [
		{
			"backgroundColor": "#F22468",
			"color": "#D7DAE0",
			"tag": "!"
		},
		{
			"backgroundColor": "#FFA233",
			"color": "#262A30",
			"tag": "~"
		},
		{
			"backgroundColor": "#0066FF",
			"color": "#D7DAE0",
			"tag": "_"
		},
		{
			"backgroundColor": "#2EE6E6",
			"color": "#262A30",
			"tag": "+"
		},
		{
			"backgroundColor": "#363A3F",
			"color": "#18F26C",
			"tag": "<"
		},
		{
			"backgroundColor": "#363A3F",
			"color": "#E645BD",
			"tag": ">"
		},
		{
			"backgroundColor": "#363A3F",
			"color": "#E6E648",
			"tag": "?"
		},
		{
			"backgroundColor": "#363A3F",
			"color": "#A273FF",
			"tag": ":"
		},
		{
			"backgroundColor": "transparent",
			"color": "#737880",
			"strikethrough": true,
			"tag": "//"
		}
	]
```

## Indent Rainbow

If you want, you can use the same colors as the **Bracket Pair Colorization** or just use 4 colors like the default settings for **Indent Rainbow**.

![Indent Rainbow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0cepqe16patdsofdtwa.png)

I tried to use the same colors as the **Bracket Pair Colorizer** but I don't know, I didn't think it worked that well so I've tried a few combinations and came up with this. 

```json
	"indentRainbow.colors": [
		"#4DFFFF14",
		"#FFF04D14",
		"#C3A6FF14",
		"#4DFF9214",
		"#FF99E514"
	],
	"indentRainbow.errorColor": "#801B3DA3",
	"indentRainbow.tabmixColor": "#1A5580A3"
```

All these settings are part of the `settings.json` file, just remember to use `,` where needed but otherwise, it's just a matter of copy and paste.

### Panel and Terminal

The bottom **Panel** is one of the few sections that have a border - same as the pinned tabs - but it's almost imperceptible, it's just enough so you can differentiate where it ends and where the **editor** starts, making it look like they are on top of the **editor**.

I tried to select colors that are easy to read but it's still compatible with terminal customizations like **ZSH shell**.

For more information on how to customize it, I've followed this [tutorial](https://medium.com/@shivam1/make-your-terminal-beautiful-and-fast-with-zsh-shell-and-powerlevel10k-6484461c6efb) that has instructions for **Windows**, **Mac** and **Linux**.

![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3isnao121umg8thzz4x.png)

### My Settings

```json
	"debug.console.fontFamily": "Liga Meslo LG M DZ",
	"terminal.integrated.cursorStyle": "line",
	"terminal.integrated.cursorWidth": 2,
	"terminal.integrated.fontFamily": "Liga Meslo LG M DZ",
	"terminal.integrated.fontWeightBold": "normal",
	"terminal.integrated.lineHeight": 1.1,
```

I use these settings but `MesloLGS NF`, `Hack NF` and `FiraCode NF` are also good font options. For more information check [Nerd Fonts](https://www.nerdfonts.com/).

## Help Support Nebula Oni Color Theme

To learn more about the **Nebula Oni** Color Theme or how to further customize it, take charge and change colors for the Semantic Tokens and Text Mate Tokens yourself, check out this [post](https://dev.to/psudo-dev/how-to-customize-your-vscode-color-theme-4ke1-temp-slug-5188670?preview=132b20153793cc3c62208324b113d4bf7c4b17fc10ab91aa3427b56658bf315bca4dff5e65bf77952e40cd7a7e3e59302c10e5661b1b9efb998e11d8).

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) ]