Dark mode for Slack on MacOS

dark.md

FINALLY no need for tricks!

bonus tip: for more darkness > https://darkreader.org/

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

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

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.

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

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

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

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.

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

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

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 ?

app.asar.unpacked it's folder

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

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

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

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

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

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.

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

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

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

@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

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.

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

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.

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

@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

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

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.

@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

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

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

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

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 :-(

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.

@EricVS

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

Thanks!

@Dahmenator

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

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

@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

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.

Did you repack everything back to app.asar?

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

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

Yes this worked! Thank you so much!

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

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

The above link posted by @tnesavich also worked for me

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

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.

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

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)

@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

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!

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

3. Start Slack

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

It's also working fine in 4.0.2-beta1

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

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

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.

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)

@M-Brond try these instructions: https://github.com/LanikSJ/slack-dark-mode#usage

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

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!

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

@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 (copy & paste all or one commands at a time)
# Last tested Slack version: 4.0.2
$ 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.

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

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

Hey @M-Brond and @LanikSJ

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

Thank you so much. it works for me.

Hi all!

I just ran the commands for Slack 4.0.2 and the colors are exactly the same. Any recommendations?

At the end of the process I can see in the terminal:

npx: installed 21 in 3.054s
promisify is not a function

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

Thanks!

@daspuru try these instructions: https://github.com/LanikSJ/slack-dark-mode#usage

@daspuru try these instructions: https://github.com/LanikSJ/slack-dark-mode#usage

Hi @LanikSJ, thanks, but I followed the instructions with no success.. One thing to notice is that I got this message: promisify is not a function.

Please look at this screenshot:

I already tried: npm install util.promisify

In Slack, Help -> Troubleshooting -> Clear Cache and Restart.

Can't help you with your promisify error message. I'm not familiar with it.

@daspuru What version of node are you running? I believe pomisify() fn was introduced in utils package starting with node v8.

$ node -v 

@demisx Version is v7.9.0

@LanikSJ Cleaning cache is not working.

Thanks all

You need to update your NodeJS to at least latest LTS.

@LanikSJ Upgrading did the trick. Thanks a lot!! :)

@LanikSJ Thanks for the update, those instructions worked

Using the instructions my terminal session on my Mac just hangs for 3-5 minutes. Once or twice I got a "Socket is not connected" error or something of the like. Otherwise it just hangs and nothing happens. Slack is closed, tried running using sudo and without.

Slack now supports Dark Mode natively: https://slackhq.com/dark-mode-for-slack-desktop

@a7madgamal if you could update the first post to reflect this. 😎

Slack now supports Dark Mode natively: https://slackhq.com/dark-mode-for-slack-desktop

@a7madgamal if you could update the first post to reflect this. 😎

I just saw this! Great news!

FINALLYYYYYYYYY 🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

How does one remove/uninstall the dark mode content we've been tooling around with using git?

Reinstall Slack. Problem solved. 😎

@LanikSJ

Thanks! Worked like a charm.

Thank you guys for this beautiful trip! Bye.