So Installieren Sie das (Inoffizielle) Dunkel-Modus für Slack

0
49

Slack immer noch nicht haben einen dunklen Modus. Sie haben dunkle Themen, aber diejenigen, die nur können Sie anpassen, die sidebar Farben, so dass die wichtigsten Fenster weiß. Mit der Veröffentlichung von system-weiten dunklen Modi auf macOS Mojave-und Windows 10, Locker, fühlt sich sehr fehl am Platz.

Diese Methode ist inoffiziell und umfasst Graben um in die source-Dateien für Slack. Es ist ziemlich einfach zu tun, aber da wird es überschrieben werden jedes mal, wenn Sie aktualisieren, Sie müssen dies tun, mehrere Male.

Herunterladen eines Designs

Da Slack läuft auf Elektron, ein framework für die Entwicklung von Desktopanwendungen Node.js apps, die Sie Bearbeiten können, werden die Stile für es wie Sie möchten Bearbeiten Sie die CSS einer website. Aber die CSS-Dateien für das Lockere begraben sind, die in die Quelle, so werden Sie laden Sie Ihre eigenen Themen.

Die beliebtesten true dark-Modus-Thema ist frei-schwarz-Thema, indem Widget. Und da-Electron-Aktien-code über Plattformen hinweg, dieses Thema funktioniert auf Windows und Linux. Wir fanden, dass es gab einige Probleme mit dem Thema auf macOS Mojave-obwohl, so dass, wenn es nicht funktioniert, dann können Sie versuchen, diese Gabel, die sagt, es funktioniert auf macOS aber nur für Windows-Anwender als auch.

Patchen Slack

Das Teil, das Sie tun müssen, jedes mal neu Slack-updates. Auf macOS, können Sie bekommen zu Slack ‘ s source-Verzeichnis, indem Sie mit der rechten Maustaste auf die app und wählen Sie “Paketinhalt Zeigen”. Unter Windows finden Sie es in ~AppDataLocalLocker .

Navigieren Sie dann ein paar Ordner nach unten, um resources/app.asar.entpackt/src/static/ . Sie gehen zu wollen, zu finden ssb-interop.js Datei, wo du den code Bearbeiten. Stellen Sie sicher Locker geschlossen ist, öffnen Sie die Datei in Ihrem bevorzugten text-editor, und scrollen Sie nach unten:

Kopieren und fügen Sie den folgenden code am Ende der ssb-interop.js Datei:

// Stellen Sie zunächst sicher, dass die wrapper-app geladen wird
Dokument.addEventListener(“DOMContentLoaded”, function() {

// Dann Holen Sie sich Ihre webviews
lassen Sie webviews = document.querySelectorAll(“.TeamView webview”);

// Holt das CSS parallel vor der Zeit
const cssPath = ‘https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css’;
lassen Sie cssPromise = fetch(cssPath).(Antwort => Antwort.text());

lassen Sie customCustomCSS = `
:root {
/* Diese ändern, ändern Sie Ihr Thema Farben: */
–primary: #09F;
–text: #CCC;
–background: #080808;
–hintergrund-erhöhte: #222;
}
`

// Fügen Sie ein style-tag in den wrapper anzeigen
cssPromise.dann(css => {
let s = document.createElement(‘style’);
s.type = ‘text/css’;
s.innerHTML = css + customCustomCSS;
Dokument.Kopf.appendChild(s);
});

// Warten für jede webview laden
webviews.forEach(webview => {
webview.addEventListener(‘ipc-message”, message => {
if (Nachricht.channel == ‘didFinishLoading’)
// Schließlich fügen Sie die CSS in der webview
cssPromise.dann(css => {
lassen Sie script = `
let s = document.createElement(‘style’);
s.type = ‘text/css’;
s.id = ‘slack-custom-css’;
s.innerHTML = `${css + customCustomCSS}`;
Dokument.Kopf.appendChild(s);
`
webview.executeJavaScript(Skript);
})
});
});
});

Sie werden wahrscheinlich wollen, duplizieren Sie diese Datei und speichern Sie es an einem anderen Ort, so dass Sie nicht haben, um den code Bearbeiten zu jeder Zeit. Diese Weise, können Sie einfach ziehen Sie es in das Verzeichnis überschreiben der neuesten version:

Nachdem Sie fertig sind, öffnen Sie Locker, und nach ein paar Sekunden dunkel-Modus kick sollte. Der lade-Bildschirm weiterhin weiß sein, aber die wichtigsten app-Fenster wird der Mischung viel besser mit dem rest von deinem system:

Indem Sie Ihre Eigenen Themen

Wenn Sie nicht wie die Aussehen, können Sie Bearbeiten die CSS-Datei mit Formatvorlagen, die Sie wollen. Dieser code tut, ist das laden von benutzerdefinierten Stilen aus https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css, Sie können Sie herunterladen, die Datei, Bearbeiten Sie es mit Ihren änderungen, und ersetzen Sie die URL mit Ihrem eigenen code. Speichern, neu starten Slack, und Ihre änderungen werden sichtbar. Wenn Sie nicht wissen, CSS, oder wollen einfach nur eine kleine änderung machen, es gibt vier Farb-Variablen definiert werden, bevor das laden der CSS, so können Sie einfach Bearbeiten Sie diese mit Ihren eigenen Farben.