Como instalar o modo escuro (não oficial) para o Slack

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.

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.jsarquivo, 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.jsarquivo:

// 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.