Change websites colors for better navigation with Stylus

Why?

So the other day I was coding a game in Unity, I was getting some headache but it wasn't a lot of a problem because i have the dark theme in Unity and also a night theme in Atom for coding the scripts. The problem appeared when I saw this on my screen:

I think this was more or less my reaction:

All that white background was giving me more headache that I had initially, so I googled a solution for my "problem".

Stylus

So I found this magnificent extension for my web browser (Chrome), called Stylus.
With Stylus you can search for css themes that its community codes and uploads to their site. So after I found GitHub Dark everything was okay for my eyes again.

Installation

First we need to install the Stylus for your web browser:

• Chrome

• Firefox

• Opera

Their installation is pretty straightforward, as any other extension/add-on for your browser.

Themes

Once you have installed Stylus on your web browser, its time to get some themes!
Stylus themes are available here.

To add them just click on the style you want and click the "Install Style" button:

And here is how Chrome shows GitHub:

Now my eyes can concentrate in the commit's messages and not the killer white background.

Here are some other cool themes I installed:

YouTube Dark Theme by Arczi008TV

Amazing Google by Random guy

Clear Dark Facebook by Nicholas Buk

Dark Whatsapp Theme by Vednoc

Bonus

Global Themes

I liked a lot these themes, but I don't want to download a theme for every website! Stylus has a fix for that, they have "global themes" which are generic themes that should work on all websites.

I installed Global Dark Style by stormy.

The results are something like this:

As you can see the results are not perfect, but in my opinion, it gets the job done.

Adding Exceptions

There might be websites that you dont want to apply this global theme, or you already have othere themes for those websites that just looks better. You can add exceptions by clicking the Stylus icon on your browser and clicking on the manage/administrate button (the left one). Select your global theme, and go to the bottom of the page to add the exceptions websites.

As you can see I deactivated the global theme for the websites where I already have another theme, as sometimes, there are conflicts between multiple themes.

I hope this post helps some people to have a more "easy to look" web experience.