How can I change the scroll bar in Google Chrome to have different colors?

The good news is, if you use chrome, you can change almost everywhere.
Go to here, the plugin name is what we looking for Styleish:

https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe
Install it and after create a style like this:

And now you can paste following code

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #840000;
  border: 1px solid #802113;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f90000;
}
::-webkit-scrollbar-thumb:active {
  background: #ff2b2b;
}
::-webkit-scrollbar-track {
  background: #e80000;
  border: 0px none #ffffff;
  border-radius: 53px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

Of course if you dosen't like red backgound, you can edit backgorund section.
But, if you preferer a visual solution you can generarate your own scrollbar in here:
http://mikethedj4.github.io/Webkit-Scrollbar-Generator/
When you're done with edit, press save button, refresh the page and now you get pretty scrollbar almost everywhere.
Note:
You can add "!important" atribute for colors, thats means to css:
"Hey, this important so I don't care any other settings for this element"
Syntaxis:

background: #666666 !important;

Of course you can use simple color names, like black or red etc, but I think the color code is much prettier because you get the same color which you're whant.
If you choose this method, you can use this color mixer for example:
http://www.w3schools.com/tags/ref_colormixer.asp?colorbottom=000000&colortop=FFFFFF
And that's it, now you can work in clam, without any noing ugly scrollbar.
Note 2:
Yes it has some problem on some page, but I think the important atribute is can solve it.