Questo metodo non è ufficiale e prevede di scavare nei file sorgente per Slack. È abbastanza facile da eseguire, ma poiché verrà sovrascritto ogni volta che si aggiorna, sarà necessario farlo più volte.
Download di un tema
Poiché Slack gira su Electron, un framework per lo sviluppo di app desktop Node.js, puoi modificarne gli stili come se dovessi modificare il CSS di un sito web. Ma i file CSS per Slack sono nascosti nella fonte, quindi dovrai caricare i tuoi temi.
Il più popolare vero tema della modalità oscura è slack-black-theme di Widget. E poiché Electron condivide il codice su tutte le piattaforme, questo tema funzionerà anche su Windows e Linux. Abbiamo trovato 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
~AppDataLocalslack
Quindi, naviga su alcune cartelle fino a
resources/app.asar.unpacked/src/static/
. Stai per voler trovare il
ssb-interop.js
file, dove modificerai il codice. Assicurati che Slack sia chiuso, apri quel file nel tuo editor di testo preferito e scorri fino in fondo:
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 dovrai modificare il codice ogni volta. In questo modo, puoi semplicemente trascinarlo nella directory per sovrascrivere la versione più recente:
Aggiungere i tuoi temi
Se non ti piace il suo aspetto, puoi modificare il CSS con tutti gli stili che desideri. Tutto questo codice fa caricare gli 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 tue modifiche saranno visibili. Se non conosci il CSS, o vuoi solo fare una piccola modifica, ci sono quattro variabili di colore definite prima di caricare il CSS, quindi puoi semplicemente modificarle con i tuoi stessi colori.
