An IDE theme is the group of colors that represent all elements in your editor. There are a lot of themes available in online marketplaces, you can even make your own! In this post, we’ll craft the best possible theme. We’ll only focus on eye strain and contrast (and maybe user’s feelings?). Not on ✨ aesthetics ✨
Ok, so we know that bright colors really affect eye-strain after a long period of time1 in a dark room. These colors, mixed with high contrasts can amplify that effect2. In short, not having a 100% contrast between font color and background color is “beneficial” (not as bad) to our eyes. (Very bad, very high contrast | A bit better, less contrast)
If you’ve taken any design class, you probably know this. It’s very basic and one of the first things web designers learn. But lowering contrast isn’t always good. Higher contrast helps visual identification performance3 (4) and may feel better under brighter settings (sunlight on the screen, etc…).
Very low contrast isn’t an option neither.
What about dark modes / themes?
You may be thinking about dark modes, where the text is brighter than the background. They are better than the alternative; although, the way our screens work (having a white)
As a tangent, for power users (our target, programmers in this case), dark modes tend to be the norm. For normal users, they tend to be put of by the “negative text” 5.
At the end, it isn’t much better, as a lot of screens are back-lit; they have a white “square of light behind the pixels” so it lights the screen. So eye strain is practically the same (as well as long-term eye damage) and-
WAIT, long-term eye damage?
Yep, turns out your parents were right about this. Exposure to blue light (400 - 500 nm) (Not only blue light, but any short-wavelength light) can be harmful to the retina. Peak damage being around 440 nm6, See Figure 1.
Note that longer duration ($12 - 48$) even with a lower intensity can also cause photochemical damage7, being cones (the color ones) the most affected.
But don’t worry, it seems like it doesn’t represent a cause for concern for public health. Comparing natural exposures with the reasonably foreseeable exposure to optical radiation from lamps, computer screens and mobile devices, such as smartphones shows that the actual spectrally weighted irradiance is lower than the natural exposures.8
Does this mean you can be dumb with your eyes? No. Rant over.
Ok, what about colors
As you probably know, humans don’t see all colors with the same intensity. Although we have from L:M (red to green cones proportions) of about $1.1:1$ to $16.5:1$ ($52.7%$ - $94.3%$) in males9, we are actually a bit more perceptive to green (natural selection reasons). So, we should take this into account and make some calculations for balancing colors.
As we saw, $440 nm$ is the most damaging wavelength in LED screens. So we’ll use wavelengths shown on Figure 1 that have less than a $0.3$ in the Intensity scale.
So, we’ll pick $420nm$ and $500nm$ (just some arbitrary values). If we do some math (that, admittedly may be wrong) we get that $420nm$ isand $500nm$ is .
There’s a good thing here: Those are almost complementary colors. A complementary color is one that its opposite to another one in the color wheel. Orange and purple, green and red…
So, by being almost complementary, we already cover our requirement of having kinda low contrast But, you’re probably thinking that those colors are too bright, so we’re going to lower their brightness in an equal way.
We’ll use this tone, waaay better.
So, we have our colors. Yay :D We can now put them to good use!
So, what do you think? Is it pretty, is it beautiful? Was this maybe just an excuse to research ophthalmology for a week and tell people about it? Do you feel smarter now?
If you were paying attention to the starting speech, you probably noticed that we just broke our first principle: “not too hairy, not too bald” meaning that, the contrast for these green keywords isn’t really working… Maybe the idea of darkening both colors as much was just an idea I had. Maybe I’m bad at not following impulsive thoughts.
Anyway, I’ll brighten this color to this one.
I can’t believe it actually looks kinda good… Maybe I should adopt it as the official theme for this blog…
I really thought it would hurt my eyes even more. Maybe using science to craft things does work after all!
Talking about eyes for so long makes my ocular globes feel weird… Ok, this was pretty fun to research, but note that I’m not even close to being an Ophthalmologist. Although I tried to provide as many references as I could, take this with a whole NaCl rock.
Also, did you know that I’m very scared by eyes? Like, a genuine phobia? Just a fun fact. Making this was pretty fun 💀 I think it all started when I was very young…
Isono H, Kumar A, Kamimura T, et al. . The effect of blue light on visual fatigue when reading on LED-backlit tablet LCDs. Procedings of International Display Workshops 2013 ↩︎
The findings of [REF 3] may not be too relevant for this post, as TFT-LCD screens aren’t really used outside of calculators and digital watches. But I think it still works for our use-case ↩︎
Hofer, H., Carroll, J., Neitz, J., Neitz, M., & Williams, D. R. (2005). Organization of the human trichromatic cone mosaic. The Journal of neuroscience : the official journal of the Society for Neuroscience, 25(42), 9669–9679. ↩︎