Skip to main content

如何為Slack安裝(非官方)黑暗模式

如何為Slack安裝(非官方)黑暗模式

Geoffrey Carr

Slack仍然沒有黑暗模式。它們有深色主題,但只允許您自定義側邊欄顏色,使主窗口保持白色。隨著macOS Mojave和Windows 10上系統範圍的暗模式的發布,Slack感覺非常不合適。

這種方法是非官方的,涉及在Slack的源文件中挖掘。這很容易做到,但由於每次更新都會被覆蓋,因此您必須多次執行此操作。

下載主題

由於Slack運行在Electron(用於開發桌面Node.js應用程序的框架)上,您可以像編輯網站的CSS一樣編輯它的樣式。但Slack的CSS文件隱藏在源代碼中,因此您必須加載自己的主題。

最受歡迎的真正黑暗模式主題是Widget的黑色主題。由於Electron在各個平台上共享代碼,因此該主題也適用於Windows和Linux。我們發現macOS Mojave上的主題存在一些問題,所以如果它不起作用那麼你可以試試這個fork,它說它只適用於macOS,但也適用於Windows用戶。

修補Slack

這一部分,每次Slack更新時你都必須再做一次。在macOS上,您可以通過右鍵單擊應用程序本身並選擇“顯示包內容”來訪問Slack的源目錄。在Windows上,你會找到它~AppDataLocalslack .

然後,將幾個文件夾導航到 resources/app.asar.unpacked/src/static/ 。你會想要找到 ssb-interop.js 文件,您將在其中編輯代碼。確保Slack已關閉,在您喜歡的文本編輯器中打開該文件,然後滾動到底部:

複製並粘貼以下代碼 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://cdn.rawgit.com/widget-/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: #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,幾秒鐘後黑暗模式應該啟動。加載屏幕仍然是白色,但主應用程序窗口將與系統的其餘部分更好地融合:

添加自己的主題

如果你不喜歡它的外觀,你可以用你想要的任何樣式編輯CSS。所有這些代碼都是從https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css加載自定義樣式;您可以下載該文件,使用您的更改進行編輯,並使用您自己的代碼替換該URL。保存,重新啟動Slack,您的更改將會顯示。如果您不了解CSS,或者只想進行微小的更改,則在加載CSS之前會定義四個顏色變量,因此您可以使用自己的顏色編輯它們。

Link
Plus
Send
Send
Pin