Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Dark Slack] How to hack Slack to get a dark theme #slack #css #hack

🔥 How to "Hack" Slack to get a dark theme. 🔥

Slack Dark Theme

❗️ Close Slack if it's running ❗️

Installing theme

In your favorite text editor, open the following file :

  • Windows C:\Users\<USERNAME>\AppData\Local\slack\app-<VERSION>\resources\app.asar.unpacked\src\static\ssb-interop.js
  • macOS Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
    • (To open Slack.app, right click on Slack app icon and click on Show Package Contents)
  • Linux (tested on Fedora) /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

and add the following line at the end of the openned file :

document.addEventListener('DOMContentLoaded', function() {
    $.ajax({
        url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
        success: function(css) {
            $("<style></style>").appendTo('head').html(css);
        }
    });
});

Sidebar colors

To make your sidebar fit your new colors, you can specify directly in your preferences your sidebar colors! From your slack app, go to hamburger menu, then click Files > Preferences > Sidebar > Theme > Custom Theme then copy paste the following : #363636,#444A47,#D39B46,#FFFFFF,#434745,#FFFFFF,#99D04A,#DB6668

Sidebar Dark Colors

VOILA! Open slack and Enjoy! 💪

@JaniMohammed

This comment has been minimized.

Copy link

commented Feb 9, 2018

i don't know please say some things

@jonathanlaf

This comment has been minimized.

Copy link
Owner Author

commented Feb 9, 2018

@BorisG

This comment has been minimized.

Copy link

commented Jul 18, 2018

It does not work on Windows if you’ve installed Slack via the Microsoft Store - Slack is not installed in the path specified here and the ssb-interop.js file is no where to be found…

@arthurio

This comment has been minimized.

Copy link

commented Nov 1, 2018

Thanks @jonathanlaf, this is great :)

@thomascayne

This comment has been minimized.

Copy link

commented Nov 21, 2018

Thanks @jonathanlaf, I spent 30 mins or more trying other themes. Yours work seamlessly.

@nabeat

This comment has been minimized.

Copy link

commented Jan 9, 2019

Many thanks to @jonathanlaf 👏

@TurnipEntropy

This comment has been minimized.

Copy link

commented Jan 22, 2019

For those who installed it with snap on Ubuntu, it is instead in /snap/slack/current/[insert rest of Linux path here]. Of course, you won't be able to edit it without doing some remounting, but at least you know where it is! Thanks to @jonathanlaf

@yoelrc88

This comment has been minimized.

Copy link

commented Jan 29, 2019

Hi @TurnipEntropy, can you help me on how to actually change the file :). You mentioned some mounting needed, can you explain? Thank !

@glostis

This comment has been minimized.

Copy link

commented Mar 1, 2019

Same here @TurnipEntropy @yoelrc88 did you manage to get it working with a snap-installed Slack?

@krazyito65

This comment has been minimized.

Copy link

commented May 28, 2019

Ubuntu Snap:

Create a copy of the 'ssb-interop.js' file (/snap/slack/current/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js) and put it somewhere you can remember. Then add the above event listener.

As root user create a crontab crontab -e and add the following line:

@reboot mount --bind -o nodev,ro /home/krazyito/scripts/ssb-interop.js /snap/slack/current/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

Make sure to update the above with where you put your script.

Going to edit this with a script today, to make sure the ssb-interop.js file is always updated.

@krazyito65

This comment has been minimized.

Copy link

commented May 28, 2019

I wrote this script that you can run in a root crontab and it should work

@reboot /bin/bash /home/krazyito/scripts/slack-dark-mode.sh

or you can run it manually as well as root.

The only thing you should have to adjust is your username where you run the script from in the crontab. The script shouldn't need to be edited for your username.

@dvnrsn

This comment has been minimized.

Copy link

commented Jul 15, 2019

Slack has now changed the directory structure and there is no more ssb-interop.js or any JS files in static. Tried inserting event listener in /extensions/react-devtools/build/main.js and popups/shared.js to no avail. Any ideas?

@demisx

This comment has been minimized.

Copy link

commented Jul 15, 2019

Same issue here. Lost dark mode after today's upgrade to 4.0.0. 😞

@demisx

This comment has been minimized.

Copy link

commented Jul 15, 2019

This worked, though. The dark mode is back in 4.0.0:

git clone https://github.com/LanikSJ/slack-dark-mode
cd slack-dark-mode/
chmod +x slack-dark-mode.sh
sudo ./slack-dark-mode.sh
@trevorh2007

This comment has been minimized.

Copy link

commented Jul 15, 2019

demisx, that didn't work for me, even in that repo's readme it says "Dark Mode in Slack isn't available as of this writing." as of a readme update 2 hours ago edit: that update was 22 days ago

@krazyito65

This comment has been minimized.

Copy link

commented Jul 15, 2019

Slack has now changed the directory structure and there is no more ssb-interop.js or any JS files in static. Tried inserting event listener in /extensions/react-devtools/build/main.js and popups/shared.js to no avail. Any ideas?

what version are you using exactly?

@krazyito65

This comment has been minimized.

Copy link

commented Jul 15, 2019

https://dev.to/mykeels/why-is-slack-changing-its-internals-4p4c -- well this is sad..

With the recent release of v4.0, the file is gone, and exists as a bundled file within app.asar, a compressed file.

To achieve the same functionality, you'd have to extract app.asar into a folder, edit the dist/ssb-interop.bundle.js file, and compress the folder back into app.asar before restarting the application.`

@BluePhoenix

This comment has been minimized.

Copy link

commented Jul 16, 2019

This is sad indeed... found a page that breaks down the steps a bit, but I still haven't had time to try them myself.

Likely way to patch Slack to include dark mode after the changes in 4.0.0+:
https://qiita.com/shoken/items/4f0bbba9b5d911657b5a

@vuphanq

This comment has been minimized.

Copy link

commented Jul 16, 2019

It works!! For Mac, you need to install Homebrew and NPM first if they have not been installed yet.
https://brew.sh/
https://treehouse.github.io/installation-guides/mac/node-mac.html

@Cronocide

This comment has been minimized.

Copy link

commented Jul 16, 2019

Following this guide in conjunction with the code above worked for me.
https://qiita.com/shoken/items/4f0bbba9b5d911657b5a
I did have to run sudo xattr -cr /Applications/Slack.app/ between steps 6 and 7 though.

@mikey-t

This comment has been minimized.

Copy link

commented Aug 1, 2019

I wrote a shell script to automate the unpacking/injecting/packing for Slack 4 if anyone is interested. You can replace my css file with another if you have some CSS you like. https://github.com/mikey-t/slack-dark-theme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.