Earlier this Sunday I was trying to create labels for my Github Issue Tracker and I observed something. See if you can spot it below:
Notice how the label text changes color? And not just the label's background? Even more quirky is that the label color is either white or black and it's always a contrast to the label's background. If the background color is dark, the label text is colored white and black otherwise.
Cool! And weird too! How does Github know if the color that I set needs a black or white label text?
Curious, I first tried to determine if this happens in the front end itself or if it happens at the backend. A quick check of the Network tab tells me that it's actually happening on the backend - when we try to assign a color, the color is passed to the backend that responds with the span tag that needs to be showed, with an inline style that sets the label text to either black or white. I could not reverse engineer this further and hit a dead end.
I then googled how to determine if a color is dark or light in Node.js (to correspondingly add a black or white color to the label's text) and came across the color module. This has the two following functions that determine if the color passed to is dark or light:
color.isLight();
color.isDark();
Cooool! Going through the source code of this module to figure out what they do in these methods led me to this blog that goes into detail about how this works. I'd hate to give a TL;DR version and if it's any solace, that link isn't that long to read.
I'd imagine Github is using one of the two methods in that blog (or perhaps the color module itself) and returning the final element to display. Small but coool feature to provide.
Top comments (0)