AngelSix Blog

Software, Hardware and anything else


Twitter at AngelSix Open Source efforts at angelsix

Slack Dark Theme

12 Sep 2017, written by angelsix Luke Malpass

As many of you who follow what I do will know, I like things dark. I don’t like the white glare of a computer screen.

I am sure at least some of you use Slack for your work communications? If not I strongly recommend you check it out.

The only down-side is it doesn’t yet have a dark theme. So looking around the internet I found plenty of ways to do it by just editing the Electron app javascript files and injecting a custom css sheet.

So, in order to do this now before Slack officially supports it, do the following:

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/angelsix/youtube/develop/Windows%2010%20Dark%20Theme/Slack/slack-dark.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

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

taskbar-image

slack-dark

< Back to blog