YDiary

メモ的な

Slackを黒くする

SlackのWindowsアプリが白くて目が疲れるので,黒くするお話.
SlackのWindowsアプリはElectron製で,jsで書かれているので簡単に中身を弄れる.
下記の内容の利用は自己責任でお願いします.

app.asarを展開

今回はBoW上で作業した.
まず,
Ubuntuに最新のNode.jsを難なくインストールする - Qiita
を参考にBoW上にnodejsをインストール. npmを消す前に apt-get install node-gyp でnode-gypもインストール.

そして,asarを展開(バージョンは環境に合わせて読み替えること).

npm install -g asar
cd %LOCALAPPDATA%/slack/app-2.3.3/resources
asar e app.asar app.extract

ロード時にcssを適用

Webviewが読まれるタイミングで,好きなcssをinjectionする.
アプリ版も,中身のhtmlはweb版とほとんど変わらないので,web版と同じuserstyleを適用できる.
Slackでは,Webviewのpreloadで\src\static\ssb-interop.jsを読みに行ってるので,このファイルの末尾に次のように追記する.

onload = function(){
  $.ajax({
    url: "https://cdn.rawgit.com/laCour/slack-night-mode/master/css/black.css",
    success: function(css) {
      $("<style></style>").appendTo("head").html(css.slice(60).slice(0, -2));
    }
  });
}

app.asarをパッキング

編集したファイルをパッキングして,app.asarを上書きする.

asar p app.extract app.asar

サイドバーの色も揃える

このままでは,サイドバーだけ元の色のままなので,Preferencesからサイドバーの色も調節する.
f:id:YDKK:20161204184509p:plain
#363636,#2A2A2A,#222222,#FFFFFF,#4A5664,#FFFFFF,#94E864,#bf360c

完成

これで,黒くて目に優しいSlackの出来上がり.
f:id:YDKK:20161204185006p:plain

※Slackのバージョンアップの度に同じ操作を適用する必要あり.
公式で黒テーマ提供してくれれば良いのだが….

参考

blog.hinaloe.net

blog.lacour.me

github.com