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: smitt04/slack-dark-theme#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

[anthonynorthrup314]

I have expanded on the work from @tarantulae and uploaded my revised PowerShell script here:
https://github.com/anthonynorthrup314/slack-black-theme-4.0PS

This script also avoids extracting/compressing the entire ASAR file by simply modifying the relevant file within. From my testing, full extraction/compression resulted in nearly a 200% file size increase. While a simple 7-Zip update command only required a few kilobytes.

The script also prompts for uninstallation if it detects the backup already exists. Alternatively, I've provided the steps for restoring the original ASAR file.

[caiceA]

@linglingfool, first of all, I like your display name LINGLINGFOOL which is cool its good suggestion i know how to do, will do tomorrow. today i am traveling

[misterpyrrhuloxia]

I'm on a mac and ever since the 4.0 update, I've been just decompressing the app.asar file, modifying the ssb-interop.bundle.js file, and then recompressing using the script I made below:

#!/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 ###

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;

But as of today, this does not work any longer. I'm not sure what's going on. Has anyone else experienced this?

[knwpsk]

Double extra good karma @caiceA and @jlanza
Installed the mod today using the 7-zip method, works great.

[ttownsend78]

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

The true hero in this thread! :)

[lukerhd]

Same issue as @misterpyrrhuloxia - albeit my script is a Go app, checked the uncompressed ssb-interop.bundle.js and my code snippet adding css is still there o.O

[anthonynorthrup314]

@lukerhd and @misterpyrrhuloxia,

I recommend using the darkSlack.sh script provided in Nockiro's black theme (based on the script provided earlier in this thread by @smitt04):
https://github.com/Nockiro/slack-black-theme

While this is configured to use the CSS provided in the same repository, the script can be easily modified for your own custom CSS. I used it earlier this morning to update my Slack theme on a machine running macOS Mojave version 10.14.6, and Slack version 4.0.0 (production).

[3b0b]

I found https://www.reddit.com/r/Slack/comments/cexjol/slack_version_400_css_modifications_dark_theme/evigz17?utm_source=share&utm_medium=web2x where someone asserts that the reason the lato.less approach isn't reliable may have to do with font caching, which is a bummer.

[brucegomes]

@smitt04 solution worked for me on osx

[apckdev]

As for Windows, I've been working on it for a longer period of time. Unfortunately, I don't have much time to focus on it right now, but based on my research I've created an almost foolproof self-elevated script for Slack Windows client (just 1-2 clicks):

https://github.com/appollock/dark-slack-windows

There's no need to install 7-zip, nor to read/write content to/from file buffer. The script will create a temp instance of the 7-zip and uninstall 7-zip along with all leftovers after applying theme. There're some minor things to fix to make it production ready, but as I stated - I don't have that much time to focus on it. Njoy.

Written and tested with PS 2.0, so it works on Windows 7 (NT 6.1) and above

[bigdoods]

Maybe someone should update the Readme with the conclusion of this issue.

I am on linux and I can't make out which is the correct approach for me...

[ghost]

As for Windows, I've been working on it for a longer period of time. Unfortunately, I don't have much time to focus on it right now, but based on my research I've created an almost foolproof self-elevated script for Slack Windows client (just 1-2 clicks):

https://github.com/appollock/dark-slack-windows

There's no need to install 7-zip, nor to read/write content to/from file buffer. The script will create a temp instance of the 7-zip and uninstall 7-zip along with all leftovers after applying theme. There're some minor things to fix to make it production ready, but as I stated - I don't have that much time to focus on it. Njoy.

Written and tested with PS 2.0, so it works on Windows 7 (NT 6.1) and above

Works great, thanks for this.

[benjamhooper]

If you're using windows use this in powershell (running in Administrator mode):

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/benjamhooper/slack-custom-theme/master/slackcustomtheme.ps1')

Run this for a custom slack theme, just use this repo's theme. The raw link: https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

If you have issues, please visit here: https://github.com/benjamhooper/slack-custom-theme

[JOY]

If you're using windows use this in powershell (running in Administrator mode):

iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/benjamhooper/slack-custom-theme/master/slackcustomtheme.ps1')

Run this for a custom slack theme, just use this repo's theme. The raw link: https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

If you have issues, please visit here: https://github.com/benjamhooper/slack-custom-theme

Sorry but what should I put on this?
Enter a exact path of http url or an exact path on file system.:

[benjamhooper]

@LeGiangAnh

Paste link of the url(raw link of the css in this repo): https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

Or use a system path if you have downloaded a custom theme to your computer, Ex: c:\path\path\path\nameoftheme.css

[JOY]

@LeGiangAnh

Paste link of the url(raw link of the css in this repo): https://raw.githubusercontent.com/earlduque/Slack-Dark-Theme/master/dark.css

Or use a system path if you have downloaded a custom theme to your computer, Ex: c:\path\path\path\nameoftheme.css

Hi. It works but all the message hyperlink is black and is very hard to notice:

[benjamhooper]

@LeGiangAnh then report it as an issue in this repo. It's the theme. https://github.com/widget-/slack-black-theme/issues/new

[fleutot]

@smitt04
Debian Buster here.

So the new thing is you need to unpack/re-pack the asar file? In previous installs, I already had the /usr/lib/slack/resources/app.asar.unpacked/src/static dir out of the box, where the ssb file to edit was. Unpacking and repacking was not needed.

I'm stuck at this unpacking and packing stuff, because I don't find the packages I need to install for npx and asar.

[smitt04]

@fleutot you need node and npm to install the packages. As those are just javascript so the packages exist on all OSes.

The reason you need to unpack it is because the file you need to edit is now hidden, and then when slack restarts it only looks at the packed version so we need to repack it

[Naphier]

I've tried just about every option here. The scripts seem to succeed just fine, but slack remains god-awful white. Will try a manual extraction/modification of the asar tomorrow.
Slack 4.0.2 ☹️

[cmcconnell1]

@Naphier I've tried a few options/projects for dark slack. A few stopped working for me recently post 4.x on macos mojave (Slack Version 4.0.2 (App Store). The code using the below project/method continues to work for me, but of course YMMV.
'Hope this helps others.

cat ~/bin/slack-dark-theme-post-v4
#!/usr/bin/env bash

cd $GIT_HOME
#git clone https://github.com/LanikSJ/slack-dark-mode && cd slack-dark-mode \
cd slack-dark-mode && git pull
chmod +x slack-dark-mode.sh && ./slack-dark-mode.sh
killall Slack && sleep 5  && open -a "/Applications/Slack.app"

[Naphier]

Using Windows over here. Still haven't got it to start working again. Wondering if windows is holding open a process somewhere not very visible. Will try again when I have a chance. Complained to Slack again that they need to get it together and just give us dark mode already! 😛

[benjamhooper]

@Naphier this repo seems to be no longer maintained. Here is a windows solution: https://github.com/caiceA/slack-black-theme if you don't like the theme. Use a solution I have came up with here. https://github.com/benjamhooper/slack-custom-theme

[Naphier]

Thanks @benjamhooper re-install of slack then running the ps1 script seems to have worked with caiceA's theme. Had already tried yours. Not sure what the diff was, but I'm blaming it on the slack install now, not you all. Thank again.

[benjamhooper]

@Naphier no problem! The script I wrote is just a means of installing any theme for slack, it doesn't have one build it in. It prompts you to enter in the url or os path of the theme of your choice. With @caiceA I built that script to install his theme directly.

[Naphier]

Right. I must have been using this repo's theme before. Could be the difference. Still blaming slack :p

…

On Wed, Aug 28, 2019, 10:34 Benjamin Hooper ***@***.***> wrote: @Naphier <https://github.com/Naphier> no problem! The script I wrote is just a means of installing any theme for slack, it doesn't have one build it in. It prompts you to enter in the url or os path of the theme of your choice. With @caiceA <https://github.com/caiceA> I built that script to install his theme directly. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://github.com/widget-/slack-black-theme/issues/98?email_source=notifications&email_token=ACNJYPF7IK4WQ4XYUX6KFFDQG2EG3A5CNFSM4H7GA6N2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5LKXUQ#issuecomment-525773778>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACNJYPH2A3CUF44B2CVEDKDQG2EG3ANCNFSM4H7GA6NQ> .

[tgburgin]

Anyone else seeing colour bands on the top and bottom of the chat window?

[zkxs]

For you script writers out there, the following asar pack arguments will build the asar file with the same exclusions Slack is using. This definitely cuts down the filesize, and might also prevent issues with files existing in both app.asar and app.asar.unpacked.

asar pack --unpack "{*.node,*.woff2,*.svg,*.less,*.ico,emoji_2017_12_06_sheet_apple_64_indexed_256.webp,emoji_2017_12_06_sheet_google_64_indexed_256.webp,logo_spinner.gif,no_connection.webp}" --unpack-dir "{dist/static/extensions/react-devtools,dist/static/fonts}" app_extracted app.asar.2

I've had my own go at a theme installation script (Mac OSX only presently). The only thing it really has going for it is that I'm paranoid about double-patching and building the asar file wrong and I therefore do some extra validation.

[Izgalicia]

Good news guys! New dark mode.
https://www.macrumors.com/2019/09/12/slack-dark-mode-mac/