Theming Slack for OSX

So, you love Slack, but you hate applications with large white backgrounds? Why not use Dark Mode! 🕶️

Unfortunately, Slack does not have a Dark Mode, although it's on their list of possibilities.

But, don't fret - there is a solution! Because the slack native desktop apps are just wrappers around a web app, we can inject our own CSS to customize the application to our liking.

(I take no credit for this exploit, graciously found via @DrewML https://gist.github.com/DrewML/0acd2e389492e7d9d6be63386d75dd99 and suggestions by @bradens, @jouni, @gkostov and others).

How to (OSX Only)

Prerequisite Your custom CSS needs to be hosted somewhere accessible over HTTP. For a free option, you can use a Gist and use the link to the raw file.

To open Slack in developer mode open via console:

export SLACK_DEVELOPER_MENU=true
open /Applications/Slack.app

And go to View > Developer to see the DevTools options for web views.

We'll edit /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/index.js to inject CSS after startup, you might want to back it up just in case cp index.js index.js.bak. Now, in your favorite editor open index.js, up, you'll see:

document.addEventListener("DOMContentLoaded", function() { // eslint-disable-line
  try {
    startup();
  } catch (e) {
    console.log(e.stack);

    if (window.Bugsnag) {
      window.Bugsnag.notifyException(e, "Renderer crash");
    }

    throw e;
  }
});

Right after startup(); you can add custom logic to inject more stylesheets (I made a new function overrideCSS()):

var overrideCSS = function() {
  setTimeout(function() {
    const cssURI = 'https://gist.githubusercontent.com/gkostov/039fe18fac0c27a4350b274f83403dcb/raw/slack-dark-theme.css',
    codeMirrorThemeURI = 'https://codemirror.net/theme/cobalt.css';  // also add the "cobalt" theme for the CodeMirror snippets

    window.webviews = document.querySelectorAll(".TeamView webview");

    Promise.all([cssURI, codeMirrorThemeURI].map((file)=>{
      return fetch(file)
          .then( response => {
            return response.text();
          });
    })).then(files => {
      window.webviews = document.querySelectorAll(".TeamView webview");

      files[1] = files[1].replace(/cm-s-cobalt/g, 'cm-s-default')

      for(var i = 0; i < webviews.length; i++) {
        webviews[i].insertCSS(files.join('\n'));
      }
    });
  }, 10000);
}

and then after startup(); add overrideCSS();:

try {
  startup();
  overrideCSS();
}

Now these stylesheets (in this case cssURI and codeMirrorThemeURI will be injected after app start (with a 10 second delay to make sure we get the right web view DOM element). It should persist between Slack quitting/restarting, however you might want to resort to the original backed up file if upgrading to a new version.

Update with a script

When Slack updates it's app, sometimes your custom index.js is overridden. This script copies a file you specify to index.js or takes the slack-dark-index.js file in the same dir as the script by default.

slack-dark.rb