Dark theme for Mac Slack App

slack-dark-theme-instructions.md

Dark theme for Mac Slack App

These instructions are my personal implementation of the Slack Black Theme repo. In particular, it is an amalgamation of the css styles in this issue: https://github.com/widget-/slack-black-theme/issues/48

Open ssb-interop.js

Its location will be at /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

Add the contents of slack-dark-theme.js

Append it to the bottom of the file.

Exit and open Slack!

Optional: create a CLI alias

When Slack updates, it will remove these custom styles. You can make it easier to reimplement this hack by adding an alias to your ~/.zshrc or ~/.bashrc file:

alias slack-dark-theme='cat ~/slack-dark-theme.js >> /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js'

Running this will append your slack-dark-theme.js to the end of ssb-interop.js. Note that you will need to change the path for slack-dark-theme.jsto match its location on your machine.

Known issues

• background of 'new messages' alert: https://github.com/widget-/slack-black-theme/issues/48#issuecomment-421100460
• "Remind me..." in message actions is black: https://github.com/widget-/slack-black-theme/issues/48#issuecomment-421070971

slack-dark-theme.js

/**
 * To update Slack to using dark mode, copy the contents of this file to the end of:
 * /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
 * This file is likely to change over time.
 * See https://github.com/widget-/slack-black-theme/issues/48
 * or https://gist.github.com/veekas/fd92c1867ed14c257d1899d6c7e68620
 * for updates
 */

// 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/widget-/slack-black-theme/master/custom.css';
  let cssPromise = fetch(cssPath).then(response => response.text());

  let customCustomCSS = `
  :root {
    /* Modify these to change your theme colors: */
    --primary: #61AFEF;
    --text: #ABB2BF;
    --background: #282C34;
    --background-elevated: #3B4048;
  }

  div.c-message.c-message--light.c-message--hover,
  .p-flexpane_header,
  .p-shortcuts_flexpane__title,
  .c-message_list__day_divider,
  .c-message_list__day_divider__label,
  .c-message_list__day_divider__label__pill,
  .p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before,
  .p-message_pane .c-message_list:not(.c-virtual_list--scrollbar):before,
  .c-keyboard_key {
    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,
  .c-message_attachment,
  .p-shortcuts_flexpane__shortcut_title {
    color: #afafaf !important;
  }

  pre.special_formatting {
    background-color: #222 !important;
    color: #8f8f8f !important;
    border: solid;
    border-width: 1 px !important;
  }

  .c-message,
  .c-virtual_list__item,
  .c-member_slug--link {
    background-color: #222 !important;
  }

  #client_body:not(.onboarding):not(.feature_global_nav_layout):before {
  background-color: #222 !important;
  border: 1px solid #222 !important;
  box-shadow: none !important;
  }

  .ql-placeholder, .c-team__display-name, .c-unified_member__display-name, .c-usergroup__handle, .timezone_value, .timezone, .p-message_pane__foreword__description, .charcoal_grey {
    color: #ccc !important;
  }

  div[role=listitem]:first-child {
    margin-bottom: 20px !important;
  }

  div[role="presentation"] { background-color: #282C34 !important; }

  .c-search__input_and_close{
      background:#292d32!important;
      color white !important;
  }
  .c-search__input_box{
      background:#292d32!important;
      color white !important;
  }
  .c-search__input_and_close{
      background:#292d32!important;
      color white !important;
  }
  .c-search_autocomplete{
      background:#b7bcbe!important;
      color white !important;
  }
  .c-search_autocomplete footer{
      background:#97a0a5!important;
      color white !important;
  }
  .c-search_autocomplete__suggestion_text{
      color white !important;
  }
  .c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_text{
      color white !important;
  }
  .c-search_autocomplete header{
      background:#b7bcbe!important;
      color:black !important;
  }
  .c-search_autocomplete footer .c-search_autocomplete__footer_navigation_help{
      color:white !important;
  }
  .c-search__input_box .c-search__input_box__input .ql-editor, .c-search__input_box .c-search__input_box__input .ql-placeholder{
      background:#2b2c2e!important;
      border:none !important;
  }
  .c-search__tabs{
      background:#2b2c2e!important;
  }
  .c-search__view{
      background:#2b2c2e!important;
  }
  .c-search_message__body{
      color:#cacbcc !important;
  }
  .p-search_filter__title_text{
      background:#2b2c2e!important;
      color:white !important;
  }
  .p-search_filter__title:before{
      color:grey !important;
  }
  .p-search_filter__dates{
      background:#1f2021!important;
      border: none !important;
      color:#cacbcc !important;
  }
  .p-search_filter__datepicker_trigger:hover{
      color:white !important;
  }

  .unread_group_header { background-color: #222 !important; }

  .p-message_pane { background-color: #222 !important; }

  .p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider,.p-message_pane .c-message_list:not(.c-virtual_list--scrollbar){
      background:#222;
  }

  .p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before,.p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list:not(.c-virtual_list--scrollbar):before{
      box-shadow:0 32px #222;
  }
  `

  //  #unread_msgs_scroller_div { background-color: #222 !important; }
  // #connection_div { background-color: #222 !important; }

  // 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);
          })
    });
  });
});