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

モバイルアプリ版ではリリース済みのダークモードを、Windowsデスクトップアプリなどで強引に適用させるためのハックです。
「Slack公式対応まで待てない！」という方は、自己責任でどうぞ。
※本記事はGitに掲載されている**[Slack Black Teheme](https://github.com/widget-/slack-black-theme)**の日本語訳（一部抜粋）となります。
![alt](https://cloud.githubusercontent.com/assets/7691630/24120350/4cbb643e-0d82-11e7-8353-5d4eb65dfd6a.png)

# 対応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
```

![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283501/e90fddc8-2c6e-b85a-225d-601c72f40647.jpeg)


##### ③開いたファイルの末尾に**下記のコード**を貼り付けて、上書き保存します。
※作業が不安な方は、あらかじめ `ssb-interop.js` のバックアップを取りましょう。

```javascript: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

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

```javascript:
   :root {
      /* Modify these to change your theme colors: */
      --primary: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }
```
## Default
![alt](https://cloud.githubusercontent.com/assets/7691630/24120350/4cbb643e-0d82-11e7-8353-5d4eb65dfd6a.png)

```javascript:
--primary: #09F;
--text: #CCC;
--background: #080808;
--background-elevated: #222;
```
## One Dark
![alt](https://user-images.githubusercontent.com/806101/27455546-826b3d88-5752-11e7-8a6b-87285b90eb3e.png)

```javascript:
--primary: #61AFEF;
--text: #ABB2BF;
--background: #282C34;
--background-elevated: #3B4048;
```
## Low Contrast
![alt](https://cloud.githubusercontent.com/assets/7691630/24120352/4ccdedf2-0d82-11e7-8ff7-c88e48b8e917.png)

```javascript:
--primary: #CCC;
--text: #999;
--background: #222;
--background-elevated: #444;
```
## Navy
![alt](https://cloud.githubusercontent.com/assets/7691630/24120353/4cd08c4c-0d82-11e7-851a-4c62340456ad.png)

```javascript:
--primary: #FFF;
--text: #CCC;
--background: #225;
--background-elevated: #114;
```

## Hot Dog Stand
![alt](https://cloud.githubusercontent.com/assets/7691630/24120351/4cca6182-0d82-11e7-8de8-7ab99dcde042.png)

```javascript:
--primary: #000;
--text: #FFF;
--background: #F00;
--background-elevated: #FF0;
```

以上