How To Change Your Github Contribution Graph Colour To Something Cool

In this post we'll be seeing how to change your contribution on github to a nice colour scheme. It's an easy tutorial, detailed enough, feel free to clear up any doubt! Let us begin.

Reconaissance

First this is what we mean by contribution graph. The green squares.

Now we need to see how github actually does it. Right click then choose inspect element.

Next we see a box has appeared. That shows us how the page is structured, as well as showing console messages. This is good for debugging.

Now if you want to change it's position, click on the dots, then select your preferred view.

Now we'll uncover the secret behind individual squares by using the selection tool.

Then we'll be looking at an individual square

Aha, so, we have an element with class day and the colour is in the fill attribute. Nice!

In Enters The Tampering Monkey

Tampermonkey is a tool that allows you to change/tamper with the codes found in your webpage. On opera it is available

as well as on chrome

If all went well, you should see a nice icon on the top right of the browser (I'm using opera)

Now let us create a new script

we get this screen

now let us match all domains on github

and change the script name

now if we press save, we'll be directed to this screen. just click on the name to return on your editor

upon inspection of our github page, we find two things

• there are 5 levels of colours

and

• they are graded according to data-count

so here is our starting point

now let us add grading of count

save

Seeing The Result

now go to github and press on the logo, you'll see our script active

now refresh the page and you'll see something like that:

just now we need to deal with the legend

Dealing With The Legend

inspecting the legend reveals a class legend with li children and background colour

we change our codes accordingly

and tada!

now whenever we move around, our graphs are coloured the same. Ethan Furman's profile for example

Wrapping Up

You can find the source here (a gist would have been more appropriate)

also view it on greasyfork here

Feel free to propose more colour schemes below. Hope you enjoyed the article!