Slack macOS Dark Mode

gistfile1.txt

// 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: #dcdddc;
      --text: #dcdddc;
      --background: #28272a;
      --background-elevated: #363537;
    }

    pre.special_formatting
    {
      background-color: #28272a !important;
      color: #dcdddc !important;
      border: solid;
      border-width: 1px !important;
    }

    #im_browser .im_browser_row,
    .c-message_list__day_divider__line
    {
      border-top: 1px solid #afafaf;
    }

    div.c-message.c-message--light.c-message--hover,
    .c-message.c-message--light.c-message--hover.c-message--adjacent.c-message--last
    {
      color: #dcdddc !important;
      background-color: #28272a !important;
    }

    .c-member--medium,
    .c-member__display-name,
    .c-member__secondary-name--medium,
    .c-team__display-name,
    .c-usergroup__handle,
    .c-message_attachment,
    .c-message_attachment__pretext,
    .c-message_list__day_divider__label,
    .c-file__title,
    .c-file__meta,
    .c-reaction__count,
    .c-reaction_add__icon--fg,
    span.c-message__body,
    a.c-message__sender_link,
    div.c-message_attachment__row,
    div.p-message_pane__foreword__description span,
    span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption
    {
      color: #dcdddc !important;
    }

    .c-reaction_add__icon--bg
    {
      color: #dcdddc !important;
    }

    div.c-virtual_list__scroll_container,
    div.c-message:hover,
    .c-file_container,
    .c-file__slide--meta,
    .c-reaction,
    .c-reaction_add,
    .c-message_list__day_divider__label__pill,
    #im_browser #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover
    {
      background-color: #28272a !important;
    }

    .c-file__icon:after
    {
      border: 3px solid #dcdddc;
    }

    .c-file_container,
    .c-reaction,
    .c-reaction_add
    {
      border: 1px solid;
      border-color: #dcdddc;
    }

    .c-file_container:hover,
    .c-reaction:focus,
    .c-reaction:hover,
    .c-reaction_add:focus,
    .c-reaction_add:hover,
    {
      border-color: #afafaf;
    }

    .c-file_container--has_thumb .c-file__actions:before
    {
      background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#28272a 20px);
    }

    .c-member_slug--link
    {
      background: #3B4048;
    }

    .c-member_slug--link:hover
    {
      background: #25272a;
    }

    .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;
    }
    * {
      font-family: -apple-system, BlinkMacSystemFont;
    }
        `
    // 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);
            })
      });
    });
});