Dark Theme for Slack

A darker, more contrasty, Slack theme.

• Based on css from Bryan Keller https://github.com/widget-/slack-black-theme

Preview

Installing into Slack

Find your Slack's application directory.

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

Open up the most recent version (e.g. app-2.5.1) then open resources\app.asar.unpacked\src\static\ssb-interop.js

At the very bottom, add

// First make sure the wrapper app is loadeddocument.addEventListener("DOMContentLoaded",function(){// Then get its webviewsletwebviews=document.querySelectorAll(".TeamView webview");// Fetch our CSS in parallel ahead of time// Note this will be updated with my rawgit url.constcssPath='https://rawgit.com/Arezhik/slackCustomCSS/master/custom.css';letcssPromise=fetch(cssPath).then(response=>response.text());letcustomCustomCSS=` :root { /* Modify these to change your theme colors: */ --primary: #09F; --text: #CCC; --background: #080808; --background-elevated: #222; } `// Insert a style tag into the wrapper viewcssPromise.then(css=>{lets=document.createElement('style');s.type='text/css';s.innerHTML=css+customCustomCSS;document.head.appendChild(s);});// Wait for each webview to loadwebviews.forEach(webview=>{webview.addEventListener('ipc-message',message=>{if(message.channel=='didFinishLoading')// Finally add the CSS into the webviewcssPromise.then(css=>{letscript=` 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 or press <ctrl + f> to refresh the client.

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

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;

Development - TODO Review this section.

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:

constcssPath='http://localhost:8080/custom.css';constlocalCssPath='/Users/bryankeller/Code/slack-black-theme/custom.css';window.reloadCss=function(){constwebviews=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: (todo)

• Windows: (todo)

License

Apache 2.0