DEV Community

Renato Setoue
Renato Setoue

Posted on • Updated on

Nebula Oni Color Theme: (NEW) Dimmed Syntax Brightness

Nebula Oni Logo

PS: I understand that depending on your background color or color theme on, you might not notice a big difference - and all images might pretty much look alike -, so the best way is to actually test it on VSCode itself. So give it a try and see if this is for you or not.

This one feat is long overdue, when I first launched Nebula Oni Color Theme. I remember showing it to my sister because her boyfriend is a developer - and has dev friends as well. It was my first project and I wanted some feedback.

Although they did like it, complimented the extensive documentation and the work I put on it, my sister's boyfriend said it was too bright for him, that he was used to less contrasty and darker overall colors. Something that I didn't think about when I was making it because when I looked for themes, they were, in general, simply normal dark themes and some high-contrast themes.

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

Normal vs Dimmed in Javascript

I should have created this option back then when the code was still fresh in my mind but after months working on this, I was tired and just wanted to be done with it. So months had passed and when I thought about finding a way to implement it, I wasn't so familiar with Javascript anymore - I was studying C - and much less with the VSCode API. It looked like too much work.

Now more than two years have passed and here we are, I'm back at studying programming after a forced hiatus and I decided it was time to implement the Dimmed Syntax Colors - but also as an exercise.

VSCode Menu Settings

As any other menu option for Nebula Oni Theme, you type "nebula oni" on VSCode settings and there will be an option for the Dimmed Syntax Color.

VSCode's menu

To be honest, this is not something I will be using but it's another option to have and maybe some of you do prefer it, even more when working at night, I don't know.

The colors are about 10~15% darker - and I say like that because simply making it equally darker doesn't work well for colors. You can also use darker background colors with it so you get a bit of the contrast back but the overall colors will be darker.

Normal vs Dimmed

In this first example you have the same Grey Background, the one on top has the Normal Syntax Brightness while the other is Dimmed.

JSON - Normal Brightness

JSON - Dimmed Brightness

Different Background

In this next example the second one isn't just using the Dimmed option but also with a Dark Grey Background. This increases the contrast to similar levels to the Normal Syntax Brightness with Grey Background, but the overall theme is darker.

Markdown - Normal Brightness

Markdown - Dimmed Brightness

Four Different Contrast Levels

Finally, we have all the contrast level options.

Darker Background with Normal Syntax Brightness for high-contrast settings.

High Contrast

Normal Background and Normal Syntax Brightness or Darker Background with Dimmed Syntax Brightness for a middle of the pack contrast level.

Grey Background - Normal

Dark Grey Background - Dimmed

And for low-contrast, just combine Dimmed Syntax Brightness with Normal Background Color.

Low Contrast

Help Support Nebula Oni Color Theme

If you want to support this theme, would you consider:

And if you really liked this theme, would you consider buying me a coffee?


[ ]

Top comments (0)