Slack hat immer noch keinen dunklen Modus. Sie haben dunkle Motive, aber Sie können nur die Farben der Seitenleiste anpassen, sodass das Hauptfenster weiß bleibt. 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 umfasst das Durchgraben der Quelldateien für Slack. Das 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 Formatvorlagen 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. Bei macOS Mojave gab es jedoch Probleme mit dem Theme. Wenn es nicht funktioniert, können Sie diese Verzweigung ausprobieren, die besagt, dass sie nur mit 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 in das 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~AppDataLocalslack .

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:

// 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 const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; let cssPromise = fetch(cssPath).then(response => response.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); }) }); }); });

Wahrscheinlich möchten Sie diese Datei 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 Dunkelmodus aktiviert werden. 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 Slack erneut, und Ihre Änderungen werden sichtbar. Wenn Sie kein CSS kennen oder nur eine geringfügige Änderung vornehmen möchten, sind vor dem Laden von CSS vier Farbvariablen definiert, sodass Sie diese nur mit Ihren eigenen Farben bearbeiten können.

Top-Tipps:
Kommentare: