Nebula Oni Color Theme: Settings Walkthrough!
Tags: vscode, colortheme, tutorial, nebulaonitheme
Published: 2023-08-14 20:07:10


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

Last time I made a [post](https://dev.to/psudo-dev/my-first-project-making-a-vscode-color-theme-306i) talking about my first project, the [Nebula Oni Color Theme](https://tiny.cc/nebula-oni) for Visual Studio Code. If you haven't read yet, you can check other articles from this color theme series [here](https://dev.to/psudo-dev).

As I explained, it's different than most Color Theme and most users are not used to a Color Theme that can be customized using **VSCode Settings Menu**. So in this post, I will go into more detail on how to customize and change your settings.

First, we need to go to the settings and either scroll down or simply type "Nebula Oni" and you should be good to go. I'll go through the settings by what I assume makes more sense, first **Oni UI** and then **Nebula Syntax** - because VSCode has changed the order of the settings before.

`Main Color: Sakura/Background Color: Glacial Blue`
![Nebula Oni Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c34721cx7ra4wcrhwxs6.png)

## Oni UI

There are a lot of small details and visual hints that can make your life a lot easier when interacting with an interface. So I've tried my best to combine them and enhance the **UX/UI** of the **Visual Studio Code**.

I find something that can be improved, I will try it, test it, change it, tweak it until it feels right - or quite, because there is always something new.

### Main Colors

You have **six** different options for your **Main Colors** and combined with the different **Background Colors**, you can mix and match it, adding your own flair to **Oni UI** and customize the **Nebula Oni Theme** to your taste.

![Main Colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h0lex1nk2ly4hbx4wog.png)

I separated them into pairs - **Bumblebee/Lavender**, **Sakura/Mint** and **Peach/Aqua** -, each color has 2 different tones, although mostly imperceptible. For the pair, one color becomes the **preformatted text** color of the other while both share the same **text selection** color.

### Background Colors

There are **six** options for the background colors. **Grey** and **Dark Grey**, **Blue** and **Glacial Blue**, **Purple** and **Deep Purple**. That way you can choose different contrast-ratio for your theme depending on your preferences and working environment lighting.

![Background Colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yrfl2p44cz75v8zvkf9.png)

### Selection Highlight and Find Match Highlight

I think that **Selection Highlight** and **Find Match Highlight** are underutilized features because they can make it so much easier to spot whatever you select.

I chose **Violet** because it's an easily identifiable color and it was the color that provided the best contrast for all the different text colors. So if you select a word, you can quickly identify other instances of the same word in your code.

![Ultra Violet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgkbuoyt4pd1yzyr6ysc.gif)

When using **Find Match** the matched words will have the **Violet** selection while the word in focus will have a border that matches the color of the **Oni UI** so it helps isolate the selection from the others.

Since not everybody might like using something quite different like the **Ultra Violet** option, you can choose **Clear** and it will be very similar to the default selection.

![Clear](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/owlqqazity5n5po5ircj.gif)

### Focus Border

I was going to simply make it invisible because I didn't see much use for it except making it look like sometimes that border shouldn't be there.

`Main Color: Aqua/Background Color: Purple`
![Focus Border](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03xrcvt0huhfeo50ymy.gif)

It's mainly there for accessibility purposes but also for those that navigate the UI using the keyboard.

I decided to let **Focus Border** active as the default, but you can disable it if you don't need it, it will look cleaner.

---

## Nebula Syntax

I talked about it in my first post but **Nebula Syntax** was born by chance and not by design. Initially, it was just me trying to add purple to a different color palette, but it didn't work and I ended up creating a completely new color palette.

I kept tweaking the colors until I reached a balance and harmony that allowed for more color combinations. I kept trying different combinations until - several pints and comparisons later - I started to see a pattern of what worked and what not so I could create the **Color Schemes**.

### Color Schemes

I wanted the different color schemes to have a different feel from each other instead of a simple color swap. I also wanted to maintain a certain coherence so a color scheme can fall back to their pair, which then falls back to the syntax colors.

There are 4 colors and they are shared among all 4 color schemes. Variables are **White**, Punctuations are **Cyan**, Invalid are **Red** and Deprecated are **Brown**.

**Hourglass and Spirograph** share some colors in common, for instance, Strings are **Blue** while Properties are **Magenta** and Numbers are **Pink**. For **Pegasus and Cerberus**, they have **Green** Strings, Properties are **Purple** and numbers are **Yellow**.

The remaining colors of each **Color Scheme** are completely different between them. There were some colors that I wanted to pair together more often, be it because they worked well together but also to try to reproduce the **_Nebula colors_** throughout the code.

When everything made sense and there was nothing left bothering me, then I finally felt like I finished this project - although that happened several times, and every time there was something new to change or improve, so maybe this will be endless, hopefully not.

I'll show some examples in **Javascript** since it's a popular language but also helps you grasp pretty well how each color scheme looks.

`Syntax: Hourglass/ Background Color: Grey`
![Hourglass](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5r9d0dfswtpuwzn6fesu.png)

`Pegasus/ Background Color: Glacial Blue`
![Pegasus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzj6n7rr7xwqhzkma3j5.png)

`Spirograph/ Background Color: Purple`
![Spirograph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qlopse6me103htepzfj.png)

`Cerberus/ Background Color: Blue`
![Cerberus](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38nz48ioyd62k4dednsm.png)

### Italic

Italics are a bit self-explanatory but in summary, Italics are used for very few parameters like `classes`, `namespace`, special keywords as well as `function parameters`.

### Comments

Sometimes, depending on the time of the day or the lighting, I find the default **grey for comments** a bit harder to read in a glimpse.

But I wanted to have more options so I tried to provide an alternative version of the RGB, but at the same time, I didn't want it to match the colors that were already used in the **Nebula Syntax** - which wasn't very easy.

There are 4 colors for comments, the standard **grey**, but also **violet**, **magenta** and **forest**, each of the colors has a lighter and a darker version, for a total of **8 options**.

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

### Bracket Pair Colorization

For now, first you need to enable the settings. Go to **Settings > Editor > Bracket Pair Colorization**.

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

Since now **VSCode** has its built-in **Bracket Pair Colorization**, I've basically used the same colors I've created for the extension but now it's here natively.

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

I made a different color combination for each pair of **Color Schemes**, that way you have similar colors matching less frequently.

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

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

---

## Not in the Menu but...

There are a few more things I will explain here because it might be useful. These are not things you can change the configuration, but they will help you interact with the VSCode and understand a couple of things a bit better.

### Information Colors

These colors are used across the **mini map**, **editor gutter**, **notifications**, **git decorations** and **warnings** so users can easily identify what's going on in a glimpse.

![Information Colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsnkh7myoj9sw2lwyolj.png)

Each **Background Color** pair requires different colors, **Blue** and **Glacial Blue** have a different kind of **blue** and **purple** which is also different for **Purple** and **Deep Purple**.

### Side Bar, Activity Bar and Command Palette

The **Side Bar** selection blends in with the **Activity Bar** and it makes it easier to know which file is open and what you are selecting. The rest of the files have a different text color, a bit darker but still readable.

The **selected file** has a bright text so it's easier to spot it and it won't be confused by any **git decorations**, **errors colors** or the **inactive files**. **Drag and Drop** uses the same color as the **Activity Bar** but with less opacity.

`Main Color: Lavender / Background: Dark Grey`
![Side Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hv0jhti4huyw5ik1ola.gif)

It was all thought in a way to not get in your way, **Oni UI** tries to make things quicker and a little bit more intuitive.

`Main Color: Sakura / Background: Glacial Blue`
![Command Palette](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dtmbzhbmzlklxeaes7w.gif)

### Tabs

The **colored border** indicates which tabs are opened and the **colored title** shows which tab is **in focus**. The background color of these tabs is the same as the **activity bar**, making it quite easy to know what's selected or open because the tabs pop in front of the others.

`Main Color: Mint / Background: Dark Grey`
![Tabs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tka90gyfqmhgz5m9h1ox.gif)

The **inactive tabs** don't have a border and they have the same color as the **Explorer** and the **Side Bar**, so it doesn't get in your way and it blends into the background. The border that separates the pinned tabs from the other is very subtle.

But when you **hover** over them, the title is highlighted and easier to read, the background gets the same color as the editor but is still not as bright as the active tabs.

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