Hoe de (niet-officiële) donkere modus voor Slack te installeren

Slack heeft nog steeds geen donkere modus. Ze hebben donkere thema’s, maar hiermee kunt u alleen de zijbalkkleuren aanpassen, waardoor het hoofdvenster wit blijft. 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 zoeken naar de bronbestanden voor Slack. Het is vrij eenvoudig te doen, maar aangezien het elke keer dat u een update uitvoert, wordt overschreven, moet u dit meerdere keren doen.

Een thema downloaden

Omdat Slack op Electron draait, een framework voor het ontwikkelen van desktop Node.js-apps, kun je de stijlen ervoor bewerken alsof 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 thema in de echte donkere modus is het slack-black-thema van Widget. En aangezien Electron code deelt op verschillende platforms, werkt dit thema ook op Windows en Linux. We ontdekten echter dat er enkele problemen waren met het thema op macOS Mojave, dus als het niet werkt, kun je deze vork proberen, die zegt dat het alleen op macOS werkt, maar mogelijk ook voor Windows-gebruikers.

Slack patchen

Dit deel moet je elke keer opnieuw doen als Slack updates uitvoert. Op macOS kun je naar de bronmap van Slack gaan door met de rechtermuisknop op de app zelf te klikken en “Show Package Contents” te selecteren. Op Windows vindt u het op ~AppDataLocalslack .

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

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

// 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);
            })
      });
   });
});

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 gewoon naar de map slepen om de nieuwste versie te overschrijven:

Als je klaar bent, open je Slack opnieuw, en na een paar seconden zou de donkere modus moeten beginnen. Het laadscherm zal nog steeds wit zijn, maar het hoofdvenster van de app zal veel beter opgaan in de rest van je systeem:

Uw eigen thema’s toevoegen

Als je het uiterlijk niet leuk vindt, kun je de CSS bewerken met elke gewenste stijl. Het enige dat deze code doet, is aangepaste stijlen laden vanaf https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; u kunt dat bestand downloaden, het met uw wijzigingen bewerken 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 deze gewoon met uw eigen kleuren bewerken.