DEV Community

loading...

Easy Dark Mode for Slack

Hunter Chang
Sleep Deprived Father. Senior Web Developer. Lover of all things Ramen and Kpop.
Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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);
   }
 });
});
Enter fullscreen mode Exit fullscreen mode

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

Discussion (45)

Collapse
fynn_it profile image
fÿm • Edited

code one-liner for repeated injection:

echo 'document.addEventListener("DOMContentLoaded", function() {$.ajax({url: "https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css",success: function(css) {let overrides = "code { background-color: #535353; color: #85c5ff; } .c-mrkdwn__pre, .c-mrkdwn__quote { background: #535353 !important; background-color: #535353 !important; }"; $("<style></style>").appendTo("head").html(css + overrides);}});});' | sudo tee -a /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

just paste in terminal and hit enter
sudo tee -a fix from sven

Collapse
erwinkloosterboer profile image
Erwin Kloosterboer • Edited

i have modified Fynn’s one liner to allow the script to be executed multiple times without adding the code more than once. If you place this script in an automator application on your mac, you can add it as a startup program so that it runs on boot.

sed -i.bak '/darkmode BEGIN/,/darkmode END/d' /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js && echo -e '//darkmode BEGIN\ndocument.addEventListener("DOMContentLoaded", function() {\n $.ajax({\n   url: "https://cdn.jsdelivr.net/gh/laCour/slack-night-mode/css/raw/black.css",\n   success: function(css) {\n     let overrides = `\n     code, pre { background-color: #535353; color: #ffffff; }\n     .c-mrkdwn__pre, .c-mrkdwn__quote, pre { background: #535353 !important; background-color: #535353 !important; }\n     #client_body:not(.onboarding):not(.feature_global_nav_layout):before {display: none;}\n     `\n     $("<style></style>").appendTo("head").html(css + overrides);\n   }\n })});\n//darkmode END' >> /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

edit: Implemented Wayne's jsdelivr modification, used absolute path to ssb-interop.js in sed command

Collapse
fynn_it profile image
fÿm

I love this community

Collapse
tedyav profile image
Ted Yavuzkurt

For the security conscious among us (or those on corporate networks that would kill us for including external code in a JS File in our slack), here's a version that inlines the contents of that file, and asks you for permission before updating so you can check out the "css" downloaded.

(I put "css" in quotes because there's a risk that the code could be compromised and not be CSS at all. Articles like this hackernoon.com/im-harvesting-credi... make me nervous about these types of attack vectors).

In any case:

echo "TEXT TO BE ADDED:"; echo "document.addEventListener('DOMContentLoaded', function() { const css = \`$(curl --silent https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css)\`; const overrides = 'code { background-color: #535353; color: #85c5ff; } .c-mrkdwn__pre, .c-mrkdwn__quote { background: #535353  background-color: #535353 \!important; }'; \$('<style></style>').appendTo('head').html(css + overrides); });"; echo "LOOKS OKAY??? (y = yes)"; read ANSWER; if ! [[ "$ANSWER" =~ ^([yY][eE][sS]|[yY])+$ ]]; then echo "YOU DID NOT ENTER YES. NOT UPDATING"; else; echo "EVERYTHING LOOKS GOOD. UPDATING SLACK."; echo "document.addEventListener('DOMContentLoaded', function() { const css = \`$(curl --silent https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css)\`; const overrides = 'code { background-color: #535353; color: #85c5ff; } .c-mrkdwn__pre, .c-mrkdwn__quote { background: #535353  background-color: #535353 \!important; }'; \$('<style></style>').appendTo('head').html(css + overrides); });" | sudo tee -a /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js; fi;
Collapse
tedsvo profile image
Teddy Svoronos

Hey fynn, I tried this command and got the following error:

-bash: /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js: Permission denied

Any idea why?

Collapse
fynn_it profile image
fÿm • Edited

well, sounds like you don't have the right permissions to edit that file.
just add sudo at the beginning of the one-liner (on a  ctrl + a gets you there).

Thread Thread
tedsvo profile image
Teddy Svoronos

Should have said this in my original post, but sudo doesn't seem to help. I have admin permissions on this computer, though it's running Mojave and I'm not sure if that added any complications. I also dragged Terminal into "Full Disk Access" in Security & Privacy preferences just to be sure. Weird.

Thread Thread
fynn_it profile image
fÿm

well, admin permissions and sudo aren't really the same. some files have an extra layer of "protection".

what does ls -la /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js say?

Thread Thread
tedsvo profile image
Teddy Svoronos

Here's what I get:

-rw-r--r-- 1 root wheel 3806 Oct 22 09:03 /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

(I edited the file manually this morning to get it working)

Thread Thread
fynn_it profile image
fÿm

yeah so the file belongs to the root user.. not you, meaning you have to use sudo or chown

Thread Thread
ubuntudroid profile image
Sven Bendel

Just use

echo 'document.addEventListener("DOMContentLoaded", function() {$.ajax({url: "https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css",success: function(css) {let overrides = "code { background-color: #535353; color: #85c5ff; } .c-mrkdwn__pre, .c-mrkdwn__quote { background: #535353 !important; background-color: #535353 !important; }"; $("<style></style>").appendTo("head").html(css + overrides);}});});' | sudo tee -a /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

to fix your permission issues.

Collapse
mykeels profile image
Backlog Slayer

This post inspired this CLI tool, which make it easy to switch among 8 available themes with simple commands like

slack-theme night

to use dark mode, or

slack-theme day

to revert to light mode.

Right now, my slack automatically changes to dark mode at dusk and returns during the day 😄

Collapse
galdin profile image
Galdin Raphael

This is awesome! Thanks!

Collapse
mariusjorgensen profile image
MariusJorgensen

Amazing!

Collapse
noahnawara profile image
Noah Nawara

Hey!

How do you automatically change to dark mode at dusk and returns during the day?
With Automator?

Thanks,

Noah

Collapse
jknight0014 profile image
jknight0014
Collapse
samitapio profile image
Sami Immonen

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?

Collapse
lautarolobo profile image
Lautaro Lobo

I still looking at how to solve this...

Collapse
changoman profile image
Hunter Chang Author
Collapse
waynehoover profile image
Wayne • 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);
   }
 });
}
Collapse
amerritt14 profile image
amerritt14 • Edited

Some of the markup needs to be fixed.
'code' '''preformatted''' and >quote are all black on black backgrounds and you can't see them. I edited the above code to include:

document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/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);
   }
 });
});

Edited: fixed a typo in the code snippit.
Edited: found a way to also fix backgrounds for '''preformatted''' and >quote

Collapse
devilelephant profile image
devilelephant

You're the hero our office needed today for this. Where can I send a case of ramen?

Collapse
chrisbrandow profile image
christopher

I apologize if this is a trivial question since I know essentially no JS, but how would you modify the added js above in order to read the .css from a local file. the example works great for me, but it doesn't work if I try various paths for replacing the 'url between the single quotes'

Collapse
jknight0014 profile image
jknight0014

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);
}
})
});

Collapse
rezach profile image
reZach

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

%localappdata%\slack\

Collapse
eurodocsis profile image
Eurodocsis

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

Collapse
fredophil profile image
frederic pouyet🇫🇷⭐️⭐️

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

Collapse
david_j_eddy profile image
David J Eddy

Any chance you know the location for Linux (Debian) machines?

Collapse
changoman profile image
Hunter Chang Author • Edited

Think this might work:

Linux: /usr/lib/slack/
Windows: %homepath%\AppData\Local\slack\

Collapse
imranaskem profile image
Imran Askem

This works great on Windows, thanks!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
regalrecaller profile image
regalrecaller

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.

Collapse
arunsathiya profile image
Arun

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

Collapse
arunsathiya profile image
Arun

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

Thread Thread
maybealexandra profile image
maybealexandra

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

Collapse
matteojoliveau profile image
Matteo Joliveau

This is awesome, thank you!

Collapse
elfia profile image
elfia

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

Collapse
almeln profile image
Asjudc

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

Collapse
thealexporter profile image
Alex Porter

I've been looking for a working version of this for a long time. THANK YOU! 🔥

Collapse
fordtaunus profile image
FordTaunus

Just a reminder: You will have to do this again after each Slack update, so keep this page bookmarked ;-)

Collapse
regalrecaller profile image
regalrecaller

Yeah 3.3.7 seems to have broken this hack.

Collapse
alephnaught2tog profile image
M. Shemayev

This is PHENOMENAL.

Collapse
srisankaran profile image
Sri Sankaran • Edited

This works great except in Slack threads.

In a thread the text entry field is white and text is a very light gray.

Collapse
arunsathiya profile image
Arun

I see the same behaviour now, pretty sure this was not the case in the past. Wonder what changed.

Collapse
arunsathiya profile image
Arun

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