Slack 4.0.0 update breaks compatibility

[iaman]

The long and short of this is that the src directory no longer exists inside of app.asar.unpacked. I'm digging in to see if I can find another place where we can get a foothold for binding the event and doing the CSS insertion required for this to work, but I think Slack may be trying to crack down on custom theming.

[suratovvlad]

I was able just to make asar unpack for app.asar, and beautify C:\Program Files\Slack\resources\app\dist\ssb-interop.bundle.js, as described here for Skype, but didn't find yet the place to insert provided script

[iaman]

@suratovvlad Well, that's going to be a pain to do every update but it should be workable. I'll spend some time this weekend figuring out where we can do the style insertion and submit a PR to update the readme if somebody doesn't beat me to it.

[3b0b]

I was planning on a first step of getting it working from the developer console, and the first stumbling block I've hit is that document.querySelectorAll("webview"); doesn't find anything anymore, and I can't figure out what I'm looking for instead. I can inject the styles into each team individually, but I can't inject them from the container into each team.

[gulo-gulo]

This is the only solution I could find for Slack 4.0.0: https://github.com/LanikSJ/slack-dark-mode/blob/slack-4.0/slack-dark-mode.sh

[swcisel]

@sudochownrwhoami that works for you? I've cloned the repo, checked out the slack-4.0 branch, and run the script. It runs without error, but I don't see a difference when I load Slack.

[david1602]

@swcisel I have tried reproducing that on windows but couldn't get it to work either

[MortalFlesh]

@sudochownrwhoami solution works for me (on osx).

[smitt04]

This is the bash script I use

#! /usr/bin/env bash

JS="
// First make sure the wrapper app is loaded
document.addEventListener('DOMContentLoaded', function() {
  // Fetch our CSS in parallel ahead of time
  const cssPath = 'https://raw.githubusercontent.com/caiceA/slack-raw/master/slack-4';
  let cssPromise = fetch(cssPath).then((response) => response.text());

  // Insert a style tag into the wrapper view
  cssPromise.then((css) => {
    let s = document.createElement('style');
    s.type = 'text/css';
    s.innerHTML = css;
    document.head.appendChild(s);
  });
});"

OSX_SLACK_RESOURCES_DIR="/Applications/Slack.app/Contents/Resources"
LINUX_SLACK_RESOURCES_DIR="/usr/lib/slack/resources"

if [[ -d $OSX_SLACK_RESOURCES_DIR ]]; then SLACK_RESOURCES_DIR=$OSX_SLACK_RESOURCES_DIR; fi
if [[ -d $LINUX_SLACK_RESOURCES_DIR ]]; then SLACK_RESOURCES_DIR=$LINUX_SLACK_RESOURCES_DIR; fi
if [[ -z $SLACK_RESOURCES_DIR ]]; then
  # Assume on windows if the linux and osx paths failed.
  # Get Windows environment info:
  WIN_HOME_RAW="$(cmd.exe /c "<nul set /p=%UserProfile%" 2>/dev/null)"
  WIN_HOME="$(wslpath $WIN_HOME_RAW)"

  # Find latest version installed
  APP_VER="$(ls -dt ${WIN_HOME}/AppData/Local/slack/app*/)"
  IFS='/', read -a APP_VER_ARR <<< "$APP_VER"

  SLACK_RESOURCES_DIR="${WIN_HOME}/AppData/Local/slack/${APP_VER_ARR[8]}/resources"
fi

SLACK_FILE_PATH="${SLACK_RESOURCES_DIR}/app.asar.unpacked/dist/ssb-interop.bundle.js"

echo "Adding Dark Theme Code to Slack... "
echo "This script requires sudo privileges." && echo "You'll need to provide your password."

sudo npx asar extract ${SLACK_RESOURCES_DIR}/app.asar ${SLACK_RESOURCES_DIR}/app.asar.unpacked
sudo tee -a "${SLACK_FILE_PATH}" > /dev/null <<< "$JS"
sudo npx asar pack ${SLACK_RESOURCES_DIR}/app.asar.unpacked ${SLACK_RESOURCES_DIR}/app.asar

It requires you have nodejs and the asar package installed globally with npm i -g asar

[Pymptech]

Is there a solution for Windows or am I missing something?

[smitt04]

I am not 100% sure about the windows side of it, but once you find where your app.asar file is in windows, the npm steps should work. It might be as simple as changing the SLACK_RESOURCES_DIR to the windows location and updating the path separators to be \

[smitt04]

@Pymptech you could also try running the script with https://itsfoss.com/install-bash-on-windows/ once you update the paths

[Pymptech]

Awesome I will try that! Thanks!

[smitt04]

@caiceA It is just a bash script. I save it in ~/scripts/darkSlack.sh then just run it with ~/scripts/darkSlack.sh whenever slack updates

[caiceA]

@smitt04 Big thanks i got it i need to make some changes because i use my own designed theme. which is better one in terms of look and feel you can check my Github for that Slack Black Theme Here

[leo150]

@smitt04 Thank you, your solution works.

[smitt04]

Updated the script to use @caiceA CSS file, he seems to be updating the CSS the fastest for slack-4

[caiceA]

@smitt04 i love my theme actually !!! i couldn't open my white slack for 2 days unless I saw your script 😅

[misterpyrrhuloxia]

Hey, guys. Here's a beginner script I just made for reenabling dark mode on Slack 4.0. It's for mac and it assumes you already have the custom js code that you used to append to ssb-interop.js in a file on your computer.

https://github.com/misterpyrrhuloxia/Reenable-Dark-Mode-after-update-to-Slack-4.0

---

Here's the direct code in case you want it here:

#!/bin/bash

### With Slack 4.0, they are packing away ssb-interop.bundle.js in app.asar ###
### This bash script for Mac will unpack the app.asar, append your code to the file, repack it, and remove the unpacked directory ###
### You must have Node installed first in order to run npx with asar ###
### I got this idea from here – https://dev.to/mykeels/why-is-slack-changing-its-internals-4p4c ###

slackdir="Enter your Slack Resources directory"
slack_custom_css="Enter your full path to your file containing your custom js for the css that will be appended to ssb-interop.bundle.js"

npx asar extract $slackdir/app.asar $slackdir/extracted-asar;
sleep 4;
cat $slack_custom_css >> $slackdir/extracted-asar/dist/ssb-interop.bundle.js;
npx asar pack $slackdir/extracted-asar $slackdir/app.asar;
rm -r $slackdir/extracted-asar;

For the $slackdir variable, enter your Slack Resources directory. For the $slack_custom_css variable, enter your full path to your file containing your custom js for the css that will be appended to ssb-interop.bundle.js.

[caiceA]

this simple installation solution can solve everyone's problem MAC https://github.com/caiceA/slack-black-theme

[tarantulae]

For windows I found this 7z extension for asar files. http://www.tc4shell.com/en/7zip/asar/

I was able to unpack %localappdata%/slack/app-4.0.0/resources/app.asar I edited app/dist/ssb-interop.bundle.js with the slack custom CSS code I renamed the original app.asar to .old then opened /app with 7zip and created app.asar I relauched slack and the theme is working again

[guyhalestorm]

I also got @smitt04 's script (I REALLY like your look @caiceA , looks slick!) to work on Windows via Ubuntu (if you have it installed from the Windows Store) using node.js. I saved it as slackBlack.sh and changed the first line to #!/bin/bash since that's what I always use in bash scripts in Ubuntu, not sure if it was absolutely necessary or not.

SLACK_RESOURCES_DIR="/mnt/c/Users/YOUR USERNAME/AppData/Local/slack/app-4.0.0/resources" <-- Change YOUR USERNAME to, well, your username. The app version number will have to be updated every time Slack updates, but us Windows folks are already used to that.

First run commands, assuming you don't have nodejs and npm installed already:

chmod u+x slackBlack.sh sudo apt install nodejs npm sudo npm i -g npx asar ./slackBlack.sh

[guyhalestorm]

Update: I automated the process for Windows so you don't have to enter your username OR update it with the current Slack version. It'll always work.

#!/bin/bash
JS="
// First make sure the wrapper app is loaded
document.addEventListener('DOMContentLoaded', function() {

  // Fetch our CSS in parallel ahead of time
  const cssPath =
    'https://raw.githubusercontent.com/caiceA/slack-raw/master/slack-4';
  let cssPromise = fetch(cssPath).then((response) => response.text());
  let customCustomCSS = \`
   :root {
      /* Modify these to change your theme colors: */
      --primary: #61AFEF;
      --text: #ABB2BF;
      --background: #282C34;
      --background-elevated: #3B4048;
   }
   \`;

  // Insert a style tag into the wrapper view
  cssPromise.then((css) => {
    let s = document.createElement('style');
    s.type = 'text/css';
    s.innerHTML = css + customCustomCSS;
    document.head.appendChild(s);
  });
});"

#Get Windows environment info:
WIN_HOME_RAW="$(cmd.exe /c "<nul set /p=%UserProfile%" 2>/dev/null)"
WIN_HOME="$(wslpath $WIN_HOME_RAW)"

#Find latest version installed
APP_VER="$(ls -dt ${WIN_HOME}/AppData/Local/slack/app*/)"
IFS='/', read -a APP_VER_ARR <<< "$APP_VER"

#Automatically set paths
SLACK_RESOURCES_DIR="${WIN_HOME}/AppData/Local/slack/${APP_VER_ARR[8]}/resources"
SLACK_FILE_PATH="${SLACK_RESOURCES_DIR}/app.asar.unpacked/dist/ssb-interop.bundle.js"

echo "Adding Dark Theme Code to Slack... "
echo "This script requires sudo privileges." && echo "You'll need to provide your password."

sudo npx asar extract ${SLACK_RESOURCES_DIR}/app.asar ${SLACK_RESOURCES_DIR}/app.asar.unpacked
sudo tee -a "${SLACK_FILE_PATH}" > /dev/null <<< "$JS"
sudo npx asar pack ${SLACK_RESOURCES_DIR}/app.asar.unpacked ${SLACK_RESOURCES_DIR}/app.asar

[smitt04]

Updated the script to support linux and windows (thanks to @guyhalestorm)

Like everyone else added the script to github https://github.com/smitt04/slack-dark-theme

[JOY]

Looking for a simpler solution for non-tech guy like me.

[JOY]

Updated the script to support linux and windows (thanks to @guyhalestorm)

Like everyone else added the script to github https://github.com/smitt04/slack-dark-theme

Cannot apply on Windows 10 so I opened an issue on your git: https://github.com/smitt04/slack-dark-theme/issues/2

[theRealAJR]

The bash script for Windows did not work for me (all sudo npx asar calls resulted in /usr/bin/env: ‘node’: No such file or directory). So I installed the 7zip asar plugin (http://www.tc4shell.com/en/7zip/asar/), extracted app.asar to a directory, patched dist/ssb-interop.bundle.js, opened app.asar with 7zip as archive, removed dist/ssb-interop.bundle.js, and copied the modifed ssb-interop.bundle.js to folder dist in the open archive.

I did that before trying the script and for some reason slack would not start with the modified app.asar so I ran the script to get a modified version of dist/ssb-interop.bundle.js, which I appended here, in case someone else has the same problem.

ssb-interop.bundle.js.zip

[tarantulae]

I think some of the previous posts left out a backtick in the script.

I've created a Windows powershell script to make this easier for anyone on windows who isn't running wsl. This only requires 7zip and the Asar addin.

Like everyone else I added it to github. https://github.com/tarantulae/slack-black-theme-4.0PS

[smitt04]

Updated the windows script, should work better, requires WSL and nodejs installed still

https://github.com/smitt04/slack-dark-theme

[gparami]

@smitt04 on WSL, npx didn't come with npm. If this happens install npx globally npm i -g npx

[darthink]

@smitt04 Hi! Thanks to you and everyone who helped for the script. I hate to n00b it up, but I strangely get the error: ./darkSlack.sh: line 2: $'\r': command not found.

Any ideas?

[Pymptech]

I'm getting the same as @darthink

[TomFrost]

They're Windows line endings. In non-windows environments, lines end with the \n character. When you load up a windows-based text editor, it will generally end lines with \r\n, a bit of a relic from typewriter days. It appears the file has \r\n endings and the bash command line is choking on them. You just need to re-save the script using UNIX-style \n endings.

[Pymptech]

So just take out the \r?

[darthink]

I see, I had copied the code into my VS Code (Windows) and saved it. So, this time I downloaded the file directly from GitHub and didn't open it in a code editor. It ran like it should, however, the new unforeseen problem is as follows (just to document any potential problems):

[Pymptech]

I have downloaded nodejs and installed with no issue but still getting the same error

[darthink]

@Pymptech you installed it in the WSL (Windows Subsystem for Linux), right? Not just Windows. So, in the WSL you can run node -v.

[Pymptech]

@darthink I used this article as reference

https://docs.microsoft.com/en-us/windows/wsl/install-win10

I am extremely nooby with this stuff!

[smitt04]

@darthink it looks like the issue for you was the script couldn't find your WIN_HOME you can try setting that manually in the script, make sure to open in linux with vim or other editor.

@Pymptech I had that issue when I install nodejs on the windows side. You actually need ti install it in the linux subsystem. On ubuntu you can run:

curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

[smitt04]

@darthink If you wanted to help out you can try to figure out which line fails on your install

https://github.com/smitt04/slack-dark-theme/blob/master/darkSlack.sh#L43-L47

[Pymptech]

@smitt04 now it says npm not installed...sorry like I said I am a noob with Linux. It's been a few years

Nevermind I figured it out!

[MPickett1]

I had some issues with mine on Win 10 because my Users acc has a space in it. I have fixed it and you can see that https://github.com/smitt04/slack-dark-theme/issues/4 .

I followed the directions of the ReadMe, but I also had to install npx like it was mentioned above. sudo npm i -g npx.

I also had to make sure to close and quit Slack before it would work. Not sure why.

[smitt04]

thanks @MPickett1 updated script, and added check for npx

[Pymptech]

It is working! Thank you all for your help.

[mark3done]

I get the following when running darkSlack.sh: This script requires sudo privileges. You'll need to provide your password.

Followed the steps in https://github.com/smitt04/slack-dark-theme via macOS.

[darthink]

@darthink I used this article as reference

https://docs.microsoft.com/en-us/windows/wsl/install-win10

I am extremely nooby with this stuff!

Hey @smitt04 I inserted an echo to print USERPROFILE_DIR="${WIN_HOME_RAW#*:}" and it's empty, so maybe around line 46. I also had tried manually putting my folder name Kenny as well as /mnt/c/Users/Kenny. It's strange it's not working for me.

[smitt04]

@darthink Thats strange, setting WIN_HOME="/mnt/c/Users/Kenny" should ;et the script continue from that point

[darthink]

@smitt04 I deleted and got a fresh one, set WIN_HOME to that line you have above (versus changing SLACK_RESOURCES_DIR). I think I'm past the inability to find the directory. Now it's telling me the following: EACCES: permission denied, open '/mnt/c/Users/Kenny/AppData/Local/slack/app-4.0.0/resources/app.asar.unpacked/node_modules/@paulcbetts/spellchecker/build/Release/spellchecker.node'

Gah, I'm a plague of problems xD

(note: I did run chmod u+x darkSlack.sh)

(EDIT: Everything is now working for me. I guess sometimes a fresh reload of the system (also fresh install of slack) might contribute towards success.)

[smitt04]

It looks like there is a permission issue with the install of slack files. Running the commands with sudo should overcome that.

Also as a side note this is not really the right place to debug issues with the script

[jlanza]

@tarantulae

For windows I found this 7z extension for asar files. http://www.tc4shell.com/en/7zip/asar/

I was able to unpack %localappdata%/slack/app-4.0.0/resources/app.asar I edited app/dist/ssb-interop.bundle.js with the slack custom CSS code I renamed the original app.asar to .old then opened /app with 7zip and created app.asar I relauched slack and the theme is working again

Could you please be more explicit in relation to which code you put in ssb-interop.bundle.js file? For me it is not opening.

Besides, if you want to do it in one step you can just open asar file, and open ssb-interop.bundle.js for view, edit the file and then save. The asar file is automatically updated.

[zachliu]

I also got @smitt04 's script (I REALLY like your look @caiceA , looks slick!) to work on Windows via Ubuntu (if you have it installed from the Windows Store) using node.js. I saved it as slackBlack.sh and changed the first line to #!/bin/bash since that's what I always use in bash scripts in Ubuntu, not sure if it was absolutely necessary or not.

SLACK_RESOURCES_DIR="/mnt/c/Users/YOUR USERNAME/AppData/Local/slack/app-4.0.0/resources" <-- Change YOUR USERNAME to, well, your username. The app version number will have to be updated every time Slack updates, but us Windows folks are already used to that.

First run commands, assuming you don't have nodejs and npm installed already:

chmod u+x slackBlack.sh sudo apt install nodejs npm sudo npm i -g npx asar ./slackBlack.sh

Whoever is using nodenv need to follow this to install a system level nodejs & npm otherwise you won't be able to change any of the /usr/lib/slack/ files (you'll get EACCES: permission denied errors`).