Hoe de (onofficiële) donkere modus te installeren voor Slack

Slack heeft nog steeds geen donkere modus. Ze hebben donkere thema's, maar je kunt alleen de zijbalkkleuren aanpassen en het hoofdvenster wit laten. Met de release van systeembrede donkere modi op macOS Mojave en Windows 10, voelt Slack zich erg misplaatst.

Deze methode is niet-officieel en omvat het rondgraven in de bronbestanden voor Slack. Het is vrij eenvoudig om te doen, maar omdat het elke keer dat je het update, zal worden overschreven, zul je dit meerdere keren moeten doen.

Een thema downloaden

Omdat Slack werkt op Electron, een framework voor het ontwikkelen van desktop Node.js-apps, kun je de stijlen ervoor bewerken zoals je de CSS van een website zou bewerken. Maar de CSS-bestanden voor Slack zijn begraven in de bron, dus je zult je eigen thema's moeten laden.

Het meest populaire echte donkere-modusthema is slapzwart-thema van Widget. En aangezien Electron code deelt over verschillende platforms, zal dit thema ook op Windows en Linux werken. We ontdekten dat er problemen waren met het thema op macOS Mojave, dus als het niet werkt, kun je deze vork uitproberen, die zegt dat het alleen op MacOS werkt, maar ook voor Windows-gebruikers werkt.

Onvolledig patchen

Dit gedeelte moet je elke keer opnieuw doen als Slack updates heeft. Op macOS kun je de brondirectory van Slack bereiken door met de rechtermuisknop op de app zelf te klikken en "Show Package Contents" te selecteren. In Windows vindt u het op ~ \ AppData \ Local \ slappe \ .

Navigeer vervolgens een paar mappen naar beneden resources / app.asar.unpacked / src / static / . Je zult het willen vinden ssb-interop.js bestand, waar u de code zult bewerken. Zorg ervoor dat Slack is gesloten, open dat bestand in je favoriete teksteditor en scrol naar beneden:

Kopieer en plak de volgende code aan het einde van de ssb-interop.js het dossier:

// Zorg eerst dat de wrapper-app is geladen document.addEventListener ("DOMContentLoaded", function () // Laat zijn webviews dan webviews = document.querySelectorAll (". TeamView webview"); // haal onze CSS parallel aan van tijd const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; laat cssPromise = fetch (cssPath) .then (response => response.text () ); customCustomCSS = ': root / * Wijzig deze om uw themakleuren te wijzigen: * / --primary: # 09F; --text: #CCC; --background: # 080808; --background-elevated: # 222 ; '// Plaats een stijltag in de wrapper-weergave cssPromise.then (css => let s = document.createElement (' style '); s.type =' text / css '; s.innerHTML = css + customCustomCSS ; document.head.appendChild (s);); // Wacht tot elke webview webviews.forEach (webview => webview.addEventListener ('ipc-message', message => if (message.channel ==) laadt 'didFinishLoading') // Voeg ten slotte de CSS toe aan de webview cssPromise.then (css => let script = 'let s = document.createElement (' stijl '); s.type = 'text / css'; s.id = 'slack-custom-css'; s.innerHTML = \ '$ css + customCustomCSS \'; document.head.appendChild (s); 'webview.executeJavaScript (script); )); ); ); 

U wilt dit bestand waarschijnlijk dupliceren en op een andere locatie opslaan, zodat u de code niet elke keer hoeft te bewerken. Op deze manier kunt u het naar de map slepen om de nieuwste versie te overschrijven:

Nadat je klaar bent, open je Slack opnieuw en na een paar seconden moet de donkere modus starten. Het laadscherm is nog steeds wit, maar het hoofdvenster van de app zal veel beter opgaan in de rest van je systeem:

Je eigen thema's toevoegen

Als u er niet van houdt, kunt u de CSS bewerken met elke gewenste stijl. Al deze code doet laden aangepaste stijlen van https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; u kunt dat bestand downloaden, het bewerken met uw wijzigingen en de URL vervangen door uw eigen code. Sla op, start Slack opnieuw en uw wijzigingen zijn zichtbaar. Als u CSS niet kent of als u slechts een kleine wijziging wilt aanbrengen, zijn er vier kleurvariabelen gedefinieerd voordat u de CSS laadt, dus u kunt alleen die met uw eigen kleuren bewerken.