O Slack ainda não tem um modo escuro. Eles têm temas escuros, mas só permitem personalizar as cores da barra lateral, deixando a janela principal branca. Com o lançamento dos modos dark de todo o sistema no macOS Mojave e no Windows 10 , o Slack parece muito deslocado.
Este método não é oficial e envolve vasculhar os arquivos fonte do Slack. É bastante fácil de fazer, mas como ele será sobrescrito toda vez que você atualizar, você terá que fazer isso várias vezes.
Índice
Baixando um tema
Como o Slack é executado no Electron, uma estrutura para o desenvolvimento de aplicativos Node.js para desktop, você pode editar os estilos para ele da mesma forma que editaria o CSS de um site. Mas os arquivos CSS do Slack estão enterrados na fonte, então você terá que carregar seus próprios temas.
O tema do modo true dark mais popular é slack-black-theme da Widget. E como o Electron compartilha código entre plataformas, este tema funcionará no Windows e no Linux também. No entanto, descobrimos que havia alguns problemas com o tema no macOS Mojave, então se ele não funcionar, você pode tentar este fork , que diz que funciona apenas no macOS, mas pode funcionar também para usuários do Windows.
Remendando Slack
Esta parte, você terá que fazer novamente sempre que o Slack for atualizado. No macOS, você pode acessar o diretório de origem do Slack clicando com o botão direito do mouse no próprio aplicativo e selecionando “Mostrar conteúdo do pacote”. No Windows, você o encontrará em ~\AppData\Local\slack\
.
Em seguida, navegue em algumas pastas até resources/app.asar.unpacked/src/static/
. Você vai querer encontrar o ssb-interop.js
arquivo, onde editará o código. Certifique-se de que o Slack esteja fechado, abra o arquivo em seu editor de texto favorito e role até o final:
Copie e cole o seguinte código no final do ssb-interop.js
arquivo:
// Primeiro, certifique-se de que o aplicativo wrapper seja um documento carregado . addEventListener ( " DOMContentLoaded " , function () { // Em seguida, obtenha seus webviews let webviews = document . querySelectorAll ( " .TeamView webview " ); // Busque nosso CSS em paralelo com antecedência const cssPath = ' https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css ' ; deixe cssPromise = fetch (cssPath). então ( resposta => resposta . texto ()); let customCustomCSS = ` : root { / * Modifique-os para alterar as cores do tema: * / --primary: # 09F; --text: #CCC; --background: # 080808; --elevado ao fundo: # 222; } ` // Insira uma tag de estilo na visão do wrapper cssPromise . então ( css => { let s = document . createElement ( ' style ' ); s . type = ' text / css ' ; s . innerHTML = css + customCustomCSS; document . head . appendChild (s); }); // Aguarde que cada visualização da web carregue as visualizações da web . forEach ( webview => { webview . addEventListener ( ' ipc-message ' , message => { if ( message . channel == ' didFinishLoading ' ) // Finalmente adicione o CSS ao webview cssPromise . then ( css => { let script = ` let s = document.createElement ('estilo'); s.type = 'text / css'; s.id = 'slack-custom-css'; s.innerHTML = \ ` $ { css + customCustomCSS } \` ; document.head.appendChild (s); ` webview . executeJavaScript (script); }) }); }); });
Provavelmente, você desejará duplicar esse arquivo e salvá-lo em um local diferente, para que não precise editar o código todas as vezes. Dessa forma, você pode simplesmente arrastá-lo para o diretório para substituir a versão mais recente:
Depois de terminar, reabra o Slack e, após alguns segundos, o modo escuro deve entrar em ação. A tela de carregamento ainda estará branca, mas a janela principal do aplicativo se integrará muito melhor ao resto do sistema:
Adicionando seus próprios temas
Se você não gosta da aparência dele, pode editar o CSS com os estilos que desejar. Tudo que esse código faz é carregar estilos personalizados de 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 deseja fazer uma pequena alteração, existem quatro variáveis de cores definidas antes de carregar o CSS, então você pode apenas editá-las com suas próprias cores.