Hunter Chang

Posted on Sep 4, 2018 • Edited on Jul 23, 2019

Easy Dark Mode for Slack

#slack

UPDATE: As of Slack 4.0, the methods below no longer work. I've had success using this: https://github.com/LanikSJ/slack-dark-mode

I recently got this from a co-worker and thought I would share. If you want a quick and easy way of implementing a dark theme in Slack, do the following:

On a Mac, navigate to this directory:

cd /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static

Edit the file ssb-interop.js with a text editor.

Add this code to the very bottom (*edited thanks to amerritt14 for code support):

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.jsdelivr.net/gh/laCour/slack-night-mode/css/raw/black.css',
   success: function(css) {
     let overrides = `
     code { background-color: #535353; color: #85c5ff; } /* Change color: to whatever font color you want */
     .c-mrkdwn__pre, .c-mrkdwn__quote { background: #535353 !important; background-color: #535353 !important; }
     `
     $("<style></style>").appendTo('head').html(css + overrides);
   }
 });
});

Save the file and restart Slack, you should have a Dark theme!

Latest comments (44)

frederic pouyet🇫🇷⭐️⭐️ • Jul 23 '19

Hello
I am using 4.0.0 64-bit version on Windows and the suggested directory does no longer exist. We have now :
\AppData\Local\slack\app-4.0.0\resources\app.asar.unpacked:
+---dist
+---node_modules

Sami Immonen • Jul 19 '19

This awesome dark theme stopped working in Slack 4.0.0. The filepath is broken. Path

/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

no longer works because .../src folder has been entirely deleted. I guess Slack introduced a new place for the ssb-interop.js file or replaced it with new implementation.

Any solutions from anyone?

Hunter Chang • Jul 23 '19

This worked for me: github.com/LanikSJ/slack-dark-mode

Lautaro Lobo • Jul 23 '19

I still looking at how to solve this...

jknight0014 • May 14 '19

This will work for you. Again, put it at the end of the ssb-interop.js file. If you are running on Windows, use the forward slash and start the path with 'C:/' :

document.addEventListener('DOMContentLoaded', function() {
var fs = require('fs'),
filePath = '/Applications/Slack.app/Contents/Resources/black-slack.css';

fs.readFile(filePath, {encoding: 'utf-8'}, function(err, data) {
if (!err) {
var css = document.createElement('style')
css.innerText = data;
document.getElementsByTagName('head')[0].appendChild(css);
}
})
});

Eurodocsis • Mar 27 '19

Hello,

It looks like 3.3.8 broke the skin in the slack "Thread" part
Can someone advise me on how to fix this.

This skin is ery important to me because we are running shift rotations.

Thank you in advance.

Bart

elfia • Feb 7 '19

Hi, any idea how to change the links color in messages? Now it is gray and mixes with the message white text and with the black background.
Thanks

Asjudc • Jan 31 '19

Thanks you! It's great! My eyes are happy

regalrecaller • Jan 30 '19

Hi Hunter, this hack was awesome while it lasted, I wonder if you could update it to the latest version of slack? It doesn't seem to work for version 3.3.7.

Arun • Feb 12 '19

When you say it does not work, are you seeing the text field on Slack threads in white as well?

Arun • Feb 12 '19

A quick workaround is to add .p-threads_footer__input .p-message_input_field { background: #000 }; to the CSS file.

In case anyone wants to use - gist.githubusercontent.com/arunsat...

maybealexandra • May 24 '19

thanks Arun, this fixed the thread sidebar, but still having the issue on the "threads" view (when you click threads in the top left)

reZach • Dec 7 '18

On Windows, you can use this in Explorer to navigate to the correct file

%localappdata%\slack\

Wayne • Nov 28 '18 • Edited

rawgit.com is shutting down. Probably best to use jsdelivr now:

https://cdn.jsdelivr.net/gh/laCour/slack-night-mode/css/raw/black.css

I don't need any overrides anymore because the issues I was having have been fixed in master.

At the bottom of ssb-interob.js:

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