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?