Theming the new HipChat 4 beta for OSX

A slightly darker “dark” theme

Update: I wrote a small application to automate the theming process described in this article.

A few months ago, HipChat added the ability for users to enable a new dark theme. This functionality was initially only available as an option to users of the web client, and not the native desktop application(s). I was elated when I saw that this feature was eventually going to make it’s way to the desktop application.

Yesterday, that day finally came. I opened up my email in the morning, and was excited to see an invite to download and try out the new beta client for OSX. I quickly downloaded, installed, and opened it up. I immediately hopped into the Preferences menu, and enabled the Dark theme.

Close, but not quite there

After using the new beta client for a full day, I found that I was fairly happy with the new dark theme. I now had a messaging client that matched my browser theme, my IDE theme, and my terminal theme…sort of.

Unfortunately, there were still certain aspects of the dark theme that I wasn’t a huge fan of. For example, although the entire content area in the window was now a shade of black or gray, the large title bar for the application is still solid blue. It’s not the end of the world, but what if I could tweak the style of the application to perfectly match my preferences?

Native App, or Web App?

I noticed while using the beta client that it felt awfully similar to the web client I had been using occasionally in the browser. After a bit more digging, I discovered the reason: it’s the same application.

It appears that the Atlassian team had such great success with the initial implementation of their web app using React.js, that they decided to wrap this implementation moving forward within their desktop clients. This is great news for me, because it means that the application is currently being themed with a technology I’m already intimately familiar with: CSS.

Modifying the default theme(s)

The steps to start theming the HipChat 4 client on OSX are relatively straightforward, and it only takes a few minutes to get started.

  1. Open Finder, and locate HipChat-Beta.app.
  2. Right click the .app file, and choose Show Package Contents.
  3. Open the Resources folder, and open chat.html in your editor of choice.
  4. Add a style tag (<style></style>) immediately below the title tag (you can technically put this anywhere in the document).
  5. In your new style tag, you can now add any valid CSS rules (Note: The view used for displaying the HipChat client is rendered in WebKit).

Of course, the ability to style the application isn’t that useful, unless we’re able to inspect it and identify the different targets for our styles. Luckily, the HipChat web client uses the same markup and styles as the OSX client, which means that we can just visit the web client and use the browser’s developer tools to prototype.

Fixing the title bar

Now that we know how to add our own styles to the HipChat client, we can change the color of the title bar, and have a true dark theme.

Add the following CSS inside of your style tag in chat.html

Now, save the file, and restart the HipChat client. You should now have a fancy, dark title bar

Doesn’t that feel better?

Conclusion

Thanks to the architecture of the new HipChat desktop client on OSX, anyone who knows how to write CSS can now style the application to best fit their tastes. As a word of caution, there is no way that I am aware of currently to prevent the custom styles from being wiped out after an upgrade to a new version of the client.

In the future, I would love to see the Atlassian team offer the ability for users to upload and share their own themes, that could then be installed through the Atlassian Marketplace.