Easy Dark Mode for Slack

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

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 😄

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?

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

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

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

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

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

%localappdata%\slack\

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

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