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