Change websites colors for better navigation with Stylus
Tags: programming, productivity, webdev, tutorial
Published: 2018-07-30 23:28:16

---
title: Change websites colors for better navigation with Stylus
published: true
description: Tutorial for changing websites colors with web browser plugin Stylus
tags: programming, productivity, webdev, tutorial
---
#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](
https://thepracticaldev.s3.amazonaws.com/i/4so0yc74mych3ig0rx3n.PNG)

I think this was more or less my reaction:

![Eyes Burning image] (https://thepracticaldev.s3.amazonaws.com/i/5urbwf44jmdejeoxe2sq.jpg)

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](https://github.com/stylus/stylus) 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](https://userstyles.org/styles/37035/github-dark) everything was okay for my eyes again.

##Installation

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

- [Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)

- [Firefox](https://addons.mozilla.org/firefox/addon/styl-us/)
- [Opera](https://addons.opera.com/extensions/details/stylus/)

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](https://userstyles.org/styles/browse).

To add them just click on the style you want and click the "Install Style" button:
 
![GitHub Dark Theme](https://thepracticaldev.s3.amazonaws.com/i/qe7oi0dgvbb6pu95gbfx.PNG)

And here is how Chrome shows GitHub:

![GitHub Dark Theme] (https://thepracticaldev.s3.amazonaws.com/i/yv0sxs2vu1e035jfveq4.PNG)

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](https://userstyles.org/styles/123887/youtube-better-full-dark-theme-2018-arc) by [Arczi008TV](https://userstyles.org/users/304979)

![Youtube Dark Theme](https://thepracticaldev.s3.amazonaws.com/i/xw5040j33egvw0fgcozh.PNG)

[Amazing Google](https://userstyles.org/styles/152077/amazing-google) by [Random guy](https://userstyles.org/users/344525)

![Google Dark Theme](https://thepracticaldev.s3.amazonaws.com/i/lizprdghsq0f6uql94as.PNG)

[Clear Dark Facebook](https://userstyles.org/styles/136318/clear-dark-facebook-by-book777) by [Nicholas Buk](https://userstyles.org/users/379825)

![Facebook Dark Theme](https://thepracticaldev.s3.amazonaws.com/i/0jiboiy66bu8g2t8mt28.PNG)

[Dark Whatsapp Theme](https://userstyles.org/styles/142096/dark-whatsapp-theme-by-mew) by [Vednoc](https://userstyles.org/users/362890)

![Whatsapp Dark Theme](https://thepracticaldev.s3.amazonaws.com/i/0zqnxqvtbb0qxzcxa54f.PNG)

#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](https://userstyles.org/styles/31267/global-dark-style-changes-everything-to-dark) by [stormy](https://userstyles.org/users/43566).

The results are something like this:

![DevTo Dark](https://thepracticaldev.s3.amazonaws.com/i/ke2ce9ru8n97gqwe1iqc.PNG)

![StackOverFlow Dark](https://thepracticaldev.s3.amazonaws.com/i/qynan0qkiw3uofanidz8.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/9pcwy5wxx6s8mxhuw4ml.PNG)

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.