- (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
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
Pegasus/Cerberus
Spirograph
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.
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.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": "//"
}
]
Option 2
"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": "//"
}
]
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.
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"
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.
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,
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:
- 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)
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.