Nebula Oni Color Theme: (NEW) Dimmed Syntax Brightness
Tags: tutorial, vscode, nebulaonitheme, colortheme
Published: 2023-09-04 01:01:38


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

> PS: I understand that depending on your background color or color theme on DEV.to, 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](https://tiny.cc/nebula-oni). 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](https://dev.to/psudo-dev).

![Normal vs Dimmed in Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1a1hjbutatayunz5etj.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcemwnr5itt89do6dl43.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4arnfn5ztkn6btjgczeh.png)

![JSON - Dimmed Brightness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cac5nnmcgcc224wsr48.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t609tniq1ey7esoe5knh.png)

![Markdown - Dimmed Brightness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvadm52zdioqqzmwaidf.png)

## Four Different Contrast Levels

Finally, we have all the contrast level options.

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

![High Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uh36705ia6di76mjq3a.png)

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

![Grey Background - Normal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocg03ta3nxb6tu7u9o8q.png)

![Dark Grey Background - Dimmed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8qfvp9rd9p9wsdrp7c4.png)

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

![Low Contrast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lxq9b0wu060t8of85ju.png)

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