loading...

Change websites colors for better navigation with Stylus

zablon18 profile image Fernando Zablah ・3 min read

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:

GitHub white screenshot

I think this was more or less my reaction:

Eyes Burning image

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:

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:

GitHub Dark Theme

And here is how Chrome shows GitHub:

GitHub Dark Theme

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

Youtube Dark Theme

Amazing Google by Random guy

Google Dark Theme

Clear Dark Facebook by Nicholas Buk

Facebook Dark Theme

Dark Whatsapp Theme by Vednoc

Whatsapp Dark Theme

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:

DevTo Dark

StackOverFlow Dark

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.

Exceptions

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.

Posted on by:

zablon18 profile

Fernando Zablah

@zablon18

Software developer who loves working with electronics and sharing knowledge.

Discussion

markdown guide