Customizing Slack Background and Themes

I’m a frequent user of Slack and today I found out a cool way to customize the colors of your background and overall theme.

I’m going to discuss how to make your Slack installation use a dark theme, but if you review what I have here (and do some googling) you can find alternatives that let you do just about any combination.

Slack Browser (Chrome Only)

I use mainly Chrome so I found a great extension by Bill Hedworth that enables a dark theme. The extension is available here https://chrome.google.com/webstore/detail/dark-theme-for-slack/begdfkhhegoognioipgofimponkeiiah/related

Based on the support history, it looks like its regularly updated and very stable. I got my wife to start using it today, and she’s had a great experience so far.

Slack App

Slack uses CSS to determine how it displays your messages, sidebar, etc. The CSS is used in both the standalone Slack App, and when you use it in the web browser. Since you can edit the CSS that the Slack App uses directly, you can customize this with just a few extra lines of code in the resources folder.

There are some instructions on how to do this available here https://github.com/widget-/slack-black-theme

What I wanted to do specifically was actually change the background of the conversation box. If you just use the GitHub link I provided here it will change the theme for the sidebar but not the conversation box.

If you want to change the conversation box and the sidebar then I recommend using the code here https://mallowigi.github.io/slack-one-dark-theme/

The cool part is that the basic setup is to just create a custom event listener that is registered when the application starts. So the code is fairly minimal and (if you google it) you can find lots of examples and color combinations.

Originally published at https://rhythmandbinary.com on May 1, 2019.