How To Change Your Github Contribution Graph Colour To Something Cool
Tags: github, javascript, tampermonkey, tutorial
Published: 2019-02-14 07:14:45

---
title: How To Change Your Github Contribution Graph Colour To Something Cool
published: true
description: A guide on how to change natural green to what your heart desires!
tags: github, javascript, tampermonkey, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tgy6flxj35uofs48swkg.png
---

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.

![github contribution graph](https://thepracticaldev.s3.amazonaws.com/i/wadf8qutl6n7iv0i475m.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/sr8eyziwkjw6r0ix3b51.png)


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.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/r7su6iy4j23cyymizhjh.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/jarkgddsfim7x784mct4.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/euosrs8kr6zqqkg9zezy.png)

Then we'll be looking at an individual square

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/ieccvg38de5o593h5uhk.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/3x38w6gfqydqjryyw6lv.png)

## 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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/12329139z98i6pmqpsfx.png)

as well as on chrome

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/tdoxdhq2xt9jjk91rgk9.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/hodowchxatt9ry9lobmm.png)

Now let us create a new script

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/x73c3oj1l0tyazz5y6xl.png)

we get this screen 
![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/0loiybpezhf5w0g3hdcu.png)

now let us match all domains on github

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/7y8v0w90hpi7bcg5hlu0.png)

and change the script name

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/3jdxfi5xhkoxh6wpqnhl.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/46oy21693vsjcf0f7inn.png)

upon inspection of our github page, we find two things

- there are 5 levels of colours


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/cgqk2uguuz8nqtwa19ad.png)

and 

- they are graded according to data-count

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/k41xfdx6ufh8xuqa9ojn.png)

so here is our starting point


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/20mv02n1xh176ctkmame.png)

now let us add grading of count

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/8nun5v4e3wguh9rh0oea.png)

save

## Seeing The Result

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/mndsa2v7w2yqwk98jtvt.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/ekk7zunwfkyp6cqe1a6t.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/5r7ggresvy8vxrdwro4b.png)

we change our codes accordingly


![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/sybqjz5s5axzz5svd1ql.png)

and tada!

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/oq41eeqanmihwjpjf10r.png)

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

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/v36k1ckaq0tv8oioipyi.png)

## Wrapping Up

You can find the source [here](https://github.com/Abdur-rahmaanJ/graphColourChange) (a gist would have been more appropriate)

also view it on greasyfork [here](https://greasyfork.org/en/scripts/377763-githubgraphcolour)

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