Skip to content

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

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

commented Aug 16, 2018

Thanks for this! works great

@jsonMartin

This comment has been minimized.

Copy link

commented Aug 17, 2018

Yay! Thank you!

@Lutacon

This comment has been minimized.

Copy link

commented Aug 23, 2018

Works perfectly! Thanks!

@willhayslett

This comment has been minimized.

Copy link

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

commented Aug 28, 2018

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

@nileshtrivedi

This comment has been minimized.

Copy link

commented Aug 29, 2018

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

@adithram

This comment has been minimized.

Copy link

commented Aug 29, 2018

This worked great!

@indradhanush

This comment has been minimized.

Copy link

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

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

commented Sep 7, 2018

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

@johnachor

This comment has been minimized.

Copy link

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

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

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

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

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

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

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

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

commented Oct 9, 2018

Thanks @codyolsen for the summary! Works great!!

@sanjay-shah

This comment has been minimized.

Copy link

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

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

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

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

commented Nov 20, 2018

Thanks.

@gio-salvador

This comment has been minimized.

Copy link

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

commented Dec 3, 2018

Any idea how to use this with Franz?

@celichtenstein

This comment has been minimized.

Copy link

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

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

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

commented Jan 15, 2019

@b3none why not do it yourself then ;)

@WentPostal

This comment has been minimized.

Copy link

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.

@rgschofield

This comment has been minimized.

Copy link

commented Feb 18, 2019

Yep, same here. White thread reply box.

@joebrislin

This comment has been minimized.

Copy link

commented Feb 27, 2019

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

This comment has been minimized.

Copy link

commented Mar 2, 2019

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

Works very well, suggestions welcome.

@LanikSJ

This comment has been minimized.

Copy link

commented Mar 8, 2019

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

@Dokixi

This comment has been minimized.

Copy link

commented Mar 8, 2019

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

Slack-dark-mode-code snippets numbers missing

@LanikSJ

This comment has been minimized.

Copy link

commented Mar 8, 2019

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.

@Dokixi

This comment has been minimized.

Copy link

commented Mar 9, 2019

@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. :/

@LanikSJ

This comment has been minimized.

Copy link

commented Mar 10, 2019

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.

@mbonsack

This comment has been minimized.

Copy link

commented Mar 12, 2019

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?

@osilva88

This comment has been minimized.

Copy link

commented Mar 13, 2019

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

image

@bric3

This comment has been minimized.

Copy link

commented Mar 14, 2019

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

This comment has been minimized.

Copy link

commented Mar 22, 2019

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.

@a7madgamal

This comment has been minimized.

Copy link
Owner Author

commented Mar 22, 2019

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

@LanikSJ

This comment has been minimized.

Copy link

commented Mar 22, 2019

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.

@twitterkb

This comment has been minimized.

Copy link

commented Apr 21, 2019

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

@ddcrjlalumiere

This comment has been minimized.

Copy link

commented Apr 29, 2019

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.

@LanikSJ

This comment has been minimized.

Copy link

commented May 4, 2019

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

@willgk

This comment has been minimized.

Copy link

commented May 7, 2019

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.

@LanikSJ

This comment has been minimized.

Copy link

commented May 8, 2019

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

@realtonyyoung

This comment has been minimized.

Copy link

commented Jun 17, 2019

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?

@abhinav37

This comment has been minimized.

Copy link

commented Jun 19, 2019

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
}
@LanikSJ

This comment has been minimized.

Copy link

commented Jun 20, 2019

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

@marchrius

This comment has been minimized.

Copy link

commented Jun 20, 2019

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

@LanikSJ

This comment has been minimized.

Copy link

commented Jun 20, 2019

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
@marchrius

This comment has been minimized.

Copy link

commented Jun 20, 2019

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

@LanikSJ

This comment has been minimized.

Copy link

commented Jun 20, 2019

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)?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.