Improving interfaces using Greasemonkey: TweetDeckColorSchemes.com

Do you ever come across a service that’s cool, but has such obvious quick wins that your fingers are itching to improve it yourself? I get that quite a lot. This week it was at TweetDeckColorSchemes.com. And with a greasemonkey script, I could make it a bit better really easily.

What is TweetDeckColorSchemes.com?

When you’re using Tweetdeck as your desktop Twitter app, you can easily adjust the colors of the rather dark and depressing interface (Settings > Colors/Font). The nice thing is that Tweetdeck also provides the option to tweet your newly created color scheme. TweetDeckColorSchemes.com catches all these tweets, and presents the color schemes on their site. That’s really cool.

Choosing your color scheme isn’t made easy

Unfortunately, the color schemes do not really give you a good impression of what the interface will look like with these colors: all sample are the same size, while some will be much more prominent in the interface than others.

Changing the presentation

This samples could much better be presented in a form that represents the Tweetdeck interface. So I have created this Greasemonkey userscript that does exactly that. (You’ll need to have the Greasemonkey plugin for Firefox installed.) It simply adds some css to resize and reposition the samples. And now, you have a good impression of what each color scheme will look like.

While I was at it, I’ve also added a link “Show colors” next to each color scheme. And since I didn’t like to have a paginator at top of the page only, I added one at the bottom (where you normally need it).

Suggestions for further improvement

Although I like to think that my script improves the page, there are still some improvements I would like to see. What I think would be really cool is to create a copy of the actual Tweetdeck interface on which you can apply the color schemes. (That would be fairly easy using transparent png’s for the buttons and other components, in combination with <div>’s with a changeable background-color.) Also, it would be nice to be able to sort the color schemes by color, to rate them, and to have an easy way to copy the color codes.