Edited at

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


2019/09/13 追記

公式アプリがDark Modeに対応しました。

Preferences -> Themes から設定できます。

公式ブログ記事 デスクトップにダークモードが登場。使用方法をチェックしよう! | The Official Slack Blog


概要

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



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 を参考に快適に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記法


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記法


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://github.com/laCour/slack-night-mode/tree/master/css/raw から参照できるファイルで設定できる。