Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dark mode for Slack on MacOS
  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);
   }
 });
});
  1. Open slack and enjoy the darkness!
@jonnymccullagh

This comment has been minimized.

jonnymccullagh commented Aug 14, 2018

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

@wenbochang

This comment has been minimized.

wenbochang commented Aug 16, 2018

Thanks for this! works great

@jsonMartin

This comment has been minimized.

jsonMartin commented Aug 17, 2018

Yay! Thank you!

@Lutacon

This comment has been minimized.

Lutacon commented Aug 23, 2018

Works perfectly! Thanks!

@willhayslett

This comment has been minimized.

willhayslett commented Aug 27, 2018

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

This comment has been minimized.

indradhanush commented Aug 28, 2018

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

@nileshtrivedi

This comment has been minimized.

nileshtrivedi commented Aug 29, 2018

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

@adithram

This comment has been minimized.

adithram commented Aug 29, 2018

This worked great!

@indradhanush

This comment has been minimized.

indradhanush commented Aug 31, 2018

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

s_2018-08-31_153529

@samjhill

This comment has been minimized.

samjhill commented Sep 4, 2018

@indradhanush quick fix

comment thread

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

image

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!

@nkxy

This comment has been minimized.

nkxy commented Sep 7, 2018

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

@johnachor

This comment has been minimized.

johnachor commented Sep 12, 2018

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

@EihabShadeed

This comment has been minimized.

EihabShadeed commented Sep 12, 2018

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

@tillt

This comment has been minimized.

tillt commented Sep 12, 2018

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

@a7madgamal

This comment has been minimized.

Owner

a7madgamal commented Sep 13, 2018

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

@rtloeffler

This comment has been minimized.

rtloeffler commented Sep 17, 2018

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

@rtloeffler

This comment has been minimized.

rtloeffler commented Sep 17, 2018

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

@codyolsen

This comment has been minimized.

codyolsen commented Sep 26, 2018

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

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

This comment has been minimized.

marchrius commented Oct 1, 2018

@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

@hemanthpai

This comment has been minimized.

hemanthpai commented Oct 9, 2018

Thanks @codyolsen for the summary! Works great!!

@sanjay-shah

This comment has been minimized.

sanjay-shah commented Oct 15, 2018

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

@jlucier

This comment has been minimized.

jlucier commented Oct 25, 2018

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;}');
    }
  });
});
@DerekK19

This comment has been minimized.

DerekK19 commented Nov 9, 2018

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

@sishbi

This comment has been minimized.

sishbi commented Nov 15, 2018

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

@cecez

This comment has been minimized.

cecez commented Nov 20, 2018

Thanks.

@gio-salvador

This comment has been minimized.

gio-salvador commented Nov 23, 2018

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

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

  • constructive criticism welcome.
@grimm26

This comment has been minimized.

grimm26 commented Dec 3, 2018

Any idea how to use this with Franz?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment