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

I don't like the default scroll bar of Google Chrome:

Is there a way I could change its colors?

3 Answers

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:

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:
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:
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.

I've recently been doing just that, restyling the scroll bar. Here, take a look at my source code in CSS, it works great, but there is either a "bug" or a feature lack thereof for getting the buttons to change when the scroll bar is at the top, or at the bottom like a normal one.

You can test out the code here.

The source code is below:

/* SCROLL BAR */
/* URLs to images resizer: down-arrow-active: down-arrow-disabled: down-arrow-enabled: left-arrow-active: left-arrow-disabled: left-arrow-enabled: right-arrow-active:
right-arrow-disabled: right-arrow-enabled: up-arrow-active: up-arrow-disabled: up-arrow-enabled:
*/
::-webkit-scrollbar {background-color: black;}
/* arrow buttons */
::-webkit-scrollbar-button {background-color: #0d0d0d;background-repeat: no-repeat;background-position: center;}
::-webkit-scrollbar-button:active {background-color: #868686;}
::-webkit-scrollbar-button:hover:not(:active) {background-color: #2c2c2c;}
::-webkit-scrollbar-button:horizontal:increment {background-image: url();}
::-webkit-scrollbar-button:horizontal:increment:active {background-image: url();}
::-webkit-scrollbar-button:horizontal:increment:disabled {background-image: url();}
::-webkit-scrollbar-button:horizontal:decrement {background-image: url();}
::-webkit-scrollbar-button:horizontal:decrement:active {background-image: url();}
::-webkit-scrollbar-button:horizontal:decrement:disabled {background-image: url();}
::-webkit-scrollbar-button:vertical:increment {background-image: url();}
::-webkit-scrollbar-button:vertical:increment:active {background-image: url();}
::-webkit-scrollbar-button:vertical:increment:disabled {background-image: url();}
::-webkit-scrollbar-button:vertical:decrement {background-image: url();}
::-webkit-scrollbar-button:vertical:decrement:active {background-image: url();}
::-webkit-scrollbar-button:vertical:decrement:disabled {background-image: url();}
/* foreground bar */
::-webkit-scrollbar-thumb {background-color: #3d3d3d;}
::-webkit-scrollbar-thumb:horizontal {border-top: 2px solid #0d0d0d;border-bottom: 2px solid #0d0d0d;}
::-webkit-scrollbar-thumb:vertical {border-left: 2px solid #0d0d0d;border-right: 2px solid #0d0d0d;}
::-webkit-scrollbar-thumb:hover {background-color: #565656;}
/* background bar */
::-webkit-scrollbar-track {background-color: #0d0d0d;}
/* corner, when there is converged scrollbars */
::-webkit-scrollbar-corner {background-color: #232323;}
::-webkit-resizer {border-top: 1px solid #262626; border-left: 1px solid #262626; background-image: url();}

Here is a darker version of @Neo's proposal. Remember to use Stylus, as Stylish has some privacy concerns.

::-webkit-scrollbar { width: 10px; height: 10px;
}
::-webkit-scrollbar-button { width: 0px; height: 0px;
}
::-webkit-scrollbar-thumb { background: #3e3e3e; border: 0px solid transparent; border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover { background: #3e3e3e;
}
::-webkit-scrollbar-track:hover { background: transparent;
}
::-webkit-scrollbar-thumb:active { background: transparent;
}
::-webkit-scrollbar-track:active { background: transparent;
}
::-webkit-scrollbar-track { background: transparent; border: 0px none transparent; border-radius: 0px;
}
::-webkit-scrollbar-corner { background: transparent;
}