Black PragmataPro Slack

README.md

Install

Append the code at the end of this file /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

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/laCour/slack-night-mode/master/css/raw/black.css";
  let cssPromise = fetch(cssPath).then(response => response.text());

  let customCustomCSS = `
   #msg_input { font-family: PragmataPro Mono, PragmataPro; }
   .c-message--dense { font-family: PragmataPro Mono, PragmataPro; }
   .dense_theme ts-message { font-family: PragmataPro Mono, PragmataPro; }
   .c-message--light { font-family: PragmataPro Mono, PragmataPro; }
   .light_theme ts-message { font-family: PragmataPro Mono, PragmataPro; }
   `;

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