slack-night-mode
slack-night-mode copied to clipboard
laCour
ssb-interop.js no longer used in Slack beta 4
In Slack beta 4.0.0, the ssb-interop.js no longer exists. It looks like Slack modified the internal structure of the app, and I couldn't locate where the CSS is now located.
Version 4.0.0 is now the official version of Slack, and is still missing the ssb-interpo.js file
The ssb-interop file is now located in an archive: https://dev.to/mykeels/why-is-slack-changing-its-internals-4p4c
app.asar
@krazyito65 Any idea on how to unpack and pack it again? I used npx extract, changed the file and then npx pack but slack crashed.
found this on another repo: https://github.com/LanikSJ/slack-dark-mode/pull/77/files#diff-4e5b58d0c0e2e47e41878b4116e03b7f
# Unpack Asar Archive for Slack
sudo npx asar extract $SLACK_RESOURCES_DIR/app.asar $SLACK_RESOURCES_DIR/app.asar.unpacked
# Add JS Code to Slack
sudo tee -a "$SLACK_FILEPATH" < $SLACK_EVENT_LISTENER
# Insert the CSS File Location in JS
sudo sed -i -e s@SLACK_DARK_THEME_PATH@$THEME_FILEPATH@g $SLACK_FILEPATH
# Pack the Asar Archive for Slack
sudo npx asar pack $SLACK_RESOURCES_DIR/app.asar.unpacked $SLACK_RESOURCES_DIR/app.asar
I haven't tried it myself yet. I'm using the SNAP version on ubuntu, so it hasn't gotten pushed to me, though I've been trying to figure out how to easily do it on windows.
@JRoviraa if your slack crashed, your app.asar file might be corrupted.
You might want to reinstall slack, or pull the file from here. https://raw.githubusercontent.com/mykeels/slack-v40-app-asar/master/app.asar
Has anyone gotten this working on macOS? I modified my lazy (and poor security practices) script, and I was able to see dark mode after hitting CMD+R, but the workspace switcher was displaying weird. So I quit and restarted Slack, and light mode is back as if I never did anything.
#!/bin/bash
SLACK_ASAR=/Applications/Slack.app/Contents/Resources/app.asar
sudo npx asar extract $SLACK_ASAR $SLACK_ASAR.unpacked
sudo tee -a $SLACK_ASAR.unpacked/dist/ssb-interop.bundle.js <<-'EOF'
document.addEventListener('DOMContentLoaded', function() {
$.ajax({
url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/gruvbox-dark.css',
success: function(css) {
$("<style></style>").appendTo('head').html(css);
}
});
});
EOF
sudo npx asar pack $SLACK_ASAR.unpacked $SLACK_ASAR
I extracted the new asar to a new directory to see if my changes were still in there, and I do see them right after the source map comment as expected.
I ran through extraction, modification, and packing manually and have been able to get it working properly. Only difference is that I put the function in before the source map comment, but that shouldn't matter.
Very strange... I tried this other script as-is and I get the same result:
https://github.com/LanikSJ/slack-dark-mode
Still seeing light mode but I extracted the asar and do see the modifications to ssb-interop. I even tried adding something wacky like * { background: red !important } directly to <head> in a <style> tag using this event listener... nothing. It's like DOMContentLoaded isn't firing or there's a race condition somewhere.
@crustyboot are you on macOS? I'm using 10.14.3 on a 2018 MBP with a 2.2GHz i7, if that matters.
Hey @lvarado, yeah I am running macOS 10.13.
So looking at your script, the other thing I did that was different was extract app.asar to a random directory like why.slack.why as app.asar.unpacked was an existing directory.
I wonder if something went sideways when you packaged app.asar.unpacked back up.
why.slack.why😆
Good thought, I just tried a different directory name and still no dice. Double checked the update is present by unpacking the new asar. I'll let my retinas burn for now and use the webapp with Stylish whenever possible until someone smarter and more patient than me gets this same issue.
This script worked for me: https://github.com/smitt04/slack-dark-theme/blob/master/darkSlack.sh#L23 (just replace the URL in the highlighted line)
Thank you for sharing, @tborychowski! That script worked for me too. It looks like maybe $.ajax() was being unreliable for me, but the vanilla JS from that repo does the trick.
@tborychowski or whoever else may know.. When I run that script, I entered my password to grant the sudo access, getting this error, any ideas?
EDIT: Looks like I got it going with npm install asar -g
@ransagy I managed to get it working on windows following these steps. https://github.com/svendhhh/slack-night-mode/blob/master/README.md Make sure your NPM is updated as well, one system I was on version 6.x, needed to upgrade to 10.
pretty annoying these steps we have to take to do this, when they could just release their own dark mode already..
I've been using their builtin darkmode on android and its been great.
I strongly agree it is annoying, especially when every update requires manual effort to re-enable dark scripts. IIRC they mentioned that they plan to support dark mode for the web client, so we just have to be patient and respect the software development process.
There's probably more technical challenges than we appreciate being on the outside looking in. My hope is that this new v4 lays some kind of groundwork for improved theming.
Kinda hard to be patient when they have promised native dark mode since 2014.
@ransagy I managed to get it working on windows following these steps. https://github.com/svendhhh/slack-night-mode/blob/master/README.md Make sure your NPM is updated as well, one system I was on version 6.x, needed to upgrade to 10.
Ah. The JS there is significantly different, Interesting. I'll try it ASAP, thanks!
Thanks to the above link, I have hacked together an update for the powershell script I shared previously to apply this: https://github.com/laCour/slack-night-mode/issues/73#issuecomment-385613286
- Make sure you have NPM installed or install it (https://blog.teamtreehouse.com/install-node-js-npm-windows)
- Make sure your slack is on the latest version (4.0.0), if not, use the old version of the script.
Instructions:
- Search for Powershell in windows search
- Open "Windows Powershell ISE"
- Copy below script into Windows Powershell ISE
- Hit save, give it any name, keep the file type as "PowerShell Files" and remember the location you saved it at. (This means you can just run that file in future from now on)
- Press F5 on the keyboard to execute the script
- Close Windows Powershell ISE
if((Get-Process "slack" -ErrorAction SilentlyContinue) -ne $null) {
Write-Host "Please exit Slack to continue";
exit 0;
}
$slackBaseDir = "$env:LocalAppData\Slack"
$installations = Get-ChildItem $slackBaseDir -Directory | Where-Object { $_.Name.StartsWith("app-") }
$version = $installations | Sort-Object { [version]$_.Name.Substring(4) } | Select-Object -Last 1
Write-Output "Choosing highest present Slack version: $version";
$modAdded = $false;
$customContent = @'
// laCour - slack-night-mode
document.addEventListener("DOMContentLoaded", function() {
let webviews = document.querySelectorAll(".TeamView webview");
const cssPath = 'https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css';
let cssPromise = fetch(cssPath).then(response => response.text());
cssPromise.then(css => {
let s = document.createElement('style');
s.type = 'text/css';
s.innerHTML = css;
document.head.appendChild(s);
});
webviews.forEach(webview => {
webview.addEventListener('ipc-message', message => {
if (message.channel == 'didFinishLoading')
cssPromise.then(css => {
let script = `
let s = document.createElement('style');
s.type = 'text/css';
s.id = 'slack-custom-css';
s.innerHTML = \`${css}\`;
document.head.appendChild(s);
`
webview.executeJavaScript(script);
})
});
});
});;
'@
Set-Location -Path "$($version.FullName)\resources\"
$npx=npm v npx version
$asar=npm v asar version
if ([string]::IsNullOrEmpty($npx) -or [string]::IsNullOrEmpty($asar))
{
Write-Output "Installing Required Resources";
if ([string]::IsNullOrEmpty($npx))
{
Write-Output "Installing npx";
npm install -g npx
}
if ([string]::IsNullOrEmpty($asar))
{
Write-Output "Installing asar";
npm install -g asar
}
}
Write-Output "Extracting app.asar";
npx asar extract app.asar app.asar.unpacked
if ((Get-Content "$($version.FullName)\resources\app.asar.unpacked\dist\ssb-interop.bundle.js" | %{$_ -match "// laCour - slack-night-mode"}) -notcontains $true) {
Add-Content "$($version.FullName)\resources\app.asar.unpacked\dist\ssb-interop.bundle.js" $customContent
Write-Host "Mod Added To ssb-interop.bundle.js";
$modAdded = $true;
} else {
Write-Host "Mod Detected In ssb-interop.bundle.js - Skipping";
}
Write-Output "Packing app.asar.unpacked";
npx asar pack app.asar.unpacked app.asar
if ($modAdded -eq $true) {
Write-Host "Mod Complete";
} else {
Write-Host "Mod Already Active - No Further Action Is Needed.";
}
This works, Thanks!
I'm guessing the really new change here is that we need to refresh and mod the webviews as you and others suggested, it's not enough to just inject the style.
This script worked for me: https://github.com/smitt04/slack-dark-theme/blob/master/darkSlack.sh#L23 (just replace the URL in the highlighted line)
Substitution with sed:
sed -i "s/http.*/https:\/\/raw.githubusercontent.com\/laCour\/slack-night-mode\/master\/css\/raw\/black.css';/g" darkSlack.sh
Thanks for this! Anyone know how to get rid of the white titlebar on MacOSX once applying these changes for v4.0? It seems like once you get Slack in dark mode by appending the custom CSS, the window titlebar reverts to bright white.
Also, I've needed to "Reset App Data..." in order to get the dark mode results to appear (reloading doesn't work). Does anyone have a workaround that doesn't require selecting "Reset App Data..."?
I'm trying to get this to work for ubuntu 'snap' installs. Is it important that I pack the asar with the node modules in the unpacked folder? or should i unpack it separately, make my changes, then repack it separately?
@andrewcartwright1 Any chance you want to source control that script and centralize updates for it? I just ran it this morning and it worked, thanks!
https://github.com/LanikSJ/slack-dark-mode -- This repo has a script that works for MAc, linux(snap installs as well), and windows. You could take the script and replace the css with the css of this repo to get it to work.
You can also use https://github.com/Gargaj/makeitdark/blob/master/makeitdark.py if you don't want to install node.js
I was having some issues with the desktop app on Windows after its auto-update to 4.0.2. It was not displaying the dark theme even when the ssb-interop.bundle.js & app.asar were modified correctly.
What worked for me was to exit Slack, delete everything in %appdata%\Slack (i.e. Roaming, not Local), and reopen Slack. I think all the cached files in that directory were to blame, but I didn't have the patience to figure out which ones so I deleted them all, to no ill effect.
It looks like the file to use is now main-preload-entry-point.bundle.js rather than ssb-interop.bundle.js. Credit to https://github.com/caiceA/slack-black-theme/
