Hur man Installerar den (Inofficiella) Mörkt Läge för Slack

0
288

Slack fortfarande inte har ett mörkt läge. De har mörka teman, men de bara låter dig anpassa sidofältet färger, lämnar de viktigaste fönster vita. Med lanseringen av systemet mörka lägen på macOS och Windows Mojave 10, Slack känns väldigt malplacerad.

Denna metod är inofficiell och innebär att gräva runt i källfilerna för Slack. Det är ganska lätt att göra, men eftersom det kommer att skrivas över varje gång du uppdaterar, måste du göra detta flera gånger.

Ladda ner ett Tema

Eftersom Slack går på Elektron, en ram för att utveckla skrivbordet Node.js appar kan du redigera formatmallar för det som du vill redigera CSS på en webbplats. Men CSS-filer för Slack är begravda i källan, så måste du läsa in dina egna teman.

De mest populära sant mörka läget tema är slak-svart-tema av Widget. Och eftersom Elektron aktier koden mellan plattformar, detta tema fungerar på Windows och Linux. Vi fann att det fanns vissa problem med tema på macOS Mojave dock, så om det inte fungerar kan du prova detta gaffel, som säger att det fungerar på macOS bara, men kan fungera för Windows-användare.

Lapp Slack

Denna del, har du att göra igen varje gång Slack uppdateringar. På macOS, du kan komma till Slaka källa katalog genom att högerklicka på appen och välja “Visa Paketets Innehåll”. På Windows, du hittar det på ~AppDataLocalslack .

Sedan navigerar du några mappar ner till resurser/app.asar.uppackat/src/static/ . Du kommer att vilja hitta ssb-interop.js fil, där du kan redigera koden. Se till Slack är stängt, öppna filen i din favorit textredigerare, och bläddra till längst ned:

Kopiera och klistra in följande kod på slutet av ssb-interop.js fil:

// Kontrollera först att wrapper-app är laddad
dokumentet.addEventListener(“DOMContentLoaded”, function() {

// Sedan få sin webviews
låt webviews = dokument.querySelectorAll(“.TeamView webview”);

// Hämta vår CSS parallellt i förväg
const cssPath = ‘https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css’;
låt cssPromise = fetch(cssPath).sedan(som svar => svar.sms: a());

låt customCustomCSS = `
:root {
/* Ändra dessa för att ändra ditt tema färger: */
–primära: #09F;
–text: #CCC;
–background: #080808;
–background-förhöjd: #222;
}
`

// Sätt in en style-tagg i omslaget visa
cssPromise.då(css => {
låt s = – dokument.createElement (“stil”);
s.type = ‘text/css’;
s.innerHTML = css + customCustomCSS;
dokumentet.huvud.appendChild(s);
});

// Vänta på att varje webview att ladda
webviews.forEach(webview => {
webview.addEventListener(‘ipc-meddelande’, message => {
om (meddelande.kanal == ‘didFinishLoading’)
// Sist lägga till CSS i webview
cssPromise.då(css => {
låt script = `
låt s = – dokument.createElement (“stil”);
s.type = ‘text/css’;
s.id = “slack-custom-css’;
s.innerHTML = `${css + customCustomCSS}`;
dokumentet.huvud.appendChild(s);
`
webview.executeJavaScript(script);
})
});
});
});

Du vill förmodligen för att kopiera denna fil och spara den på en annan plats, så du behöver inte ändra koden varje gång. Detta sätt, du kan bara dra den till den katalog som du vill skriva över den nyaste versionen:

När du är klar, öppna Slack, och efter några sekunder mörka läget ska sparka i. Lastning skärmen kommer fortfarande att vara vit, men den största app-fönstret kommer att smälta in mycket bättre med resten av ditt system:

Lägga Till Dina Egna Teman

Om du inte gillar det, kan du redigera CSS med alla stilar du vill. Alla här koden gör är att läsa in anpassade stilar från https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css du kan ladda ner den filen, redigera den med dina ändringar, och byt ut URL: en med din egen kod. Spara, nystart Slack, och ändringar kommer att synas. Om du inte vet CSS, eller bara vill göra en liten förändring, det finns fyra färger variabler definieras innan lastning CSS, så kan du bara redigera dem med dina egna färger.