Come installare la modalità oscura (non ufficiale) per Slack

Slack non ha ancora una modalità oscura. Hanno temi scuri, ma quelli ti permettono solo di personalizzare i colori della barra laterale, lasciando la finestra principale bianca. Con il rilascio di modalità scure a livello di sistema su macOS Mojave e Windows 10, Slack sembra molto fuori posto.

Questo metodo non è ufficiale e prevede di scavare nei file sorgente per Slack. È abbastanza facile da fare, ma poiché verrà sovrascritto ogni volta che esegui l'aggiornamento, dovrai farlo più volte.

Download di un tema

Poiché Slack funziona su Electron, un framework per lo sviluppo di app desktop Node.js, puoi modificarne gli stili come se stessi modificando il CSS di un sito Web. Ma i file CSS per Slack sono sepolti nella fonte, quindi dovrai caricare i tuoi temi.

Il tema più popolare della vera modalità oscura è il tema black-black di Widget. E poiché Electron condivide il codice su più piattaforme, questo tema funzionerà anche su Windows e Linux. Abbiamo riscontrato che c'erano alcuni problemi con il tema su macOS Mojave, quindi se non funziona puoi provare questo fork, che dice che funziona solo su macOS ma potrebbe funzionare anche per gli utenti Windows.

Patching Slack

Questa parte, dovrai rifare ogni volta che Slack si aggiorna. Su macOS, puoi accedere alla directory dei sorgenti di Slack facendo clic con il pulsante destro del mouse sull'app stessa e selezionando “Mostra contenuto pacchetto”. Su Windows, lo troverai su ~AppDataLocalslack .

Quindi, scorrere alcune cartelle fino a resources/app.asar.unpacked/src/static/ . Hai intenzione di trovare il ssb-interop.js file, in cui modificherai il codice. Assicurati che Slack sia chiuso, apri quel file nel tuo editor di testo preferito e scorri verso il basso:

Copia e incolla il seguente codice alla fine del file ssb-interop.js file:

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

Probabilmente vorrai duplicare questo file e salvarlo in una posizione diversa, quindi non devi modificare il codice ogni volta. In questo modo, puoi semplicemente trascinarlo nella directory per sovrascrivere la versione più recente:

Al termine, riapri Slack e dopo alcuni secondi dovrebbe attivarsi la modalità oscura. La schermata di caricamento sarà ancora bianca, ma la finestra dell'app principale si fonderà molto meglio con il resto del sistema:

Aggiunta di temi personalizzati

Se non ti piace l'aspetto, puoi modificare il CSS con gli stili che desideri. Tutto questo codice fa è caricare stili personalizzati da https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; puoi scaricare quel file, modificarlo con le tue modifiche e sostituire l'URL con il tuo codice. Salva, riavvia Slack e le modifiche saranno visibili. Se non conosci i CSS o desideri semplicemente apportare una piccola modifica, ci sono quattro variabili di colore definite prima di caricare i CSS, quindi puoi semplicemente modificarle con i tuoi colori.