[Dark Slack] How to hack Slack to get a dark theme #slack #css #hack

HowToSlackDark.md

🔥 How to "Hack" Slack to get a 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

VOILA! Open slack and Enjoy! 💪

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?

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

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

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

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?

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

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

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

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.

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