DEV Community: psudo-dev

How I ended up creating my own programming font...

psudo-dev — Thu, 02 Oct 2025 19:39:05 +0000

TL;DR

The second version of psudoFont Liga Mono is a programming font with ligatures, inspired by Menlo/Meslo and IBM Plex Mono/Lilex.

If you want to skip the story and just get the font, you can download it here, in the psudoFont Liga Mono repository.

psudoFont Liga Mono was born... twice!

This was what I actually wanted from the get-go, a cohesive font family, with a thinner regular style and an italic that I liked. But I didn't think that I was going to go through all the hustle of creating my own font.

In the end it all came down to not feeling that itch anymore. And that was also how I ended up creating my own color theme for VSCode: Nebula Oni Theme - the theme used to render the code examples in this post.

How did I end up here?

Like I said previously, I was in search of the perfect programming font - for me, of course.

I ended up researching about it because, at the time, I wanted to mix and match two different fonts in one. My go-to font was Menlo/Meslo, but I thought it was a bit too thick, and I liked the italic version of IBM Plex Mono/Lilex, but not the rest of it.

With what I was able to learn how to use parts of Meslo for the regular, bold and bold italic and Lilex for italic. Although they were different, they were close enough to work together, and I thought that was that, the end.

I thought that it would suffice to calm down my itch since the alternative would be to learn how to edit glyphs, redesign lots of them, make them work together, etc. and that would be too much work for another thing that I had no idea where to start.

But I underestimated the itch - and myself too -, so just a month later, I started to work on this new version, this time not just a Frankenstein font but a proper font family.

How to make a font?

I didn't know the answer to that question but then, after some research, I found out that the glyphs were basically an SVG file and that I was able to copy from the font editor to Adobe Illustrator - a software I know better - and edit the vectors there and then copy it back to the font editor.

One of the problems I had was that Lilex had 1000 UPM - think it like 1000 points of resolution - while Meslo had 2048 UPM. You couldn't simply copy one to the other, not to mention, the thickness and italic angles between these two fonts were not the same.

After a few days and hours and hours messing with it, I've changed lots of details and redesigned the glyphs to make it more cohesive between all instances of the font, and I thought I was done.

I had no idea it would take another 2 or 3 redesigns and a month until I was actually done for real.

Learning process

I've learned a lot during the process but copying and redesigning in Adobe Illustrator, exporting SVGs, importing them back to the font editor, etc. That was certainly NOT optimal.

I could say that I jumped the gun a bit, I should have learned how to use the font editor first, but I was too eager to get started that I put that aside for a bit - until I struggled enough that I had no alternative other then actually learning it.

The previous process was very repetitive and time-consuming, which is prone to errors, not to mention that it was harder to make the glyph's curves and corners more consistent.

I also managed to scale Meslo down to 1000 UPM, so I could copy and paste directly from one to the other, which also took a while - but by the end of the project I ended up scaling all the glyphs to 2048 UPM anyway.

In the last version, I had to almost start completely from scratch again, but this time I knew what I was doing, so it was faster and easier. But I still had to review several times until I was satisfied with the result, in other words, until the itch was gone and there was nothing else I wanted to change or revise.

I mostly edited through the font editor, only going to Illustrator for some specific things that were easier to do there. I have to admit that I still don't know how to use the font editor properly, but I've learned enough to get a result that I felt satisfied with.

Design choices

I used Lilex as a base because it would be easier than starting from scratch or making all Meslo glyphs thinner, plus, I would have to adjust the x-height of all characters of one of the fonts.

Lilex has 1000 UPM, so I scaled up all glyphs to 2048 UPM, which seems to be the standard for most new fonts. I had previously scaled down Meslo to 1000 UPM because I was having issues with scaling it up - but after some effort I was able to solve it.

For regular I kept Meslo as a reference but there were also some symbols, marks and even small details that I preferred from Lilex - like the ending's curves and angles - so I used those as well.

Lilex's italic had a lot of sharp corners, so I redesigned them all to be more rounded and smooth. This small detail made me redesigned lots of glyphs. I also changed some characters like w, v, r, {, }, @, 5, 6, 9, etc. Actually, I had to change the numbers in both regular and italic.

Another thing that I didn't like about Liga Meslo LG M DZ were the ligatures combinations for fi, ffi, fl, ffl, etc. They get too close together, I don't like how it looks. So I'm not supporting these ligatures.

Meslo had almost double the glyphs compared to Lilex - which already had more than 1400 glyphs -, and it wouldn't be viable for me to redesign and adjust all these extra characters, so I didn't. They don't affect the overall use, it still supports all Lilex ligatures and symbols and some extras I included.

Is the itch gone?

For now, yes. But who knows, maybe in a few months I'll be back here again, creating version 3.0... NOT! I hope that at best I only have to do minor adjustments and fixes in the future, but no font overhaul.

Considering that when this all started I didn't know how to edit a single glyph, all the challenges in between and 3 redesigns later, I would say I liked the final result.

Although it was inspired by Meslo and Lilex, a lot of glyphs are unique to psudoFont Liga Mono, so I can say it's its own font family. But this seems to be a common practice in the community.

If you've read until here, I appreciate it. I hope you found it interesting. Also, give psudoFont Liga Mono a try, and ultimately, if you really like it, would you consider buying me a coffee to support my work? Thank you! Spread the word!

Examples

Click on the images to see a larger version with more details, the low-res image rendering is pretty bad for texts with dark backgrounds.

TypeScript

(Nebula Oni Theme: Hourglass/Grey)

Python

(Nebula Oni Theme: Cerberus/Glacial Blue)

(Nebula Oni Theme: Spirograph/Purple)

Terminal

My Search for the Best Programming Font

psudo-dev — Mon, 11 Aug 2025 20:48:12 +0000

EDIT (02/Oct/2025): I made a psudoFont Liga Mono 2.0 and it's not a pseudo font anymore, it's an actual redesigned font family! Check this new post where I talk more about it!

Obviously, it's just my preference, so this is quite subjective and nobody has to agree with it. That said, here I talk a bit about my search for the best programming font and how I ended up creating it myself...

I think it wouldn't be fair to say that I created it, it's more like I mixed two fonts together. A pseudo Font Family, like two divorced parents that got together, or maybe just a Frankenstein font(?).

(Nebula Oni Theme: Hourglass/Grey)

The search for THE font...

I've tried many different fonts throughout the years but I kept using Meslo LG, the font based on Menlo by Apple - which on the other hand is based on Bitstream Vera Sans Mono and DejaVu Sans Mono.

I started with Meslo from Nerd Fonts, but then I found out about Powerline and I wanted my terminal to look like that, so I started using a patched version that had glyphs for Powerline.

Soon after that I also found out about ligatures so I've got deep into font research to find a way to have Meslo with ligatures, and luckily, I found another patched version that had both Powerline and ligatures, it's called Liga Meslo LG M DZ.

Could it be?

I kept trying new fonts from time to time, I've played around with the Programming Fonts webpage, downloaded and tested some.

One day, after watching a few videos with someone using IBM Plex Mono, I decided to give it a second look. It was an interesting font, so I tested the ligature version for a little while, it's called Lilex - a pun with Ligature Plex, maybe.

But it wasn't quite it, mainly because of the use of serif in the base, making it looking a bit too stiff, and I still preferred Meslo - despite wanting it to be a bit thinner like IBM Plex Mono.

I really liked the italic parts of the code though, it felt quite different from the regular font. It was less typewriter-like, more elegant. I tried to find a way to use just the italic style, maybe some hidden configuration in Visual Studio Code, maybe an extension, no luck...

Eureka!

Then it struck me, why not do it myself? Some might think that the premise of mixing two different fonts is a sacrilege - maybe it is - but I really wanted to keep using Liga Meslo and just the italics of Lilex...

I thought that the italics of IBM Plex Mono/Lilex was so different than its regular counterpart that it could very well be part of another font. Meslo LG and Lilex height to base ratio are similar, so I decided to give it a try.

I did some research, found out a way to edit the fonts and mix just the parts that I wanted together, and voilà!

psudoFont Liga Mono was born...

You can download and try for yourself here on Github!

(Nebula Oni Theme: Cerberus/Glacial Blue)

Usage

This is the configuration I use on Visual Studio Code:

    "editor.fontFamily": "psudoFont Liga Mono",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,

If you use the font-size 16 or above, I would recommend to play around with line height over 1.5 and see what works best for you.

    "editor.lineHeight": 1.6,

Did I find it?

I don't think my search for the "perfect" font it over though, if I had the time and patience to dedicate myself to it, I would mess around with Meslo, editing the glyphs, and making it a bit thinner, which would be better for bigger font size.

For now, that what if, that itch that made me do this has passed, so I'll enjoy this "new" font family - but you'll never know...

Nebula Oni Color Theme: (NEW) Dimmed Syntax Brightness

psudo-dev — Mon, 04 Sep 2023 01:01:38 +0000

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. 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.

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.

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.

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.

Four Different Contrast Levels

Finally, we have all the contrast level options.

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

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

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

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 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 ]

How to Customize or Make your own VSCode Color Theme

psudo-dev — Thu, 17 Aug 2023 23:16:39 +0000

So far I've been talking about how you can modify the Nebula Oni Color Theme, but this time it's a quick guide on how to customize the VSCode - both the Workbench and the Syntax.

This knowledge should also be enough to make your own Color Theme! Or at least that's how I started. If you haven't read yet, you can check other articles from this color theme series here.

Customizing your VSCode

For either the Workbench or the Syntax customization, you have the option to make changes that affect any theme you use or make changes specific to a theme option.

All Themes

You can set it for all themes:

"customizations": {
    "rule1": "color",
    "rule2": "color"
}

Specific Theme

When you change your settings, just substitute NAME-OF-THE-THEME by the name that appears on Setttings > Workbench > Appearance > Color Theme Menu. This way you will only target a specific color theme.

For example: [Nebula Oni (Hourglass)].

"customizations": {
  "[Nebula Oni (Hourglass)]": {
    "rule1": "color",
    "rule2": "color"
  }
}

Oni UI

These settings change the VSCode Interface. For more information, check the VSCode documentation for color theme customization.

"workbench.colorCustomizations": {
  "[NAME-OF-THE-THEME]": {
    "foreground": "#B4BBC8",
    "selection.background": "#5124B3A6",
    "editor.background": "#262A30"
  }
}

Another option that might help you with the Workbench customization is using the Command Palette and Generate Color Theme From Current Settings.

For the workbench, there are a lot of hidden and commented settings because it includes the settings from all the extensions that somehow modify the workbench.

For the syntax, it's a good starting point but not as useful since it doesn't copy exactly the theme you are using but it's kind of an interpretation of it. For instance, it might not include the semantic token and they are better to catch the exceptions or make the tokes less verbose.

Nebula Syntax

If you want to customize the syntax colors, you have two options depending on what you are targeting. Your main tool will be the Developer: Inspect Editor Tokens and Scopes and the settings.json file.

Just open your Command Palette and search for it. You can target a certain parameter by either targeting Semantic Token or TextMate Token.

If there is a conflict between Semantic Token or TextMate Token, VSCode will probably give the Semantic Token priority and it will override the TextMate Token color rule.

Font Style

For fontStyle you can choose regular, italic, bold or underline or just combine them underline italic or bold italic.

{
  "fontStyle": "underline bold italic"
}

Semantic Token

In this example, the function is colored by the function Token Type, a more general parameter, but you can also target it by adding a Token Modifier like function.declaration or function.readonly if you want to be more specific.

Semantic Token Example

"editor.semanticTokenColorCustomizations": {
  "[NAME-OF-THE-THEME]": {
    "rules": {
      "function.declaration": {
        "foreground": "#2FDE73",
        "fontStyle": "bold italic"
      },
      "function": "#2FDE73" // if it's just the foreground
    }                       // you can just use it as a String
  }
}

You can also target by language:

"variable.readonly:java":"#4FE0E0" // only for Java

Or by Token Modifier:

"*.defaultLibrary": {
    "fontStyle": "bold" // all defaultLibrary will be bold
  }

More Info (Semantic Tokens)

Semantic Highlight Guide

TextMate Token

On TextMate you can either specifically target a textmate scope like entity.name.function without the file extension, which will target all functions for all languages or you can change something specific for a language like entity.name.function.js, which will only affect Javascript.

Into the scope you can either put the string directly or use multiple textmates strings inside an array. You can also put multiple textmate into a single string if you separate them by a comma, but I wouldn't recommend that.

You can also chain scopes to be more specific like source.js meta.function.arrow.js entity.name.function.js. The best way is to try and test it.

TextMate Token Example

"editor.tokenColorCustomizations":{
  "[NAME-OF-THE-THEME]": {
    "textMateRules": [
      { // you can target specific file extension
        "scope": ["source.js meta.function.arrow.js entity.name.function.js"],
        "settings": { 
          "foreground": "#FF9EE7"
        }
      },
      { // or you can target all languages
        "scope":["entity.name.function", "storage.type"],
        "settings": {
          "foreground": "#D3D1EB",
          "fontStyle": "regular"
        }
      }
    ]
  }
}

With this, you should be able to not only modify a color theme to your liking but also try to make your own color theme!

More Info (TextMate Tokens)

Syntax Highlight Guide

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 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 ]

Nebula Oni Color Theme: Extensions Guide!

psudo-dev — Wed, 16 Aug 2023 15:19:51 +0000

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

Nebula Oni Color Theme: Settings Walkthrough!

psudo-dev — Mon, 14 Aug 2023 20:07:10 +0000

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 ]

My First Project: Nebula Oni Color Theme!

psudo-dev — Fri, 11 Aug 2023 02:47:16 +0000

Nebula Oni Color Theme!

Nebula Oni Color Theme for Visual Studio Code was my first anything-coding-or-developer-related-project and it was certainly much more than I could chew at the time... hahahaha...

Although it's just a color theme, it's probably different than 99% of the other color themes out there.

Oni (鬼) is a type of ogre youkai and Nebula Oni Theme has colors from outer space!

I know nobody - but me - will care but each syntax color option is the name of a real Nebula and I chose them based on their colors, shape and name - so I could pair them up. Hourglass and Spirograph are related to shapes while Pegasus and Cerberus are mythological creatures.

It's really silly but I spend some time researching Nebulas for this silly reason alone. Yes, I know... But I came this far, so why not? hahahaha...

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

What makes it different from the others?

First of all, you have a Color Theme with a MENU in the VSCode Settings...

But the main thing is that you can customize the heck out of it!

It has different colors for the background, UI color accents, different combinations for the syntax, comments, and more.

All of that without crowding the Color Theme menu with a list of one hundred variations for the same Color Theme.

(Main Color: Sakura / Background: Glacial Blue)

It was never the plan...

It wasn't supposed to be a color theme, it was just me, fresh off the boat, after I finished my first Javascript Course. My color theme of choice was one of the many Atom One Dark Color Theme but I wished some colors were different or behaved differently and that's how I got sucked into this color theme black hole.

(Syntax: Hourglass / Background: Grey)

It started with minor corrections, then bigger corrections, then I decided to try to make my own color theme, rudimentarily changing colors manually in the JSON file.

Then I started messing around with the colors, and created a second color palette, very different from the One Dark - which I called Neon Dark, due to obvious reasons - and at first, that was it. As a commentary, Neon Dark had pretty colors but it was a bit too bright for me, it looked different, so it existed.

(Syntax: Pegasus / Background: Glacial Blue

But then, I was playing around with some combinations of colors that I really liked. I started to put some other colors that worked well together - while also hiding in the syntax the colors that I didn't like as much. Balancing out the brightness, saturation and combinations was HELL, but that's how the Nebula Oni Color Theme started to take shape.

A common theme throughout this whole saga was I naively thinking I was done, just to find out later I wasn't even halfway through.

(Markdown)

The final form of the syntax colors took weeks, trying to make it well-balanced, fine-tuning HEX codes, and making the syntax work for languages I had no idea how they worked - even regex. I would use it and then make one color a bit darker, but then other combinations would be messed up, at the end of that process I just hated all colors in the world.

Messing with the UI Colors

(Main Colors)

Initially, I was also definitely NOT going to mess with the UI but it started to itch and I was compelled - by myself - to play around with the UI. While I did that, I found out a lot of different things that many color themes didn't take advantage of.

(Background Colors)

Hiding the focus border, different accents to highlight what's in focus or not, like the files, the tabs, and the sidebar. You could use different ways to highlight text selection, git integration, terminal colors, etc. It was another whole lot of work on a project I thought I was done with.

Using the VSCode Menu and allowing User Customization

The last piece of this saga was trying to turn this into a programming project. I wanted users to be able to customize, make their own combinations, and choose what they preferred - just like I wished I could on themes that I used before - but also make it work for me, making anything manually wasn't great at all - and too prone to small mistakes.

This was a whole different beast, there was no tutorial to base it on, I didn't know how to interact with the VSCode API, and I barely knew how to properly code Javascript, how the heck would I make this work?

Persistency, I guess...

(Main: Bumblebee/ Background: Grey)

(Main: Mint/ Background: Purple)

(Main: Peach/ Background: Blue)

(Main: Sakura/ Background: Glacial Blue)

(Main: Lavender/ Background: Dark Grey)

(Main: Aqua/ Background: Deep Purple)

I will spare you guys from all the struggles, suffice to say that I've learned a lot. I can't count how many times I hit a wall that seemed impenetrable, that I had no idea how to even start, but here I am.

I manage to create a way to interact with the VSCode menu and make a color theme constructor from the user's input, how to save their preferences, and even allow them to have Favorite Theme with different settings from the others. So people that had a different preference for a night theme or a high-contrast one didn't have to annoyingly reload the VSCode every time they had to change it.

I was also able to allow different color combinations for comments, also different shades for those that preferred it lighter or darker. But also how to make the theme keep the settings the same after an update - which seems obvious but it wasn't so easy to implement.

Final Thoughts

I also made color palettes for other complementary extensions like Bracket Pair Colorization and Better Comments. How to customize your Terminal, use Ligature in Fonts and some other things, which I posted here.

All in all, it was quite a journey, with struggles at each step of the way but also a lot of learning, trying to reverse engineering other extensions to learn how to use the API, and endless hours nitpicking color combinations, it certainly took a lot more time than I anticipated, but the satisfaction of having your first project done is priceless, as cliché as it might be, it's true.

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.

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 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 ]