My First Project: Nebula Oni Color Theme!

Nebula Oni Color Theme!

Nebula Oni Color Theme for Visual Studio Code was my first anything-coding-or-developer-related-project and it was certainly much more than I could chew at the time... hahahaha...

Although it's just a color theme, it's probably different than 99% of the other color themes out there.

Oni (鬼) is a type of ogre youkai and Nebula Oni Theme has colors from outer space!

I know nobody - but me - will care but each syntax color option is the name of a real Nebula and I chose them based on their colors, shape and name - so I could pair them up. Hourglass and Spirograph are related to shapes while Pegasus and Cerberus are mythological creatures.

It's really silly but I spend some time researching Nebulas for this silly reason alone. Yes, I know... But I came this far, so why not? hahahaha...

If you haven't read yet, you can check other articles from this color theme series here.

---

What makes it different from the others?

First of all, you have a Color Theme with a MENU in the VSCode Settings...

But the main thing is that you can customize the heck out of it!

It has different colors for the background, UI color accents, different combinations for the syntax, comments, and more.

All of that without crowding the Color Theme menu with a list of one hundred variations for the same Color Theme.

(Main Color: Sakura / Background: Glacial Blue)

---

It was never the plan...

It wasn't supposed to be a color theme, it was just me, fresh off the boat, after I finished my first Javascript Course. My color theme of choice was one of the many Atom One Dark Color Theme but I wished some colors were different or behaved differently and that's how I got sucked into this color theme black hole.

(Syntax: Hourglass / Background: Grey)

It started with minor corrections, then bigger corrections, then I decided to try to make my own color theme, rudimentarily changing colors manually in the JSON file.

Then I started messing around with the colors, and created a second color palette, very different from the One Dark - which I called Neon Dark, due to obvious reasons - and at first, that was it. As a commentary, Neon Dark had pretty colors but it was a bit too bright for me, it looked different, so it existed.

(Syntax: Pegasus / Background: Glacial Blue

But then, I was playing around with some combinations of colors that I really liked. I started to put some other colors that worked well together - while also hiding in the syntax the colors that I didn't like as much. Balancing out the brightness, saturation and combinations was HELL, but that's how the Nebula Oni Color Theme started to take shape.

A common theme throughout this whole saga was I naively thinking I was done, just to find out later I wasn't even halfway through.

(Markdown)

The final form of the syntax colors took weeks, trying to make it well-balanced, fine-tuning HEX codes, and making the syntax work for languages I had no idea how they worked - even regex. I would use it and then make one color a bit darker, but then other combinations would be messed up, at the end of that process I just hated all colors in the world.

---

Messing with the UI Colors

(Main Colors)

Initially, I was also definitely NOT going to mess with the UI but it started to itch and I was compelled - by myself - to play around with the UI. While I did that, I found out a lot of different things that many color themes didn't take advantage of.

(Background Colors)

Hiding the focus border, different accents to highlight what's in focus or not, like the files, the tabs, and the sidebar. You could use different ways to highlight text selection, git integration, terminal colors, etc. It was another whole lot of work on a project I thought I was done with.

---

Using the VSCode Menu and allowing User Customization

The last piece of this saga was trying to turn this into a programming project. I wanted users to be able to customize, make their own combinations, and choose what they preferred - just like I wished I could on themes that I used before - but also make it work for me, making anything manually wasn't great at all - and too prone to small mistakes.

This was a whole different beast, there was no tutorial to base it on, I didn't know how to interact with the VSCode API, and I barely knew how to properly code Javascript, how the heck would I make this work?

Persistency, I guess...

(Main: Bumblebee/ Background: Grey)

(Main: Mint/ Background: Purple)

(Main: Peach/ Background: Blue)

(Main: Sakura/ Background: Glacial Blue)

(Main: Lavender/ Background: Dark Grey)

(Main: Aqua/ Background: Deep Purple)

I will spare you guys from all the struggles, suffice to say that I've learned a lot. I can't count how many times I hit a wall that seemed impenetrable, that I had no idea how to even start, but here I am.

I manage to create a way to interact with the VSCode menu and make a color theme constructor from the user's input, how to save their preferences, and even allow them to have Favorite Theme with different settings from the others. So people that had a different preference for a night theme or a high-contrast one didn't have to annoyingly reload the VSCode every time they had to change it.

I was also able to allow different color combinations for comments, also different shades for those that preferred it lighter or darker. But also how to make the theme keep the settings the same after an update - which seems obvious but it wasn't so easy to implement.

---

Final Thoughts

I also made color palettes for other complementary extensions like Bracket Pair Colorization and Better Comments. How to customize your Terminal, use Ligature in Fonts and some other things, which I posted here.

All in all, it was quite a journey, with struggles at each step of the way but also a lot of learning, trying to reverse engineering other extensions to learn how to use the API, and endless hours nitpicking color combinations, it certainly took a lot more time than I anticipated, but the satisfaction of having your first project done is priceless, as cliché as it might be, it's true.

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.

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 ]