v4.0.0 対応: 5分でデスクトップ版のSlackにDark Themeを適用する

## 2019/09/13 追記

公式アプリがDark Modeに対応しました。
Preferences -> Themes から設定できます。

公式ブログ記事 [デスクトップにダークモードが登場。使用方法をチェックしよう！ \| The Official Slack Blog](https://slackhq.com/intl-ja-jp-dark-mode-for-slack-desktop)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32750/797fcc45-2313-70b6-99b6-d9c8e5c68662.png)


## 概要

Macのデスクトップ版アプリ Slack Version 4.0.0 にDark Modeを適用する手順です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32750/fd30e48d-ee80-8ecb-ec03-406e839ceb87.png)
Image from https://github.com/laCour/slack-night-mode

## tl;dr

- `/Applications/Slack.app/Contents/Resources/app.asar` を展開
- `app/dist/ssb-interop.bundle.js` にcssをappendする処理を追記
- 追記したssb-interop.bundle.jsを含めたapp.asarを作成してSlack.appにコピー


## 環境

- macOS Mojave 10.14.5
- Slack Version 4.0.0 (App Store)

## 背景

@kazuki1213 さんの [5分でデスクトップ版のSlackにDark Themeを適用する \- Qiita](https://qiita.com/kazuki1213/items/bfc85bc847caa1617c18) を参考に快適にDark ModeでSlackを使っていたのですが、 2019/07/16にSlack v4.0.0に更新するとディレクトリ構成が変わって、上記記事の方法ではできなくなってしまいました。

## 原因

4.0.0から `ssb-interop.js` の配置ディレクトリが変わった

|Version|配置場所|
|-----|----|
|3.4.2 |/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
|4.0.0|/Applications/Slack.app/Contents/Resources/app.asarの中


## デスクトップ版のSlackにDark Themeを適用する

### 1. asar コマンドをインストール

```
npm install -g asar
```

### 2. Slack.app から app.asar , app.asar.unpacked をコピー

```
mkdir -p ~/tmp/slack
cp /Applications/Slack.app/Contents/Resources/app.asar ~/tmp/slack
cp -r /Applications/Slack.app/Contents/Resources/app.asar.unpacked ~/tmp/slack
```

### 3. asar を展開

```
cd ~/tmp/slack
asar extract app.asar app
```

### 4. ssb-interop.bundle.js の先頭に追記

```
vim app/dist/ssb-interop.bundle.js
```

fetch記法かajax記法のどちらか1つをファイルの先頭に追記する

#### fetch記法

```js:ssb-interop.bundle.js
document.addEventListener('DOMContentLoaded', function() {    
  fetch('https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css')    
  .then(function(response) {
    return response.text();
  })
  .then(function(css) {
    const style = document.createElement('style'); 
    style.innerHTML = css;
    document.head.appendChild(style);
  });
});
```

#### ajax記法

```js:ssb-interop.bundle.js
document.addEventListener('DOMContentLoaded', function() {
  $.ajax({
    url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
    success: function(css) {
      $("<style></style>").appendTo('head').html(css);
    }
  });
});
```

### 5. asar を作成

```
asar pack app app.asar
```

### 6. 作成したapp.asarをコピー

```
sudo cp app.asar /Applications/Slack.app/Contents/Resources
```

### 7. Slackを起動

```
open /Applications/Slack.app
```

## テーマの種類

記事にあるblack.css以外で、これらのテーマが設定できた。urlを変えてSlackを再起動すると反映される。

- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/black-monospaced.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/aubergine.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/aubergine-monospaced.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/arc-dark.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/midnight-blue.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/midnight-blue-monospaced.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/solarized-dark.css
- https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/variants/solarized-light.css

リポジトリの https://github.com/laCour/slack-night-mode/tree/master/css/raw から参照できるファイルで設定できる。