Skinning Twitterrific for Mac

I’ve tried a lot of Twitter apps in my day, but after spending time with the official Twitter Mac client and Victoria Wang’s $14 Hibari, I’m back with The Iconfactory’s $10 Twitterrific 4.1.

It was a bit of a bumpy ride, however: The new default color themes in Twitterrific didn’t really work for me. The normal-sized text was slightly too small (especially on my MacBook Air), but the large-sized text option was too big. The app’s dark color scheme appeals to me, but the light gray text on a dark gray background didn’t provide me with enough contrast to read comfortably. Like Goldilocks, I was searching for a bowl of porridge that was just right.

When I complained about this on Twitter, the Iconfactory’s brain trust let me have it. Those guys think a lot about this stuff, and the choices they made in their UI design were for very good reasons… they just didn’t work for me. While designer David Lanham did offer that he might try to lighten the dark text slightly in the app’s next revision, he suggested that if I really was bugged by the color schemes and font sizes, I could take matters into my own hands.

Understand: Twitterrific deeply limits a user’s customization choices on purpose. Their designers have carefully created two color schemes (Dark and Light) and chosen three sets of font sizes (Smaller, Normal, and Larger). That’s all the choice a regular user can make.

But irregular users like me can do crazy things, things that the developers of Twitterrific would never approve of. Horrible things. So I did. I cracked open the Twitterrific’s application package itself (by control-clicking the app in the Finder and choosing Show Package Contents) and began editing the text files inside that determine how Twitterrific looks.

Let me be clear: What follows is crazy stuff. Don’t do it if you’re not comfortable with cracking open a package and editing XML files. And make a backup copy of the app first. But if you’re curious about taking Twitterrific and modifying it, here’s how.

Inside the Twitterrific app package, there’s a Contents folder, and inside there is a Resources folder. In there are the key files you need to edit, using TextEdit or any other text editor around: theme_dark.plist and theme_light.plist are the files that define the two color schemes; theme_desktop.plist, theme_desktop_smaller.plist, and theme_desktop_larger.plist are the files that determine font sizes at the Smaller, Normal, and Larger settings.

These files are all XML files, but they’re fairly readable. Open theme_dark.plist and you’ll see a series of labels (set in key tags) that tell you what those settings are for. The first set of stats, for example, is the key selected inside the key normalTweet. These are the color settings for a selected tweet in your timeline. Most of the values below this point are RGB color values, from 0 (0 percent) to 255 (100 percent). So when you see

            <key>textColor</key>            <string>185:200:215</string>

That’s saying that the text color of a normal tweet when it’s selected is 72 percent Red, 78 percent Green, and 84 percent Blue. Web designers would know that by its hexadecimal notation, #69C8D7. It looks like a kind of aquaey blue to me, but then, I’m color blind.

So here are the major changes I made in the dark theme: in normalTweet -> unselected and normalTweet -> selected I made the background (controlled by gradientBottomColor and gradientTopColor) slightly darker but lowering the RGB values by 20. I made the color of text lighter by increasing the RGB values of textColor by 10 or 20.

Experimenting with different settings is pretty easy: just save the file, then quit Twitterrific and open it back up. When the app re-opens you’ll see the changes you made, wrought across the face of the app. There’s a lot of trial and error.

That’s where I should have stopped, though I admit I also changed the color of replies in my timeline from orange to blue. Just because I could! You just have to change a lot of attributes to create a good color scheme, and like I said, I’m color blind. It’s probably awful. But it makes me happy.

There’s one more stop I needed to make: the theme_desktop.plist file. Since Twitterrific’s Normal text size seemed slightly too small for me, but Larger seemed way too big, I decided to bump up the Normal size by a single point. Within theme_desktop.plist, I changed tweetTable -> font from 13 HelveticaNeue-Medium to 14 HelveticaNeue-Medium. I left the actual typeface alone, though it is most definitely editable, as Ars Technica’s John Siracusa proved (see image below; click to embiggen).

I should mention that Twitterrific’s not remotely the only app with these sorts of stylesheets buried inside their app packages. The other Twitter client I mentioned above, Hibari, even supports this sort of foolishness by letting you create a custom CSS stylesheet in your ~/Application Support/Hibari folder.

In any event, if you’re a Twitterrific user and you want to mess around with how the app looks, you can do it. Just don’t blame me—or The Iconfactory—for what happens next.