slack-themes

default-dark.css

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

low-contrast.css

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

navy.css

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

one-dark.css

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

settings.json

{
  "theme": "one-dark"
}

ssb-interop.js

/* 
  ************************************************************************************************
  Put this at the bottom of /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js
  ************************************************************************************************
*/

// 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://raw.githubusercontent.com/Nockiro/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: #09F;
  //    --text: #CCC;
  //    --background: #080808;
  //    --background-elevated: #222;
  // } 

  // a[aria-label^="NAME_OF_CHANNEL_OR_DIRECT_CONVO_TO_STYLE"]
  // {
  //      --background: #4d0000  !important;
  //      --text-transform: uppercase  !important;
  //      --letter-spacing: 2px !important;
  //      --text-shadow: 1px 1px white;

  //  }   `
  const gistBASE = "https://gist.githubusercontent.com/camalot/6e56bf1cc79290164495f278ef942d7f/raw";
  const gistSHA = "";
  const settingsPath = `${gistBASE}/settings.json`;
  let settingsPromise = fetch(settingsPath).then( r => r.text());
  
  settingsPromise.then(settingsString => {
    let settings = JSON.parse(settingsString);
    const gistPath = `${gistBASE}/${settings.theme || 'navy'}.css`;
    let gistPromise = fetch(gistPath).then(response => response.text());
    gistPromise.then(gcss => {
      // Insert a style tag into the wrapper view
      cssPromise.then(css => {
        let s = document.createElement('style');
        s.type = 'text/css';
        s.innerHTML = css + gcss;
        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
           gistPromise.then(gcss => {
            cssPromise.then(css => {
                let script = `
                      let s = document.createElement('style');
                      s.type = 'text/css';
                      s.id = 'slack-custom-css';
                      s.innerHTML = \`${css + gcss}\`;
                      document.head.appendChild(s);
                      `
                webview.executeJavaScript(script);
            });
          });
     });
  });
});