NorthernLights color scheme: improve your coding experience

Article cover image

Cover image: NorthernLights on Visual Studio Code

As you know, I really love theming. Back when I was using wordpress to host my blog I built Esky-Theme (Wordpress). Not long ago, I built a program which allows anyone to generate a theme for the android telegram client.

Well, this time around, I built NorthernLights. It is a color scheme which I come up with while in search for one I could use pervasively and one that wouldn't "wear off", suitable for coding and casual writing.

Today I want to share the motivations and principles behind, this color scheme. There are very simple principles, but they make sure to make the coding/writing experience way more pleasurable.

As the name suggests, I took a lot of inspiration from the Northern Lights. Here, the first image I stumbled upon:

https://guidetoiceland.is/image/437199/x/0/northern-lights-in-all-the-colors-of-the-rainbow-dance-across-the-sky-in-iceland-6.jpg
The image that inspired the NorthernLights color scheme (by Guidetoiceland.is).

I found it so beautiful, I naturally wanted to make a color scheme with this idea in mind. But I also wanted to improve the quality the users of the theme. So I come up with some goals I wanted the color scheme to respect.


🎯 Reducing eye-strain

I am a programmer, which means that basically I use most of my time writing in front of a computer screen. With this use-case in mind, eye-strain reduction obviously represents a must-have feature, since it directly impacts my performance. If I can stay longer in front of a monitor, then my productivity should also increase.

💡 Solution

Eye-strain can be reduced by using dark themes over light themes. Especially in situations where you already have enough tired eyes, such as late at night.

🎯 Reduce stress and improve alertness

Colors play a very important role in our perceptions, so if I can improve my mental state when I look at the screen then, well I should do so. There's also a big body of research which shows exactly how and which colors can impact people's mood and emotions and in which way.1 2 So:

  • Research on color and alertness has shown that blue light increases subjective alertness and performance on attention-based tasks
  • exposure to blue light is expected to facilitate alertness and enhance performance on tasks requiring sustained attention.
  • Blue / Pink color hues significantly reduce stress

💡 Solution

Using blue hues can improve alertness and reduce stress. What this means is that, the theme should have blue as the primary color (the major part of the color presence should be represented by blue hues)

🎯 Reduce the time I need to stay in front of the screen

Obviously, another must-have, is to pass less time on the screen to pass more time doing something else. In this particular color scheme this is achieved using color hues to highlight important bits of code. Now, most code editors provide very powerful search tools. What this color scheme wants to achieve, is to rely less on these tools and more on the color cues. In the programming use-case, it's really common to skim the code for particular bits. I believe that a programming color scheme requires to highlight and focus user's attention on particular bits of code: comments, errors, variable/class names, and so on.

💡 Solution

Clever use of the various hues to highlight text can reduce the time needed to find what you are looking for in the text, by focusing your attention on what's really important.

With that in mind, we now have a clearer idea on where to start, the actual implementation of the color scheme is the only thing left to do.

The Implementation

For that matter, I already managed to build an implementation of the color scheme for various editors, some terminal emulators, note taking apps, and I'm starting to adapt it to kde-plasma. You can find all the relative repositories on the Github Organization . I plan on supporting even more.

I created this project for fun and I maintain it so anyone who wishes to, can enjoy using it as much as I enjoyed creating it. If you like what I do, and wish I could keep it alive and do even more, please, consider supporting me.

Footnotes


Would you like to give your impressions on this post? Write it online, then paste the link of your response here to send me a Webmention