Slackのデスクトップバージョンにダークテーマを配置したかったのは、 私は暗闇の中でそれに多くの時間を費やし、均質な暗い環境で快適に仕事をしたい。
公式トピックは持ち込まれず、おそらく近い将来に計画されることさえないので、私は愛好家の現在の成果を使わなければなりませんでした。 なぜなら SlackのデスクトップバージョンはElectronで書かれているので、既にビルドされたアプリケーションのスタイルを制御できるので、既製のソリューションまたはそれらのヒントに向かって掘り始めました。
最初は、既存のカスタムスブラックソリューションを配置することを考えましたが、それはMacOSの幸せな所有者にのみ判明しました。 そのため、さらに調査する必要があり、このサイトでかなり興味深いハックに出会いました。 ソリューションは壊れていることが判明しましたが、ここからスタイルのカスタマイズに参加しました。 そして、私はここから主な作業ソリューションを取りました 。
私は少しカスタムソリューションを持っています、なぜなら テキストと写真は、暗い背景に対してあまりにもシャープで明るく、vyrviglaznoに見えました。 その結果、テキストの明るさを減らし、画像のプレビューを暗くして、作業しやすく、投稿の最初の写真に表示される結果を得ました。
さまざまなプラットフォームでこれを行う方法の簡単な説明を次に示します。
- Slackアプリケーションを完全に閉じます。
- Windowsの場合。 ファイルの最後に〜\ AppData \ Local \ slack \ app-3.3.8 \ resources \ app.asar.unpacked \ src \ static \ ssb-interop.jsのコードを追加します。
document.addEventListener('DOMContentLoaded', function() { $.ajax({ url: 'https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css', success: function(css) { let customCustomCSS = ` .c-message__body { /* Modify these to change your theme colors: */ color: #a2a2a2; } .p-file_image_thumbnail__wrapper:after { opacity: 0.4; background-color: black; } .c-message--light .c-message__sender .c-message__sender_link, .p-threads_view__divider_label, .p-message_container_loading__msg, .p-threads_flexpane__header_channel_name, .c-icon--times:before { color: #d5d5d5; } .p-threads_view, .p-threads_view__default_background--first, .p-threads_view__default_background--last, .c-message_kit__thread_message, .p_threads_view_load_older_button, .p-threads_view__divider_label, .p_threads_view_load_older_button:hover{ background-color: #222222; } .p-threads_footer__input--legacy .p-message_input_field, .p-message_container_loading{ background-color: #222222; } .p-threads_view_header__channel_name, .p-threads_view .c-message_kit__thread_message .c-message_kit__labels__label{ color: #d5d5d5; } `; $("<style></style>").appendTo('head').html(css + customCustomCSS); } }); });
MacOSおよびLinuxの場合、ファイルに対してのみ同じことを行います。
- Linux：/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js;
- flatpack経由でインストールした場合：
このソリューションはmiirによって＃comment_20062516で作成されました/var/lib/flatpak/app/com.slack.Slack/x86_64/stable/INSTALLATION_ID_STRING/files/extra/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js。
INSTALLATION_ID_STRINGは長い文字列に置き換えられます。
管理者特権でファイルを編集する必要があります。 - MacOS：/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js。
スタイルを変更する場合は、SlackのWebバージョンを開き、DOMで関心のあるブロックの構造を確認し、開発者のツールでスタイルを直接設定し、結果のコードをcustomCustomCSS変数にコピーする必要があります。
- ファイルを保存して、アプリケーションを実行します。 新しいスタイルが自動的に適用されます。
設定は、次にアプリケーションが更新されたときに表示されます。
したがって、テーマが気に入ったら、修正した `ssb-interop.js`ファイルのコピーをSlackディレクトリ以外の場所に保存することをお勧めします。そうすれば、後で同じことをしないでください。 次回の更新時に、ディレクトリ内のこのファイルを新しいバージョンに再度置き換える必要があります。
私の指示が、私のような暗いテーマの同じ恋人に役立つことを願っています。
すべて快適な開発！
UPD-2019年4月21日。 コードを更新しました。 主要なバグは、「 すべてのスレッド」セクションの表示と、セクション自体のマイナーなバグで修正されました。 マイナーバグは、サービスメッセージラベル、スレッド名、およびスレッド終了アイコンの表示で修正されました。
テストを行い、バグを指摘してくれたnewbie_javaとsw0rl0kに感謝します。
UPD2-2019年4月23日。 フラットパック経由でSlackをインストールしているユーザー向けの手順にソリューションが追加されました。 miirのソリューションに感謝します。