In the name of accessibility, Slack has rolled out an obnoxiously dark border on its chatbox. It’s so bad that people on Twitter think it’s a bug and there’s seemingly no way to disable it, without dipping into custom hacks. This chatbox is so ugly that it is inaccessible for me, so here’s a hack that restores it to how it was, more or less. The code for this hack is stolen shamelessly from reddit with the relevant parts changed.

On a Mac1, open this file:

/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/index.js

And paste in this:

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() { // eslint-disable-line
   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");

   // Fetch our CSS in parallel ahead of time
   const cssURI = 'https://gist.githubusercontent.com/martynchamberlin/27e5ef5fccaf7a4ba3773bbe3a355dc1/raw/07a80728b1f782a5e1ac7cd8c5fa353eac1ce84c/custom.css';
   let cssPromise = fetch(cssURI).then(response => response.text());

   // Then wait for the views to load
   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            // Finally add the CSS in
            cssPromise.then(css => webview.insertCSS(css));
      });
   });
});

Then restart Slack, and you should be all good. If you don’t like my CSS, create your own Gist and update the cssURI variable above to point to its raw URL.


  1. If you’re on Windows, you’ll need to go to the reddit thread and try to find the proper directory src. It’s version-dependent on Windows so you’re on your own. ↩︎