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.

Copy link

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.

Copy link

wenbochang commented Aug 16, 2018

Thanks for this! works great

@jsonMartin

This comment has been minimized.

Copy link

jsonMartin commented Aug 17, 2018

Yay! Thank you!

@Lutacon

This comment has been minimized.

Copy link

Lutacon commented Aug 23, 2018

Works perfectly! Thanks!

@willhayslett

This comment has been minimized.

Copy link

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.

Copy link

indradhanush commented Aug 28, 2018

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

@nileshtrivedi

This comment has been minimized.

Copy link

nileshtrivedi commented Aug 29, 2018

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

@adithram

This comment has been minimized.

Copy link

adithram commented Aug 29, 2018

This worked great!

@indradhanush

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

nkxy commented Sep 7, 2018

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

@johnachor

This comment has been minimized.

Copy link

johnachor commented Sep 12, 2018

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

@EihabShadeed

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link
Owner Author

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

hemanthpai commented Oct 9, 2018

Thanks @codyolsen for the summary! Works great!!

@sanjay-shah

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

cecez commented Nov 20, 2018

Thanks.

@gio-salvador

This comment has been minimized.

Copy link

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.

Copy link

grimm26 commented Dec 3, 2018

Any idea how to use this with Franz?

@celichtenstein

This comment has been minimized.

Copy link

celichtenstein commented Dec 22, 2018

Any idea how to use this with Franz?

Would love to know this as well

@b3none

This comment has been minimized.

Copy link

b3none commented Jan 4, 2019

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

@rodriguezsergio

This comment has been minimized.

Copy link

rodriguezsergio commented Jan 8, 2019

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

@a7madgamal

This comment has been minimized.

Copy link
Owner Author

a7madgamal commented Jan 15, 2019

@b3none why not do it yourself then ;)

@WentPostal

This comment has been minimized.

Copy link

WentPostal commented Feb 6, 2019

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.

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