\r\n\r\n

slackの(非公式)ダークモードのインストール方法

slackにはまだダークモードがありません。ダークテーマもありますが、サイドバーの色をカスタマイズできるだけで、メインウィンドウは白のままです。macosmojaveやwindows10でシステム全体のダークモードがリリースされ、slackはとても場違いな感じがしています...。

Slackにはまだダークモードがありません。ダークテーマもありますが、サイドバーの色をカスタマイズできるだけで、メインウインドウは白のままです。maco**ojaveのリリースやwindows 10のシステム全体のダークモードで、Slackは非常に場違いな感じがしています。

この方法は非公式なもので、slackのソースファイルを掘り下げる必要があります。かなり簡単ですが、アップデートのたびに上書きされるので、複数回行う必要があります。

ダウンロードテーマ

Slackはデスクトップ開発用のフレームワークであるnode.jsアプリケーションのElectron上で動作するため、WebサイトのCSSを編集するのと同じようにスタイルを編集することが可能です。しかし、SlackのCSSファイルはソースコードに隠されているため、自分でテーマを読み込む必要があります。

最も人気のある真のダークモードのテーマは、Widgetによるslack blackのテーマです。Electronがプラットフォーム間でコードを共有しているおかげで、このテーマはWindowsとLinuxでも利用可能です。は、macOSでのみ動作すると言っていますが、Windowsユーザーでも動作する可能性があります。

たるみの修復

この部分は、slackのアップデートを毎回やり直す必要があります。macOSでは、アプリケーション本体を右クリックして「パッケージの内容を表示」を選択することで、Slackのソースディレクトリにアクセスすることができます。Windowsの場合、~AppDataLocalSlackGenにあります。

次に、数個下のフォルダーにある resources/app.asar.unpacked/src/static/ に移動してください。コードを編集するs**-interoperable.jsファイルを探したいと思います。Slackが閉じていることを確認し、お気に入りのテキストエディターでファイルを開き、一番下までスクロールしてください。

以下のコードをコピーして、s** - interop.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 c***t cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; let cssPromise = fetch(cssPath).then(resp***e => resp***e.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を再び開くと、数秒後にダークモードが起動します。ローディング画面はまだ白いままですが、メインアプリケーションウィンドウはシステムの他の部分とよりよく調和します:。

独自テーマの追加

見た目が気に入らなければ、CSSを好きなスタイルに編集することができます。このコードはすべて https://cdn.rawgit.com/widget--/slack-black-theme/master/custom.css から引用しています。ファイルをダウンロードし、あなたの変更内容で編集し、URLをあなたのコードに置き換えることができます。 保存してSlackを再起動すると、あなたの変更が反映されます。が見える。CSSがわからない、あるいはちょっとだけ変更したいという場合は、CSSを読み込む前に4つのカラー変数があるので、それを使って自分の好きな色に編集することができます。

あなたが興味を持っているかもしれない記事

匿名者
匿名者

0 件の投稿

作家リスト

  1. admin 0 投稿
  2. 匿名者 0 投稿

おすすめ