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

Slack hat immer noch keinen Dark Mode. Sie haben dunkle Themen, aber mit diesen können Sie nur die Farben der Seitenleiste anpassen und das Hauptfenster weiß lassen. Mit der Veröffentlichung systemweiter dunkler Modi für macOS Mojave und Windows 10 fühlt sich Slack sehr fehl am Platz an.

Diese Methode ist inoffiziell und beinhaltet das Durchsuchen der Quelldateien für Slack. Es ist ziemlich einfach, aber da es bei jedem Update überschrieben wird, müssen Sie dies mehrmals tun.

Ein Thema herunterladen

Da Slack auf Electron läuft, einem Framework für die Entwicklung von Desktop-Node.js-Apps, können Sie die Stile dafür wie das CSS einer Website bearbeiten. Die CSS-Dateien für Slack sind jedoch im Quellcode vergraben, sodass Sie Ihre eigenen Designs laden müssen.

Das beliebteste True Dark Mode-Thema ist slack-black-theme von Widget. Und da Electron Code plattformübergreifend teilt, funktioniert dieses Thema auch unter Windows und Linux. Wir haben jedoch festgestellt, dass es unter macOS Mojave einige Probleme mit dem Thema gab. Wenn es also nicht funktioniert, können Sie es versuchen diese Gabel, die besagt, dass es nur unter macOS funktioniert, aber möglicherweise auch für Windows-Benutzer.

Slack patchen

Diesen Teil musst du bei jedem Slack-Update wiederholen. Unter macOS gelangen Sie zum Quellverzeichnis von Slack, indem Sie mit der rechten Maustaste auf die App selbst klicken und „Paketinhalt anzeigen“ auswählen. Unter Windows finden Sie es unter ~AppDataLocalslack .

Navigieren Sie dann in einigen Ordnern nach unten zu resources/app.asar.unpacked/src/static/ . Du wirst die finden wollen ssb-interop.js Datei, in der Sie den Code bearbeiten. Stelle sicher, dass Slack geschlossen ist, öffne diese Datei in deinem bevorzugten Texteditor und scrolle nach unten:

Kopieren Sie den folgenden Code und fügen Sie ihn ganz am Ende des 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, damit 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 ein paar Sekunden sollte der Dunkelmodus aktiviert werden. Der Ladebildschirm ist immer noch weiß, aber das Hauptfenster der App wird sich viel besser in den Rest Ihres Systems einfügen:

Hinzufügen eigener Themen

Wenn Ihnen das Aussehen nicht gefällt, können Sie das CSS mit beliebigen Stilen bearbeiten. Alles, was dieser Code tut, ist benutzerdefinierte Stile zu laden von https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; Sie können diese Datei herunterladen, mit Ihren Änderungen bearbeiten und die URL durch Ihren eigenen Code ersetzen. Speichere, starte Slack neu und deine Änderungen werden sichtbar. Wenn Sie CSS nicht kennen oder nur eine kleine Änderung vornehmen möchten, werden vor dem Laden des CSS vier Farbvariablen definiert, sodass Sie diese einfach mit Ihren eigenen Farben bearbeiten können.