# Theming Slack for OSX

So, you love [Slack](https://slack.com/), but you hate applications with large white backgrounds? Why not use Dark Mode! :dark_sunglasses:

Unfortunately, Slack does not have a Dark Mode, although it's [on their list of possibilities](https://twitter.com/slackhq/status/531941157283315712).

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](https://gist.github.com/) 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:

```javascript
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()`):

```javascript
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();`:

```javascript
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.