Slack的黑暗模式(Dark Mode)

最近把工作再使用的 MAC 升級到 Mojave 然後就愛上了Dark Mode，這對每天都盯著螢幕的工程師眼睛實在是減輕很多壓力。

但是工作上常使用的 Slack 並沒有支援 Dark Mode ，所以找了網路上分享的做法來修改。

完成示意如下

修改步驟如下

• 打開 ssb-interop.js

MAC：/Applications/Slack.app/Contents/
Windwos: %homepath%\AppData\Local\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/3ea2efdfb96ccc91549837ab237d57104181bbf8/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;
}
`
// 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);
})
});
});
});

• 重新開啟slack