Slack Dark Theme

Is there a way to use a dark theme in the Slack Desktop app? Specifically where the background is dark (black, dark grey) and the text is light. There are some built-in themes in Slack, but they are all light colored.

Solution 1:

In order to make slack dark you can do the following for OSX (as of today 7/30/2018).

1) open the following configuration file in a text editor such as sublime: /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

2) Add the following code at the end:

/* Slack Dark Theme */
document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://gist.githubusercontent.com/Icebird/638220c4b3eb7f68c39431740fbd7eb7/raw/6565832413fb971a34d9cb1b23bf0f633504072c/slack-dark.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});

3) Re-open slack.

When I did this, I saw that the message backgrounds were black but the sidebar was a purple color I didn't really like. To fix that aspect of it I went into the slack Preferences option when clicking on the little down caret on the top left of the app then going into Sidebar option and scrolling down to themes and clicking Ochin or Work Hard...

Solution 2:

To open ssb-interop.js on a Windows machine (change USERNAME to yours): PS C:\Users\USERNAME\AppData\Local\slack\app-3.3.3\resources\app.asar.unpacked\src\static> notepad .\ssb-interop.js

Edit: After update to version 4.0.0, the directory structure has changed. There is no more ssb-interop.jp file. It is now part of app.asar archive. These are the steps to enable the dark mode on version 4.0.0

1. Make sure you can read and modify asar archives (one way to do it is to install 7-Zip, and add asar support by installing a *.dll file that you can get from http://www.tc4shell.com/en/7zip/asar/ )

2. Close Slack completely, then go to the folder with app.asar file: C:\Users\USERNAME\AppData\Local\slack\app-4.0.0\resources

3. Open the app.asar archive with 7-Zip, and go to /dist/ folder.

4. Find and open the file ssb-interop.bundle.js

5. Add the usual code at the end, then save the file, and close it (click OK to let 7-Zip update the archive with the change)

6. Open Slack, enjoy it dark :)

Solution 3:

I've actually created a sort of "plugins" infrastructure for slack based in my github repo https://github.com/glajchs/slack-customizations.

It has instructions for how to install (there's a script to do the patching described above in the instructions above), as well as some other modifications I've made that you can selectively turn on if you want, with descriptions (and a few screenshots). My favorite extra plugin is the "random emoji" one :-)

The dark theme is based on the "laCour" user's dark theme from a while back, that I've been maintaining a version of locally, but there's no reason you can't just point at their theme instead.

An important note about the ssb-interop.js file patching described in the other answer (and that I've automated with the ./patch-slack.sh script in my repo). Every time Slack updates to a new version, this file gets overwritten, so you have to re-patch it.

Final note, I don't have it working in Windows yet, but (patch script aside) that should just be a matter of changing some file separator characters.