15

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.

16

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...

Preferences > Sidebar

Theme Selection

4
  • 1
    rawgit.com is about to go offline. I copied down that css and uploaded it to a gist. Use this URL instead: gist.githubusercontent.com/Icebird/… – kwill Apr 10 '19 at 19:32
  • Updated the URL because rawgit is being deprecated. Thanks @kwill ! – ThinkBonobo May 15 '19 at 14:36
  • would be great if someone could create a .css which does not override the sidebar colors (like active item) – TryToSolveItSimple Jun 28 '19 at 10:25
  • Well this solution no longer works, but Slack claims a dark theme is coming to Desktop soon. – kwill Sep 6 '19 at 20:59
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 :)

1
  • It looks like you accidentally created a new account. You might want to use the contact us Link at the bottom of the page and request an account merger – Journeyman Geek Jul 22 '19 at 4:36
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.