I made a color scheme

I like to say $HOME is where the heart is.


Just like you paint the walls of your house with colors you like, the same should be true about your development environment.


So I forked and redesigned a color scheme for my terminal, editor, and TUI apps.


~~


I'm a recovering dark-theme addict trying to explore my light-theme alternatives..


This website, as you can see, is light-themed; and also designed by me


However, I still prefer doing development with a dark theme, and the one I'll be talking about is a dark theme. I have looked at making a compatible light version and haven't dismissed the idea all together, though there is still much editing that would need to be done before it would be usable.


This scheme I have unimaginatively dubbed "scheme01". Let's look at it.


~~


I arrived at this scheme through the use of a base16 theming cli tool called flavours. It's a simple rust program that — from a set of schemes (the colors) and templates (the application specific config) — parses (and optionally replaces) coloring configurations for any application that allows for configuration through text files.


The command that allows quickly switching themes is flavours apply [scheme]. Check out the repo for the full documentation.


Anyway, this tool made it easy to keep all my applications consistently themed and I soon began regularly trying out different themes. I came across a set of themes by Andrea Schiavini called "black-metal" with sub-themes such as "black-metal-bathory" and "black-metal-gorgoroth", presumably nodding to those heavy rock, metal sub-genre artists.


I initially liked the schemes he developed, but found a lack of contrast and differentiation I like in, especially, a code-editor theme. These schemes work great for data-driven TUI applications, though.


This scheme is MIT licensed, making it FOS. My version, to adhere to the license, is published under the same licensure. The full license can be found here.


So I forked the scheme, with all the base colors. I removed what, for me, were redundant colors such as the repeated #999999 and other greys. I actually kept the only non-grey colors from the base scheme. #a06666, #dd9999, and #5f8787.


I prefer for my base16 schemes to follow the color framework pretty close. That is, the first four being the background and shade colors, the next four being the text and highlight colors, and the last eight being accent colors. Black-metal technically followed this framework for the most part, but let some of the shade and highlight colors also act as accent colors which greatly impacted contrast.


To get some more color contrast I added in the missing accent colors. #5f8766, #ddB699, #5f87a9, #8477a4, and #87775f. Making the entire scheme:


base00: #121212

base01: #222222

base02: #333333

base03: #444444

base04: #999999

base05: #c1c1c1

base06: #999999

base07: #c1c1c1

base08: #a06666

base09: #5f8766

base0A: #ddB699

base0B: #5f87a9

base0C: #8477a4

base0D: #5f8787

base0E: #87775f

base0F: #dd9999


and an example of it used as my neovim theme:



~~


It hasn't caused any tangible issues, but I find the base0D cyan color to be too similar to both the base0B blue and especially the base09 green. This is especially problematic for accessibility. In future work on this scheme I may try to differentiate them a little more while still maintaining the cohesive nature of the colors.


I selected the accent colors based on their compatibility with the original blue, red, and pink. The outcome feels nostalgically familiar, making me think of children's toys from the early naughts, like this vSmile...



~~


I've been using this theme for the majority of my work for the last many months, probably nearly a year. I find the contrast and overall feel of the theme to be pleasant when working for extended amounts of time and haven't experienced noticeable fatigue using it.


The way in which the colors are mapped to specific syntax tokens is done through flavours "templates" they look like this and essentially just get dropped into your application configs when you run flavours apply [scheme]



Again, look at the official documentation for how to actually use the tool, but I wanted to provide some context to how this scheme is applied.


Here is another screen-capture of an application using the scheme..


htop


~~


That's all! I'll update this post if/when I get around to making the changes I mentioned or developing a light-themed version.


Try designing your own color scheme, it's fun.