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 users AppData folder, such as C:\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 :smiley: