So installieren Sie den (inoffiziellen) Dark-Modus für Slack

Slack hat immer noch keinen dunklen Modus. Sie haben dunkle Themen, aber Sie können nur die Farben der Seitenleiste anpassen und das Hauptfenster weiß lassen. Mit der Veröffentlichung von systemweiten Dark-Modi auf MacOS Mojave und Windows 10 fühlt sich Slack sehr fehl am Platz.

Diese Methode ist nicht inoffiziell und erfordert das Durchgraben der Quelldateien für Slack. Dies ist ziemlich einfach, aber da es bei jeder Aktualisierung überschrieben wird, müssen Sie dies mehrmals tun.

Ein Theme herunterladen

Da Slack auf Electron ausgeführt wird, einem Framework für die Entwicklung von Desktop-Node.js-Apps, können Sie die Stile so bearbeiten, als würden Sie das CSS einer Website bearbeiten. Die CSS-Dateien für Slack sind jedoch in der Quelle vergraben, sodass Sie Ihre eigenen Designs laden müssen.

Das beliebteste True-Dark-Mode-Theme ist das Slack-Black-Theme von Widget. Und da Electron den Code plattformübergreifend verwendet, funktioniert dieses Thema auch unter Windows und Linux. Wir haben jedoch festgestellt, dass es Probleme mit dem Thema auf MacOS Mojave gab. Wenn es nicht funktioniert, können Sie diese Verzweigung ausprobieren, die besagt, dass sie nur unter MacOS funktioniert, aber möglicherweise auch für Windows-Benutzer.

Patches Slack

Diesen Teil müssen Sie bei jeder Aktualisierung von Slack erneut durchführen. Unter macOS können Sie zum Quellverzeichnis von Slack gelangen, indem Sie mit der rechten Maustaste auf die App klicken und „Paketinhalt anzeigen“ auswählen. Unter Windows finden Sie es unter ~ \ AppData \ Local \ Slack \ .

Navigieren Sie dann durch einige Ordner bis zu resources / app.asar.unpacked / src / static / . Sie wollen das finden ssb-interop.js Datei, in der Sie den Code bearbeiten. Stellen Sie sicher, dass Slack geschlossen ist, öffnen Sie diese Datei in Ihrem bevorzugten Texteditor und scrollen Sie nach unten:

Kopieren Sie den folgenden Code, und fügen Sie ihn am Ende von ein ssb-interop.js Datei:

// Vergewissern Sie sich zuerst, dass die Wrapper-App geladen ist. Document.addEventListener ("DOMContentLoaded", function () // Rufen Sie dann die Webviews auf. Lassen Sie Webviews = Document.querySelectorAll (". TeamView Webview"); // holen Sie unsere CSS parallel voraus of time const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; lassen Sie cssPromise = fetch (cssPath) .then (response => response.text ()) Lassen Sie customCustomCSS = ': root / * Ändern Sie diese, um die Farben Ihres Designs zu ändern: * / --primary: # 09F; --text: #CCC; --background: # 080808; --background-raised: # 222 ; '// Ein Style-Tag in die Wrapper-Ansicht einfügen cssPromise.then (css => let s = document.createElement (' style '); s.type =' text / css '; s.innerHTML = css + customCustomCSS ; document.head.appendChild (s);); // Warten Sie, bis jeder Webview webviews geladen hat.forEach (webview => webview.addEventListener ('ipc-message', message => if (message.channel == 'didFinishLoading') // Zum Schluss fügen Sie das CSS in die Webansicht 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 (Skript); )); ); ); 

Sie möchten diese Datei wahrscheinlich duplizieren und an einem anderen Ort speichern, so dass Sie den Code nicht jedes Mal bearbeiten müssen. Auf diese Weise können Sie es einfach in das Verzeichnis ziehen, um die neueste Version zu überschreiben:

Wenn Sie fertig sind, öffnen Sie Slack erneut, und nach einigen Sekunden sollte der dunkle Modus eintreten. Der Ladebildschirm wird immer noch weiß angezeigt, aber das Hauptfenster der App fügt sich viel besser in den Rest Ihres Systems ein:

Eigene Themen hinzufügen

Wenn Ihnen das Aussehen nicht gefällt, können Sie das CSS mit beliebigen Stilen bearbeiten. In diesem Code werden benutzerdefinierte Stile von https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css geladen. Sie können diese Datei herunterladen, mit Ihren Änderungen bearbeiten und die URL durch Ihren eigenen Code ersetzen. Speichern Sie, starten Sie Slack erneut, und Ihre Änderungen werden sichtbar. Wenn Sie kein CSS beherrschen oder nur eine geringfügige Änderung vornehmen möchten, gibt es vier definierte Farbvariablen, bevor Sie das CSS laden. Sie können diese also einfach mit Ihren eigenen Farben bearbeiten.