The Issue
As many of you who follow what I do will know, I like things dark. I don’t like the white glare of a computer screen.
I am sure at least some of you use Slack for your work communications? If not I strongly recommend you check it out. It is a nice powerful and modern cross-platform chat application, with the focus on teams and work more than a personal chat application, so it is great for the workplace.
Teamwork in Slack happens in channels — a single place for messaging, tools and files — helping everyone save time and collaborate together
Slack.com
The only down-side is it doesn’t yet have a dark theme. So looking around the internet I found plenty of ways to do it by just editing the Electron app javascript files and injecting a custom css sheet.
So, in order to do this now before Slack officially supports it, do the following:
- Press Win + R to open
Run...
in Windows - Type
%LOCALAPPDATA%
and press Enter to open your current usersAppData
folder, such asC:\Users\luke\AppData\Local
- Go into
slack\app-2.x.x\resources\app.asar.unpacked\src\static
and open the ssb-interop.js file - Add the following to the end of the ssb-interop.js file
document.addEventListener("DOMContentLoaded", function() { // Then get its webviews let webviews = document.querySelectorAll(".TeamView webview"); // Fetch our CSS in parallel ahead of time const cssPath = 'https://raw.githubusercontent.com/angelsix/youtube/develop/Windows%2010%20Dark%20Theme/Slack/slack-dark.css'; 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); }); // Wait for each webview to load webviews.forEach(webview => { webview.addEventListener('ipc-message', message => { if (message.channel == 'didFinishLoading') // Finally add the CSS into the webview 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); }) }); }); });
- Now close Slack (including in the Taskbar)
- Restart Slack to see the lovely new dark theme
Thank you for your work. Could you make the text a bit whiter for it to be more readable ?
Thanks again and have a wonderful day