Slack デスクトップアプリ Darkmode Hack

モバイルアプリ版ではリリース済みのダークモードを、Windowsデスクトップアプリなどで強引に適用させるためのハックです。
「Slack公式対応まで待てない！」という方は、自己責任でどうぞ。
※本記事はGitに掲載されている**Slack Black Teheme**の日本語訳（一部抜粋）となります。

対応OS

Windows/Mac/Linux

動作環境

Windows 3.4.3 64-bit

適用方法

①Slackがインストールされているディレクトリを探します。

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

②下記ディレクトリを参照して ssb-interop.js を開きます。

※以下、Windowsの場合

C:\Users\{ユーザーID}\AppData\Local\slack\{アプリバージョン}\resources\app.asar.unpacked\src\static

③開いたファイルの末尾に下記のコードを貼り付けて、上書き保存します。

※作業が不安な方は、あらかじめ ssb-interop.js のバックアップを取りましょう。

darkify-slack-script.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を再起動して、ダークモードが反映されていることをご確認ください。

※この作業はデスクトップアプリのバージョンが変更された際、再度作業が必要です。

Color Schemes

下記の箇所を変更することで、カラーテーマを変更可能です。

   :root {
      /* Modify these to change your theme colors: */
      --primary: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }

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;

以上