Dark mode for Slack on MacOS

dark.md

1. Close slack
2. Open this file /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
3. Append this to it

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

4. Open slack and enjoy the darkness!

On linux I edited:
/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

Thanks for this! works great

Yay! Thank you!

Works perfectly! Thanks!

To get white menu links:

document.addEventListener('DOMContentLoaded', function() {
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  $.ajax({
      url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
      success: function(css) {
          $("<style></style>").appendTo('head').html(css + tt__customCss);
      }
  });
});

Thanks! This is great including the fix for menu items! :)

Where to find this file if using Slack in Station app?

This worked great!

When replying to a thread, the typed out text is hard to see. Any suggestions on making this darker?

@indradhanush quick fix

comment thread

$("<style></style>").appendTo('head').html('#reply_container.upload_in_threads .inline_message_input_container {background: padding-box #545454}')

purple channel nav bar -> dark grey

$("<style></style>").appendTo('head').html('.p-channel_sidebar {background: #363636 !important}'); 

I made a quick shell script to automate the process, if you'd like. Here you go!

@samjhill your shell script worked great! Thanks for making it so easy 💯

Windows file location: %LOCALAPPDATA%\slack\app-[version]\resources\app.asar.unpacked\src\static

To get white menu links:

document.addEventListener('DOMContentLoaded', function() {
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  $.ajax({
      url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
      success: function(css) {
          $("<style></style>").appendTo('head').html(css + tt__customCss);
      }
  });
});

you need to add this line as well:

#client_body:not(.onboarding):not(.feature_global_nav_layout):before {
    background: inherit;
}

it will fix some more white areas in the sidebar

We still need some love in the search results - currently very hard to read.

BTW the script link from the snippet is always updates, you might not need some of the custom fixes if it was fixed

I appended the following:
and now when i open slack it just spins on the welcome message... suggestions?

document.addEventListener('DOMContentLoaded', function() { let tt__customCss = .menu ul li a:not(.inline_menu_link) {color: #fff !important;} $.ajax({ url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css', success: function(css) { $("<style></style>").appendTo('head').html(css + tt__customCss); } }); });

I appended the following:
and now when i open slack it just spins on the welcome message... suggestions?

document.addEventListener('DOMContentLoaded', function() { let tt__customCss =.menu ul li a:not(.inline_menu_link) {color: #fff !important;}$.ajax({ url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css', success: function(css) { $("<style></style>").appendTo('head').html(css + tt__customCss); } }); });

Oddly enough i had to reinstall slack for some reason, just overwrote previous install and applied changed. THANKS OP

Thanks all. Works great. Here is everything in the thread up to this point all nice and pretty:

On mac you can easy add the code as follows:

1. Copy paste the following into the terminal but DO NOT PRESS RETURN:
   pbpaste >> /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

2. Then add the following snippet to your clipboard a la command+c

document.addEventListener('DOMContentLoaded', function() {
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  $.ajax({
      url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
      success: function(css) {
          $("<style></style>").appendTo('head').html(css + tt__customCss);
          $("<style></style>").appendTo('head').html('#reply_container.upload_in_threads .inline_message_input_container {background: padding-box #545454}');
          $("<style></style>").appendTo('head').html('.p-channel_sidebar {background: #363636 !important}'); 
          $("<style></style>").appendTo('head').html('#client_body:not(.onboarding):not(.feature_global_nav_layout):before {background: inherit;}'); 
      }
  });
});

3. Then go back to terminal and press enter. It will dump your clipboard into the file.

@codyolsen You have to use root to write into Applications folder.
So, the command will be pbpaste | sudo tee -a /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

Thanks @codyolsen for the summary! Works great!!

Thanks for gisting this! After upgrading to Mojave, slack's white back ground was piercing my eyes.

If you want to be a bit cautious on the security front, you can download the css from https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css to a file (i.e. /Applications/Slack.app/Contents/Resources/slack-black.css) and load it from disk instead of over the internet.

This worked for me, thanks to the above posts from @codyolsen and @marchrius.

Add this to /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js:

document.addEventListener('DOMContentLoaded', function() {
  let fs = require('fs');
  let filePath = '/Applications/Slack.app/Contents/Resources/slack-black.css';
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  fs.readFile(filePath, {encoding: 'utf-8'}, function(err, css) {
    if (!err) {
      $("<style></style>").appendTo('head').html(css + tt__customCss);
      $("<style></style>").appendTo('head').html('#reply_container.upload_in_threads .inline_message_input_container {background: padding-box #545454}');
      $("<style></style>").appendTo('head').html('.p-channel_sidebar {background: #363636 !important}');
      $("<style></style>").appendTo('head').html('#client_body:not(.onboarding):not(.feature_global_nav_layout):before {background: inherit;}');
    }
  });
});

Thanks jlucier. I did get caught out by one small issue with your instructions - may be helpful for others to look out for this. The css file was named black.css, but when you copy it to the Slack app, you need to remember to change its name to slack-black.css

@jlucier Unfortunately local file loading did not work for me... so I have to use the 'Ajax' method

Thanks.

thanks @jlucier, if you want to make it easier to do the changes:

https://github.com/gio-salvador/slack_dark_theme

• constructive criticism welcome.

Any idea how to use this with Franz?

Any idea how to use this with Franz?

Would love to know this as well

If someone could take the time to do a darcula theme I will nut on video.

Sidebar was still not quite what I wanted it to be. I'm using these colors to customize the rest of the client.

#2A2A2A,#2A2A2A,#454647,#FFFFFF,#454647,#FFFFFF,#3DBA0F,#EF4933

@b3none why not do it yourself then ;)

For some reason this morning my reply in threads is now white again. Anyone else run into this? It has been working for months and even after I updated to 3.3.6.

Yep, same here. White thread reply box.

I was able to fix the updated thread reply box by setting the following although I'd prefer to do a fully updated css. This was quicker for now.

document.addEventListener('DOMContentLoaded', function() {
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  $.ajax({
      url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
      success: function(css) {
          $("<style></style>").appendTo('head').html(css + tt__customCss);
          $("<style></style>").appendTo('head').html('.p-threads_footer__input--legacy .p-message_input_field {background: padding-box #545454}');
          $("<style></style>").appendTo('head').html('.p-threads_footer__input--legacy .p-message_input_file_button {background: padding-box #545454}');
          $("<style></style>").appendTo('head').html('.p-threads_footer__input--legacy .p-message_input_field .ql-placeholder {color: #e6e6e6}');
          $("<style></style>").appendTo('head').html('.p-threads_footer__input .p-message_input_field.focus~.p-message_input_file_button:not(:hover) {color: #949494}');
          $("<style></style>").appendTo('head').html('.c-texty_input.focus .c-texty_input__button {color: #949494}');
          $("<style></style>").appendTo('head').html('.p-channel_sidebar {background: #363636 !important}');
          $("<style></style>").appendTo('head').html('#client_body:not(.onboarding):not(.feature_global_nav_layout):before {background: inherit;}');
      }
  });
});

I've been incorporating the changes from this thread myself: https://github.com/LanikSJ/slack-dark-mode

Works very well, suggestions welcome.

I'm still seeing Slack Posts with white text inside which makes it unreadable. Can one of you CSS gurus help me figure out what we need to change? Thanks.

EDIT: I figured it out. I had to change something in black.css (I use dark-theme.css in my repo): LanikSJ/slack-dark-mode@26100e9

Does anybody know how to fix the number row colors for code or text snippets in slack channels/chats with dark mode enabled? (I have already added all the updated dark mode fixes from this thread).

I've added the channel previews now: LanikSJ/slack-dark-mode@0d9d74a it's not perfect so some suggestions welcomed.

@Dokixi try the code in my repo, seems to work for code / text snippets.

@LanikSJ I have added your updated code in the "dark-theme.css" file, which I have added in the "Resources" folder in the Slack application files, and I have added your "event-listener.js" code into the buttom of the "ssb-interop.js" file in Slack.

It dosent seem to be fixed for me, same problem as before. :/

My bad I see what you mean now. I also see no text when you attach screenshots. The text is the same color as the background. I'll work on that when I have time and see if I figure things out.

My code snippets are still white background/black text (like dark mode is not applied to them at all). They don't look like the example above. Cloned latest repo. Ideas?

Hi all. This all worked for me until @indradhanush pointed out that the thread replies were hard to see. I was then confused on @samjhill's comment on the new code line to add. Everything is back to white. Can someone provide me with the full code, including adding the dark mode thread replies? Thank you.

$("<style></style>").appendTo('head').html('#reply_container.upload_in_threads .inline_message_input_container {background: padding-box #545454}')

@osilva88 try that, it's adapted from https://github.com/LanikSJ/slack-dark-mode/

Close your slack app.
Download the file https://raw.githubusercontent.com/LanikSJ/slack-dark-mode/master/dark-theme.css to this location : /Applications/Slack.app/Contents/Resources/dark-theme.css then add at the end of /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js.

document.addEventListener('DOMContentLoaded', function() {
  const fs = require('fs');
  const filePath = '/Applications/Slack.app/Contents/Resources/dark-theme.css';
  const tt__customCss = '.menu ul li a:not(.inline_menu_link) {color: #fff !important;}'
  fs.readFile(filePath, {
    encoding: 'utf-8'
  }, function(err, css) {
    if (!err) {
      $("<style></style>").appendTo('head').html(css + tt__customCss);
      $("<style></style>").appendTo('head').html('.p-threads_footer__input--legacy .p-message_input_field {background: padding-box #545454}');
      $("<style></style>").appendTo('head').html('.p-threads_footer__input--legacy .p-message_input_file_button {background: padding-box #545454}');
      $("<style></style>").appendTo('head').html('.p-threads_footer__input--legacy .p-message_input_field .ql-placeholder {color: #e6e6e6}');
      $("<style></style>").appendTo('head').html('.p-threads_footer__input .p-message_input_field.focus~.p-message_input_file_button:not(:hover) {color: #949494}');
      $("<style></style>").appendTo('head').html('.c-texty_input.focus .c-texty_input__button {color: #949494}');
      $("<style></style>").appendTo('head').html('.p-channel_sidebar {background: #363636 !important}');
      $("<style></style>").appendTo('head').html('#client_body:not(.onboarding):not(.feature_global_nav_layout):before {background: inherit;}');
    }
  });
});

I've added the retention page now: https://github.com/LanikSJ/slack-dark-mode/

I'm still no closer to figure out the numbers in code blocks and the attachment text. I'm open to ideas.

it would be awesome if everyone who added a some hotfix in this thread sent PRs to the main projects instead <3

Main project is using the web app with stylesheets. Personally I'm using the Mac App so I can't contribute what I'm doing back to the project.

just recently, Slack updated its -beta, and the re-install naturally overwrote away my changes from this gist.

so i came back to re-install.

for safety sake in terms of being very paranoid about css injection in general, i'm going to re-emphasize this point made by @jlucier (with a couple of minor changes, noted below …)

https://gist.github.com/a7madgamal/c2ce04dde8520f426005e5ed28da8608#gistcomment-2741931

If you want to be a bit cautious on the security front, you can download the css from the css to a file (i.e. /Applications/Slack.app/Contents/Resources/slack-black.css) and load it from disk instead of over the internet.

This worked for me, thanks to the above posts from @codyolsen and @marchrius.

Add this to /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js:

my modifications to his snippet below:

1. copy to file /Library/Application Support/Slack/slack-black.css so when /Applications/Slack.app or Slack-beta.app updates itself, you don't lose the .css file or changes (even though you still do have to edit ssb-interop.js)
2. get rid of the 3 now unnecessary lines in his change, since the .css has been updated to include them.

document.addEventListener('DOMContentLoaded', function() {
  let fs = require('fs');
  let filePath = '/Library/Application Support/Slack/slack-black.css';
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  fs.readFile(filePath, {encoding: 'utf-8'}, function(err, css) {
    if (!err) {
      $("<style></style>").appendTo('head').html(css + tt__customCss);
    }
  });
});

(to be super clear, i use https://github.com/LanikSJ/slack-dark-mode/blob/master/dark-theme.css, and i've adjusted #222 to #111 and #363636 to #222 because i like things a bit darker.)

This mostly works great! The one issue I'm noting is that the "All Threads" view still is light themed, aside from the reply input box.

@twitterkb my CSS is compatible with the latest Slack Beta.

@ddcrjlalumiere if you use the CSS in my repo, which @twitterkb reiterated then you'll get "All Threads" view in dark theme.

Is there a way to fix the preferences pages? They seem to all have a white background but get the text color changes. Which makes them a little hard to read.

I fixed some issues in LanikSJ/slack-dark-mode#57 I'll add more fixes as time permits.

I love this! Thanks for sharing!

Any chance the blue sidebar with the channel and DM names could be black with white lettering instead of blue?

The rollover colours could be lighter gray perhaps?

Personally I think the best and safest way is to add this to ssb-interlop.js

 document.addEventListener('DOMContentLoaded', function () {

    var filepath = '/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/black.css'
    fs.readFile(filepath, 'utf-8', (err, css) => {
      if (err) {
        alert("An error ocurred reading the file :" + err.message);
        return;
      }

      let overrides = `
      code { color: #f44336; } /* Change color: to whatever font color you want */
      `
      $("<style></style>").appendTo('head').html(css + overrides);
    });
  });

and downloaded the black.css file and save it alongside the ssb-interlop. This will prevent a security breach

to fix the color issue you can always add

.p-threads_view__default_background {background: #222222;}
.p-threads_view {background: #222222;}
.p_threads_view_load_newer_button, .p_threads_view_load_older_button{background: #222222;}
.p-threads_view_reply--new_reply {
  background: #444444;
}
.p-channel_sidebar__banner--unreads {
  background: #ef6c00; //set to whatever sidebar unread message color you want
}

ssb-interlop.js doesn't exist in new 4.0.0 beta version of Slack for macOS. If someone knows where we can add our custom CSS in the new version then we can continue to use this until that time we're SOL with Slack 4.0+.

@LanikSJ there is a ssb-interlop.bundle.js in the app.asar package

Not with a new version:

→ find /Applications/Slack.app/Contents/Resources -iname "*.js"
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/popups/shared.js
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/build/background.js
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/build/backend.js
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/build/panel.js
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/build/main.js
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/build/inject.js
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/static/extensions/react-devtools/build/contentScript.js

I'm sorry, it is in the /Applications/Slack.app/Contents/Resources/app.asar package, you have to unpack it first

Okay I see what you mean now. I expected the package to be extracted fully but it doesn't look like it is. Do I just add my code to the bottom of ssb-interlop.bundle.js (it looks quite different then before)?