Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dark mode for Slack on MacOS
@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)?

@marchrius

This comment has been minimized.

Copy link

commented Jun 21, 2019

No, it's a compiled (minified + obfuscated) file and you have to search for exact point where put the script to load css.

@LanikSJ

This comment has been minimized.

Copy link

commented Jun 21, 2019

Sorry for all the stupid questions I'm a bit out of my depth here with this minified / obfuscated code. I usually can make sense of things, but having a hard time with this one.

@LanikSJ

This comment has been minimized.

Copy link

commented Jun 24, 2019

This is another project that describes the issues with Slack version 4: elv1n/slack-dark-mojave-theme#7

@ammmze

This comment has been minimized.

Copy link

commented Jul 11, 2019

Once you unpack the archive, you can still just append the code to the end of the ssb-interop.bundle.js, then re-pack the archive. So far it looks good. I just updated the one i've been somewhat maintaining (the styles themselves are just copied from some other source that I had come across, but I did the installer.

MashupMill/slack-themes@a3765d3

@LanikSJ

This comment has been minimized.

Copy link

commented Jul 12, 2019

Okay I was missing the repack part. You can test the changes for Slack 4.0 in master.

@justinvogt87

This comment has been minimized.

Copy link

commented Jul 12, 2019

Unfortunately still not working for me on the slack-4.0 branch:

bash-3.2$ source slack-dark-mode.sh 

Adding Dark Theme Code to Slack... 
This script requires sudo privileges.
You'll need to provide your password.
npx: installed 21 in 1.529s

Adding Dark Theme Code to Slack... 
document.addEventListener('DOMContentLoaded', function() {
  const fs = require('fs');
  const filePath = "SLACK_DARK_THEME_PATH";
  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);
    }
  });
});
npx: installed 21 in 1.73s

Done! After executing this script, hit refresh (⌘ + R) or restart Slack for changes to take effect.

Sidebar looks great, just still got the glaring white text.

@LanikSJ

This comment has been minimized.

Copy link

commented Jul 12, 2019

@justinvogt87 please try to run the same script again after you've done a git pull on the Slack 4.0 branch.

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

hi
in the new version 4.0.0, the folder src missed & slack white
does anybody know how fixed this trouble?

@M-Brond

This comment has been minimized.

Copy link

commented Jul 15, 2019

Hmm indeed @vtrokhymenko it seems that the ssb-interop.js is no longer in the resources folder. Does someone know how to unpack app.asar.unpacked ?

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

app.asar.unpacked it's folder

@M-Brond

This comment has been minimized.

Copy link

commented Jul 15, 2019

Yes, but there is no ssb-interop.js file?

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

in version 4 no
about me, i returned to the older version, because i can't live without black slack

@M-Brond

This comment has been minimized.

Copy link

commented Jul 15, 2019

Great idea. How did you manage to do that? Especially on MacOS?

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

by this link u can download version 3.4.2 and after easy do slack black

@M-Brond

This comment has been minimized.

Copy link

commented Jul 15, 2019

Thank you so much! Finally got the Slack black again thanks.

@iamrickylai

This comment has been minimized.

Copy link

commented Jul 15, 2019

by this link u can download version 3.4.2 and after easy do slack black

Lucky we still can download the previous version, 4.0 messed things up.

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

did i think, maybe write an email to slack and push them to add a black theme from the box? :idk:

@jenbutongit

This comment has been minimized.

Copy link

commented Jul 15, 2019

@LanikSJ nice, thank you! slack-4.0 branch is working for me. No issues I can see so far.

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

@jenbutongit did u run successful code from repo to do slack-4.0.0 black?

@jenbutongit

This comment has been minimized.

Copy link

commented Jul 15, 2019

@vtrokhymenko yep. On macOS Mojave / Slack v4.0.0

git clone https://github.com/LanikSJ/slack-dark-mode
git checkout slack-4.0
cd slack-dark-mode && source slack-dark-mode.sh
Then restart slack

@tnesavich

This comment has been minimized.

Copy link

commented Jul 15, 2019

Slack 4.0 is missing Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

Looks like this will have to be re-written to leverage an alternative approach.

@jenbutongit

This comment has been minimized.

Copy link

commented Jul 15, 2019

@tnesavich the ssb-interop.bundle.js file is in the packaged app.asar (packed version). @LanikSJ addressed this issue here here. Their script is unpacking the .asar to app.asar.unpacked, injecting the styles and then repacking.

@LanikSJ

This comment has been minimized.

Copy link

commented Jul 15, 2019

I see that Slack 4.0 is out of the Apple App Store, even though it's not updated on their web site. I've merged all the changes from slack-4.0 branch to master now.

@tnesavich

This comment has been minimized.

Copy link

commented Jul 15, 2019

@LanikSJ npx command is failing. I have pasted the output I am receiving below for reference:

$sudo cd slack-dark-mode && source slack-dark-mode.sh
Password:

Adding Dark Theme Code to Slack...
This script requires sudo privileges.
You'll need to provide your password.
Password:
Password:
npx: installed 21 in 3.387s
Unexpected token function
Password:

document.addEventListener('DOMContentLoaded', function() {
const fs = require('fs');
const filePath = "SLACK_DARK_THEME_PATH";
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);
}
});
});
Password:
Password:
npx: installed 21 in 2.599s
Unexpected token function

Done! After executing this script restart Slack for changes to take effect.

@tnesavich

This comment has been minimized.

Copy link

commented Jul 15, 2019

@LanikSJ

Also, wanted to give you the heads up that when trying to unpack just ssb-interop.js I get the following:

sudo npx asar extract-file /Applications/Slack.app/Contents/Resources/app.asar ssb-interop.js
Password:
npx: installed 21 in 2.618s
Unexpected token function

@vtrokhymenko

This comment has been minimized.

Copy link

commented Jul 15, 2019

@tnesavich to fixed npx run the next command:
brew install node

@demisx

This comment has been minimized.

Copy link

commented Jul 15, 2019

This is what worked for me in MacOs Mojave:

git clone https://github.com/LanikSJ/slack-dark-mode
cd slack-dark-mode/
chmod +x slack-dark-mode.sh
sudo ./slack-dark-mode.sh

Restart Slack.

@tnesavich

This comment has been minimized.

Copy link

commented Jul 15, 2019

@demisx @LanikSJ

Tried reinstalling slack completely and re-ran the dark-theme.sh as per suggested but the theme is still not applying. Wanted to share my notes with you below to see if there might be something to fix this.

Thanks in advance!

I am seeing that /Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/ssb-interop.bundle.js does in fact get appended with:

//# sourceMappingURL=ssb-interop.bundle.js.map
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);
}
});
});

However, it almost feels as if the dark-theme.css is not being applied. I search for where the css files are stored and noticed that the dark-theme.css was only in:
/Applications/Slack.app/Contents/Resources/dark-theme.css

so I added it to the other 2 locations where I am seeing css files:
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/dark-theme.css
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/node_modules/winston-transport/coverage/lcov-report/dark-theme.css

@ralphmurphy715

This comment has been minimized.

Copy link

commented Jul 15, 2019

Pre-req: Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

This worked for me:

brew install npm
 git clone https://github.com/LanikSJ/slack-dark-mode
 cd slack-dark-mode && source slack-dark-mode.sh
@Dahmenator

This comment has been minimized.

Copy link

commented Jul 15, 2019

@ralphmurphy715

Thanks! Your is the only set of instructions so far that worked for me. I am once again enjoying dark mode on Slack 4.0 desktop.

@tnesavich

This comment has been minimized.

Copy link

commented Jul 15, 2019

@ralphmurphy715

Thanks for your post Ralph. Not sure why it is still not working as I have both Homebrew and npm

$brew --version
Homebrew 2.1.7
Homebrew/homebrew-core (git revision 2a8b9; last commit 2019-07-15)

$npm --version
6.9.0

I am seeing that /Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/ssb-interop.bundle.js is in fact being appended with:

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

I also appended the following to /Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/main.js:
require('./ssb-interop.bundle.js');

However, after restarting Slack the dark-theme is not applied.

@EricVS

This comment has been minimized.

Copy link

commented Jul 16, 2019

Hi,
Following the above steps don't work for me either.
`(venv) slack-dark-mode ➤ sudo ./slack-dark-mode.sh git:master

Adding Dark Theme Code to Slack...
This script requires sudo privileges.
You'll need to provide your password.
npx: installed 21 in 2.676s

document.addEventListener('DOMContentLoaded', function() {
const fs = require('fs');
const filePath = "SLACK_DARK_THEME_PATH";
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);
}
});
});
npx: installed 21 in 2.062s

Done! After executing this script restart Slack for changes to take effect.`

Still with the bright white staring at me :-(

@Dahmenator

This comment has been minimized.

Copy link

commented Jul 16, 2019

Is Slack running when you run the commands? I don't know if it makes a difference, but I did not have Slack running when I ran the terminal commands.

@tnesavich

This comment has been minimized.

Copy link

commented Jul 16, 2019

@EricVS

Let me know if you get a response that works. I am tapped out at present for ideas to fix it.

Thanks!

@tnesavich

This comment has been minimized.

Copy link

commented Jul 16, 2019

@Dahmenator

I have tried running commands with slack running and not and get the same results as @EricVS

@EricVS

This comment has been minimized.

Copy link

commented Jul 16, 2019

I just stopped Slack and ran it again but no joy.

@tnesavich

This comment has been minimized.

Copy link

commented Jul 16, 2019

@here

Wanted to share a couple more things to save people time that I tried just now to get this to work.

Test 1:
Uncommenting "//#sourceMappingURL=ssb-interop.bundle.js.map" in /Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/ssb-interop.bundle.js

Result 1:
Fail

Test 2:
Added the following to /Applications/Slack.app/Contents/Resources/app.asar.unpacked/dist/ssb-interop.bundle.js

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

Result 2:
Fail

@Mackarous

This comment has been minimized.

Copy link

commented Jul 16, 2019

Same issue for me. I had it working under Slack 4.0, then all of a sudden it stopped working and hasn't worked since.

@ammmze

This comment has been minimized.

Copy link

commented Jul 16, 2019

Did you repack everything back to app.asar?

@Mackarous

This comment has been minimized.

Copy link

commented Jul 16, 2019

@ammmze yes I tried running the script, and I tried manually repacking

@drumpat01

This comment has been minimized.

Copy link

commented Jul 17, 2019

 cd slack-dark-mode && source slack-dark-mode.sh

Yes this worked! Thank you so much!

@tnesavich

This comment has been minimized.

Copy link

commented Jul 17, 2019

Here is a link to the fix that worked for me!

LanikSJ/slack-dark-mode#80 (comment)

@Mackarous

This comment has been minimized.

Copy link

commented Jul 17, 2019

The above link posted by @tnesavich also worked for me

@LanikSJ

This comment has been minimized.

Copy link

commented Jul 20, 2019

My project tested with Slack 4.0.1 beta2 and it still works.

@Dahmenator

This comment has been minimized.

Copy link

commented Jul 22, 2019

Interesting. Came to work this morning, launched Slack, and no dark mode. Nothing else is different on my iMac. Didn't even use Slack this weekend. The link posted above by @tnesavich is currently broken. All attempts to reinstall dark mode say they are successful but they aren't.

@Dahmenator

This comment has been minimized.

Copy link

commented Jul 22, 2019

The link @tnesavich is now working (loading) and the suggested tip contained in that link worked for me. Dark Mode has been restored.

@BenGitsCode

This comment has been minimized.

Copy link

commented Jul 24, 2019

This is a shot in the dark, but has anyone put together a collection of some of these classes and what they're mapped to?

Maybe it changes so much that's untenable but it would be great to have a legend for some of the more common changes people are making—without constantly guessing and refreshing 😅 (specifically my channels with unread messages indicator used to be blue but ever switching to @LanikSJ 's version—thank you!— it's a gray that makes them fade into the background a lot. I love most of that theme but think that would be a nice change and would make those pop a little more.)

Basically making the text color for the two elements I highlighted to be that same blue as the unread channel headers (which I also borked at some point as well) Image 2019-07-24 at 8 10 21 AM
@jenbutongit

This comment has been minimized.

Copy link

commented Jul 24, 2019

@BenGitsCode have you had a look at the theme repo? The script uses the black/default theme. https://github.com/laCour/slack-night-mode

This is another theme in the same repo with the variables it's overriding for example. You might have to do some more digging in the scss if it doesn't fix your problem

@BenGitsCode

This comment has been minimized.

Copy link

commented Jul 24, 2019

Oh I hadn't really looked through that but I think it will help. I know had it closer thrashing my way through any class with unread in the name yesterday so I'll just have to go a little slower to get only those changes. This will definitely help though, thanks @jenbutongit!

@demisx

This comment has been minimized.

Copy link

commented Jul 31, 2019

Just tested it again after Slack upgrade to 4.0.1 on MacOs Mojave 10.14.5 and had no problem activating the Dark mode:

  1. Shut down Slack

  2. Run these:

 git clone https://github.com/LanikSJ/slack-dark-mode
 cd slack-dark-mode/
 chmod +x slack-dark-mode.sh
 sudo ./slack-dark-mode.sh
  1. Start Slack
@chandlervdw

This comment has been minimized.

Copy link

commented Jul 31, 2019

@demisx nice, thanks! Any tips on how to uninstall if I get tired of it? Or better yet — have it toggle on/off based on the System Preference for Light/Dark mode?

@marcus

This comment has been minimized.

Copy link

commented Aug 1, 2019

It's also working fine in 4.0.2-beta1

@KillerSquid

This comment has been minimized.

Copy link

commented Aug 1, 2019

Same! Just ran on Mac Mojave 10.14.5 (current as of Aug 1, 2019) and Slack 4.0.1
PERFECT!

@KillerSquid

This comment has been minimized.

Copy link

commented Aug 1, 2019

Any way to get rid of the stoplight bar at the top of the window and just run "headless"?

@mikey-t

This comment has been minimized.

Copy link

commented Aug 1, 2019

If anyone is interested, I created a shell script to make a dark theme work with version 4: https://github.com/mikey-t/slack-dark-theme.
The CSS needs a little TLC as it's for an older version of Slack 3, but it's a pretty good start.

Rather than doing a fetch for the css it's adding them from a file in the same folder as the shell script and is setup to allow for rapid changes to make it easier to make changes and test them quickly.

@M-Brond

This comment has been minimized.

Copy link

commented Aug 6, 2019

The script of @demisx is great, however, I still face the following issue:

Adding Dark Theme Code to Slack... cp: dark-theme.css: No such file or directory
52: event-listener.js: No such file or directory

The missing files are in the same folder but unable for the Terminal to locate them out of the blue.
I'm sure it's because I lack some Terminal/coding skills here, but it would be really amazing if someone can explain how to have the script add the .css and the .js files.

Thanks!

Edit: tried to add the path to file in the script but no result.
CSS=/Users/User/Downloads/slack-dark-theme-master/$(<slack-dark.css) JS=/Users/User/Downloads/slack-dark-theme-master/$(<slack-dark.js)

@LanikSJ

This comment has been minimized.

Copy link

commented Aug 8, 2019

@a7madgamal

This comment has been minimized.

Copy link
Owner Author

commented Aug 8, 2019

@LanikSJ thanks A LOT :)
updated the gest with your script and I hope soon we won't need any scripts, they should do it already!
let's nag slack on twitter to push them 🤓

@M-Brond

This comment has been minimized.

Copy link

commented Aug 9, 2019

Hey @LanikSJ yes saw that one thanks, but sadly my terminal skills aren't sufficient enough to make this work:

$ git clone https://github.com/LanikSJ/slack-dark-mode && cd slack-dark-mode \
Got this one.

&& chmod +x slack-dark-mode.sh && ./slack-dark-mode.sh \
What about the "&" this isn't a Terminal command is it? Same goes for the rest.

&& osascript -e 'tell application "Slack" to quit' \
&& killall Slack && sleep 60 && open -a "/Applications/Slack.app"

This issue got me started learning the terminal but besides that it would be really owesome to have Slack working in black.
Thanks!

@vtrokhymenko

This comment has been minimized.

Copy link

commented Aug 9, 2019

Hey @LanikSJ yes saw that one thanks, but sadly my terminal skills aren't sufficient enough to make this work:

$ git clone https://github.com/LanikSJ/slack-dark-mode && cd slack-dark-mode \
Got this one.

&& chmod +x slack-dark-mode.sh && ./slack-dark-mode.sh \
What about the "&" this isn't a Terminal command is it? Same goes for the rest.

&& osascript -e 'tell application "Slack" to quit' \
&& killall Slack && sleep 60 && open -a "/Applications/Slack.app"

This issue got me started learning the terminal but besides that it would be really owesome to have Slack working in black.
Thanks!

hi

&& it's like and

for example, u can separate these commands like:
$ git clone https://github.com/LanikSJ/slack-dark-mode (to do this command u should have installed git)
$ cd slack-dark-mode

@demisx

This comment has been minimized.

Copy link

commented Aug 9, 2019

@M-Brond && will execute the next command only if the previous one succeeds (e.g. exits with code 0). Often used as a way to chain multiple commands on one line and ensure the execution chain stops as soon as the first command fails. You can rewrite those to execute one at a time you feel more comfortable that way:

# For macOS Users
$ git clone https://github.com/LanikSJ/slack-dark-mode
$ cd slack-dark-mode
$ chmod +x slack-dark-mode.sh
$ ./slack-dark-mode.sh
$ osascript -e 'tell application "Slack" to quit'
$ killall Slack
$ sleep 60
$ open -a "/Applications/Slack.app"

Where $ indicates shell prompt and may be different for you. You don't need to copy that, obviously. It's not part of a command.

@LanikSJ

This comment has been minimized.

Copy link

commented Aug 9, 2019

@M-Bond \ are just line separators and just like everyone said before me && is literally translated to "and".

@diamondsw

This comment has been minimized.

Copy link

commented Aug 10, 2019

Tried this today; sed doesn't check for bootSonic:"always", which was the default in my local-settings.json .

@M-Brond

This comment has been minimized.

Copy link

commented Aug 10, 2019

Hey @M-Brond and @LanikSJ

Thank you so much! It works now, really appreciate your help.

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.