Esse método não é oficial e envolve escavar os arquivos de origem do Slack. É bastante fácil de fazer, mas como ele será substituído toda vez que você atualizar, você terá que fazer isso várias vezes.
Download de um tema
Como o Slack é executado no Electron, uma estrutura para o desenvolvimento de aplicativos Node.js de área de trabalho, você pode editar os estilos para ele, como editar o CSS de um website. Mas os arquivos CSS do Slack estão enterrados na origem, então você terá que carregar seus próprios temas.
O tema mais popular no modo escuro é o tema preto-escuro por Widget. E como o Electron compartilha códigos entre plataformas, esse tema também funcionará no Windows e no Linux. No entanto, descobrimos que havia alguns problemas com o tema no macOS Mojave, então, se ele não funcionar, você pode experimentar esse fork, que diz que ele funciona apenas no macOS, mas também pode funcionar para os usuários do Windows.
Folga de remendo
~AppDataLocalslack
Em seguida, navegue por algumas pastas até
resources/app.asar.unpacked/src/static/
. Você vai querer encontrar o
ssb-interop.js
arquivo, onde você editará o código. Verifique se o Slack está fechado, abra o arquivo no seu editor de texto favorito e vá até o final:
ssb-interop.js
Arquivo:
// 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); }) }); }); });
Você provavelmente desejará duplicar esse arquivo e salvá-lo em um local diferente, para que você não precise editar o código todas as vezes. Dessa forma, você pode simplesmente arrastá-lo para o diretório para sobrescrever a versão mais recente:
Adicionando seus próprios temas
Se você não gosta da aparência, pode editar o CSS com todos os estilos desejados. Tudo o que esse código faz é carregar estilos personalizados em https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; você pode baixar esse arquivo, editá-lo com suas alterações e substituir o URL por seu próprio código. Salve, reinicie o Slack e suas alterações ficarão visíveis. Se você não conhece CSS, ou apenas quer fazer uma pequena alteração, existem quatro variáveis de cor definidas antes de carregar o CSS, para que você possa editá-las com suas próprias cores.
