Slack Black Theme

A darker, more contrasty, Slack theme.

Preview

Installing into Slack

Find your Slack's application directory.

• Windows: %homepath%\AppData\Local\slack\
• Mac: /Applications/Slack.app/Contents/
• Linux: /usr/lib/slack/ (Debian-based)

Open up the most recent version (e.g. app-2.5.1) then open resources\app.asar.unpacked\src\static\index.js

As of app-3.0.0 and higher, the changes below must also be applied in resources\app.asar.unpacked\src\static\ssb-interop.js

At the very bottom, add

// First make sure the wrapper app is loaded
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://cdn.rawgit.com/blackdrago/slack-black-theme/master/custom.css';
   const cssPath = 'https://cdn.rawgit.com/blackdrago/slack-black-theme/0c33e6e56fa58e1cd9b25d35ad0f32921aec62ba/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modify these to change your theme colors: */
      --primary: #a59056;
      --text: #cccccc;
      --background: #010101;
      --background-elevated: #111111;
	  --background-hover: rgba(22, 22, 22, 0.1);
	  --background-light: #333333;
	  --background-bright: #555555;
      --border-dim: #666;
      --border-bright: var(--primary);
      --text-bright: #FFF;
      --text-special: var(--sidebar-active-text);
      --scrollbar-background: #000;
      --scrollbar-border: var(--primary);
    }
    div.c-message.c-message--light.c-message--hover
    {
        color: #fff !important;
        background-color: #222 !important;
    }
    span.c-message__body,
    a.c-message__sender_link,
    span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
    div.p-message_pane__foreword__description span
    {
        color: #afafaf !important;
    }
    pre.special_formatting {
        background-color: #222 !important;
        color: #8f8f8f !important;
        border: solid;
        border-width: 1 px !important;
    }
    div.c-virtual_list__scroll_container {
        background-color: black !important;
    }
    .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar), .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider {
            z-index: 0;
   }
   div.c-message__content:hover {
       background-color: black !important;
   }
   .c-search_message__body {
    color: var(--text);
}
.p-search_filter__datepicker_trigger:hover {
    color: var(--text);
}
.c-input_select_options_list__empty_state {
    color: var(--text);
}
.p-file_details__name {
    color: var(--text);
}
   `

   // Insert a style tag into the wrapper view
   cssPromise.then(css => {
      let s = document.createElement('style');
      s.type = 'text/css';
      s.innerHTML = css + customCustomCSS;
      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 + customCustomCSS}\`;
                     document.head.appendChild(s);
                     `
               webview.executeJavaScript(script);
            })
      });
   });
});

Notice that you can edit any of the theme colors using the custom CSS (for the already-custom theme.) Also notice that you can put any CSS URL you want, so feel free to fork this theme if you don't like it.

That's it! Restart Slack and see how well it works.

NB: You'll have to do this every time Slack updates.

Color Schemes

Here's some example color variations you might like.

Default

--primary: #09F;
--text: #CCC;
--background: #080808;
--background-elevated: #222;

One Dark

--primary: #61AFEF;
--text: #ABB2BF;
--background: #282C34;
--background-elevated: #3B4048;

Low Contrast

--primary: #CCC;
--text: #999;
--background: #222;
--background-elevated: #444;

Navy

--primary: #FFF;
--text: #CCC;
--background: #225;
--background-elevated: #114;

Hot Dog Stand

--primary: #000;
--text: #FFF;
--background: #F00;
--background-elevated: #FF0;

License

Apache 2.0