eklein / slack-black-theme

A darker, more contrasty, Slack theme.

Slack Black Theme

A darker, more contrasty, Slack theme.

Preview

Installing into Slack

0. Make sure slack is not running

Via script (automatic "installer" for version 3/4)

On Windows

1. Make sure 7-zip is installed
2. Make sure the asar-plugin for 7-zip is installed
3. Execute slackBlack.ps1 (Thanks to Anthony Northrup and tarantulae on whose scripts this is largely based)

On Unix (MacOS/Linux)

1. Make sure nodejs/npm are installed (sudo apt install nodejs npm)
2. Make sure the asar package is installed (sudo npm i -g npx asar)
3. Execute darkSlack.sh (Thanks to smitt04 on whose script this is based)

Manually

Find your Slack's application directory.

• Windows: %homepath%\AppData\Local\slack\
• Mac: /Applications/Slack.app/Contents/
• Linux: /usr/lib/slack/ (Debian-based)

For version 4.0.0+

3. Go to folder "resources"
4. Open app.asar with 7-zip
5. In 7-zip, view the file (with right-click on the file) to app\dist\ssb-interop.bundle.js and add the code from the file "interjectCode.js"
6. Save and close the editor, then press "OK" on the question whether the archive is to be updated.

For versions up to Slack 3

Append the code the code from the file "interjectCode.js" to the following files:

• resources\app.asar.unpacked\src\static\index.js
• 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/eklein/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: #DDD;
      --text: #999;
      --background: #000;
      --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;

    }   `

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

Notice that you can edit any of the theme colors using the custom CSS (for the already-custom theme.) Also, you can put any CSS URL you want here, so you don't necessarily need to create an entire fork to change some small styles.

That's it! Restart Slack and see how well it works.

NB: You'll have to do this every time Slack updates.

Development

git clone the project and cd into it.

Change the CSS URL to const cssPath = 'http://localhost:8080/custom.css';

Run a static webserver of some sort on port 8080:

npm install -g static
static .

In addition to running the required modifications, you will likely want to add auto-reloading:

const cssPath = 'http://localhost:8080/custom.css';
const localCssPath = '/Users/bryankeller/Code/slack-black-theme/custom.css';

window.reloadCss = function() {
   const webviews = document.querySelectorAll(".TeamView webview");
   fetch(cssPath + '?zz=' + Date.now(), {cache: "no-store"}) // qs hack to prevent cache
      .then(response => response.text())
      .then(css => {
         console.log(css.slice(0,50));
         webviews.forEach(webview =>
            webview.executeJavaScript(`
               (function() {
                  let styleElement = document.querySelector('style#slack-custom-css');
                  styleElement.innerHTML = \`${css}\`;
               })();
            `)
         )
      });
};

fs.watchFile(localCssPath, reloadCss);

Instead of launching Slack normally, you'll need to enable developer mode to be able to inspect things.

• Mac: export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app

• Linux: export SLACK_DEVELOPER_MENU=true && /usr/bin/slack

• Windows:

# Set environment variable
[System.Environment]::SetEnvironmentVariable('SLACK_DEVELOPER_MENU', 'true', 'Process')

# Launch Slack (replace x.y.z with the latest version)
& $env:LOCALAPPDATA\slack\app-x.y.z\slack.exe

# Open developer console by pressing: Ctrl + Alt + I

License

Apache 2.0

Color Schemes

Here's some example color variations you might like.

Default

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

One Dark

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

Low Contrast

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

Navy

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

Hot Dog Stand

--primary: #000;
--text: #FFF;
--background: #F00;
--background-elevated: #FF0;