DEV Community

Renato Setoue
Renato Setoue

Posted on • Updated on

Nebula Oni Color Theme: Extensions Guide!

Nebula Oni Color Theme

  • (updated) New setting option for Better Comments

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

Since I've made a color theme, I also ended up customizing the Extensions that use color schemes like Better Comments and Indent Rainbow and trying to match them with the Nebula Oni Color Theme. So, of course, in order to follow this guide you've got to download them first.

Originally, I had made a color scheme for the Bracket Pair Colorization but since I originally launched the theme, Bracket Pair Colorization became part of VSCode - and if I'm not mistaken it's now active by default.

Bracket Pair Colorization

Bracket Pair Colorization

Initially, I was trying to make them different from the Nebula Syntax, so I wouldn't confuse them, but it's hard to use colors that are different enough because if they are close and almost the same color, it kind of bothers me.

These 6 colors have the same hue as the colors from Nebula Syntax and I combine them in a way that the colors I prefer appear more often and that each pair can work well together within the iteration cycle.

It was quite a hassle, but in the end, I think it works well and it's aesthetically pleasing.

Hourglass/Spirograph
Hourglass/Spirograph

Pegasus/Cerberus
Pegasus/Cerberus

Spirograph
Spirograph

Cerberus
Cerberus

Better Comments

I customized the tags that trigger the colors as well as the colors themselves. They are not the same as the Nebula Syntax but they have a similar hue but are brighter, more saturated.

Shortcuts

All triggers need the Shift Key except for the strikethrough (double slash: / / ).

For the other tags, you basically have 4 triggers in the numbers row, a pair on the far left ~ and ! and another on the far right _ and + and then the 4 colors I use the most are near the Right Shift < and > and then ? and :.

But of course, depending on your keyboard layout, it may vary. So if you prefer some other character, you just have to change it on the settings.json file. You might need to reload window for the new trigger characters to take effect.
These are the settings I use:

Option 1

Better Comments

    "better-comments.highlightPlainText": true,
    "better-comments.tags": [
        {
            "backgroundColor": "transparent",
            "color": "#F22468",
            "strikethrough": false,
            "tag": "!"
        },
        {
            "backgroundColor": "transparent",
            "color": "#FFA233",
            "strikethrough": false,
            "tag": "~"
        },
        {
            "backgroundColor": "transparent",
            "color": "#18F26C",
            "strikethrough": false,
            "tag": "<"
        },
        {
            "backgroundColor": "transparent",
            "color": "#E645BD",
            "strikethrough": false,
            "tag": ">"
        },
        {
            "backgroundColor": "transparent",
            "color": "#E6E648",
            "strikethrough": false,
            "tag": "?"
        },
        {
            "backgroundColor": "transparent",
            "color": "#A273FF",
            "strikethrough": false,
            "tag": ":"
        },
        {
            "backgroundColor": "transparent",
            "color": "#6699FF",
            "strikethrough": false,
            "tag": "_"
        },
        {
            "backgroundColor": "transparent",
            "color": "#2EE6E6",
            "strikethrough": false,
            "tag": "+"
        },
        {
            "backgroundColor": "transparent",
            "color": "#737880",
            "strikethrough": true,
            "tag": "//"
        }
    ]
Enter fullscreen mode Exit fullscreen mode

Option 2

Better Comments

    "better-comments.highlightPlainText": true,
    "better-comments.tags": [
        {
            "backgroundColor": "#F22468",
            "color": "#D7DAE0",
            "tag": "!"
        },
        {
            "backgroundColor": "#FFA233",
            "color": "#262A30",
            "tag": "~"
        },
        {
            "backgroundColor": "#0066FF",
            "color": "#D7DAE0",
            "tag": "_"
        },
        {
            "backgroundColor": "#2EE6E6",
            "color": "#262A30",
            "tag": "+"
        },
        {
            "backgroundColor": "#363A3F",
            "color": "#18F26C",
            "tag": "<"
        },
        {
            "backgroundColor": "#363A3F",
            "color": "#E645BD",
            "tag": ">"
        },
        {
            "backgroundColor": "#363A3F",
            "color": "#E6E648",
            "tag": "?"
        },
        {
            "backgroundColor": "#363A3F",
            "color": "#A273FF",
            "tag": ":"
        },
        {
            "backgroundColor": "transparent",
            "color": "#737880",
            "strikethrough": true,
            "tag": "//"
        }
    ]
Enter fullscreen mode Exit fullscreen mode

Indent Rainbow

If you want, you can use the same colors as the Bracket Pair Colorization or just use 4 colors like the default settings for Indent Rainbow.

Indent Rainbow

I tried to use the same colors as the Bracket Pair Colorizer but I don't know, I didn't think it worked that well so I've tried a few combinations and came up with this.

    "indentRainbow.colors": [
        "#4DFFFF14",
        "#FFF04D14",
        "#C3A6FF14",
        "#4DFF9214",
        "#FF99E514"
    ],
    "indentRainbow.errorColor": "#801B3DA3",
    "indentRainbow.tabmixColor": "#1A5580A3"
Enter fullscreen mode Exit fullscreen mode

All these settings are part of the settings.json file, just remember to use , where needed but otherwise, it's just a matter of copy and paste.

Panel and Terminal

The bottom Panel is one of the few sections that have a border - same as the pinned tabs - but it's almost imperceptible, it's just enough so you can differentiate where it ends and where the editor starts, making it look like they are on top of the editor.

I tried to select colors that are easy to read but it's still compatible with terminal customizations like ZSH shell.

For more information on how to customize it, I've followed this tutorial that has instructions for Windows, Mac and Linux.

Terminal

My Settings

    "debug.console.fontFamily": "Liga Meslo LG M DZ",
    "terminal.integrated.cursorStyle": "line",
    "terminal.integrated.cursorWidth": 2,
    "terminal.integrated.fontFamily": "Liga Meslo LG M DZ",
    "terminal.integrated.fontWeightBold": "normal",
    "terminal.integrated.lineHeight": 1.1,
Enter fullscreen mode Exit fullscreen mode

I use these settings but MesloLGS NF, Hack NF and FiraCode NF are also good font options. For more information check Nerd Fonts.

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:

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

Thanks,

[ psudo.dev ]

Top comments (1)

Collapse
 
psudo-dev profile image
Renato Setoue

My next post will be about syntax customization, semantic tokens, textmate tokens, etc. How to use the tools VSCode provides so you can also make your own Color Theme.