Last time I made a post talking about my first project, the Nebula Oni Color Theme for Visual Studio Code. If you haven't read yet, you can check other articles from this color theme series here.
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
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.
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.
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.
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.
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
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
Pegasus/ Background Color: Glacial Blue
Spirograph/ Background Color: Purple
Cerberus/ Background Color: Blue
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.
Bracket Pair Colorization
For now, first you need to enable the settings. Go to Settings > Editor > Bracket Pair Colorization.
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
Pegasus/Cerberus
I made a different color combination for each pair of Color Schemes, that way you have similar colors matching less frequently.
Hourglass/Spirograph
Pegasus/Cerberus
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.
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
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
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
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.
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 ]
Top comments (1)
In the next post I'll probably talk about other ways to customize your VSCode experience mainly with Extensions that also use colors, like Better Comments, Indent Rainbow, etc. with the colors and settings I fine tuned to go well with the Nebula Oni Theme, although, it might work with other themes regardless.