Slack Night Mode

A user style for easy Slack theming. CC0.

Usage

Our instructions

Windows Desktop App 4.0

0. Make sure you have NPM installed or install it (https://blog.teamtreehouse.com/install-node-js-npm-windows)

1. Make sure your slack are on the latest version (4.0.2)

2. Quit Slack (make sure it's not still running in the System Tray)

3. Open Command prompt, navigate to %localappdata%/slack/app-4.0.2/resources/

4. Install npx with npm install -g npx

5. Install Asar with npm install -g asar

6. Unpack the app.asar with the command: npx asar extract app.asar app.asar.unpacked

7. Insert the below code at the end of in the unpacked file ssb-interop.bundle.js Note: It may look like mumbo-jumbo in the file, but it's just minified javascript - do not despair.

8. Repack the asar file: npx asar pack app.asar.unpacked app.asar

document.addEventListener("DOMContentLoaded", function() {
    let webviews = document.querySelectorAll(".TeamView webview");
    const cssPath = 'https://raw.githubusercontent.com/svendhhh/slack-night-mode/master/css/raw/black.css';
    let cssPromise = fetch(cssPath).then(response => response.text());
    cssPromise.then(css => {
       let s = document.createElement('style');
       s.type = 'text/css';
       s.innerHTML = css;
       document.head.appendChild(s);
    });    
    webviews.forEach(webview => {
       webview.addEventListener('ipc-message', message => {
          if (message.channel == 'didFinishLoading')       
             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);
             })
       });
    });
 });

---

Original Readmy from laCour's project:

Browser

This theme requires that you use a user styles extension for your browser, such as Stylus (available for Firefox, Chrome, and Opera).

Desktop App

No official support. Workarounds exist.

• dark-slack cli
• slack-theme-cli

🛑 READ FIRST: Most workarounds will request the compiled CSS file from this repository. You are strongly discouraged from using a remote CSS file. It's recommended that you create your own copy. An XSS attack could put your Slack client at risk.

(previous discussion)

Themes

Supported

Black (source - build - install)

The primary supported theme. This is an excellent theme if you use a program like f.lux or redshift.

Aubergine (source - build - install)

This is based on Slack's aubergine/maroon style. It's the original theme.

Variants

• Arc (source - build) by @Lemmmy
• Gruvbox Dark (source - build) by @lvarado
• Midnight Blue (source - build) by @matt-h
• Solarized Dark (source - build) by @glostis
• Solarized Light (source - build) by @glostis
• Tomorrow Dark (base16) (repository) by @danarnold

Extensions

Variants can have extensions which add additional changes.

Monospaced (source)

Replaces the messaging font stack with a monospace font stack.