Eu estava ansioso para colocar um tema sombrio na minha versão desktop do Slack, porque Passo muito tempo no escuro e quero trabalhar confortavelmente em um ambiente homogêneo e escuro.
Como o tópico oficial não foi abordado e provavelmente nem está planejado no futuro próximo, tive que usar as conquistas atuais dos entusiastas. Porque Como a versão desktop do Slack está escrita em Electron, você pode controlar os estilos do aplicativo já construído, então comecei a procurar soluções prontas ou dicas deles.
No começo, pensei em colocar a solução sblack personalizada existente, mas acabou sendo apenas para os felizes proprietários do MacOS. Portanto, tive que procurar mais e me deparei com um truque bastante interessante neste
site . A solução acabou sendo quebrada, mas a partir daqui participei da personalização de estilos. E eu peguei a principal solução de trabalho
daqui .
Eu tenho uma pequena solução personalizada, porque texto e imagens pareciam muito nítidos, brilhantes e vyrviglazno contra um fundo escuro. Como resultado, reduzi o brilho do texto, escureci a visualização das imagens e obtive um resultado confortável para trabalhar e visível na foto no início do post.
Aqui está uma breve instrução sobre como fazer isso para diferentes plataformas:
- Feche completamente o aplicativo Slack;
- Para Windows. No final do arquivo ~ \ AppData \ Local \ slack \ app-3.3.8 \ resources \ app.asar.unpacked \ src \ static \ ssb-interop.js, adicione o código:
document.addEventListener('DOMContentLoaded', function() { $.ajax({ url: 'https://raw.githubusercontent.com/laCour/slack-night-mode/master/css/raw/black.css', success: function(css) { let customCustomCSS = ` .c-message__body { /* Modify these to change your theme colors: */ color: #a2a2a2; } .p-file_image_thumbnail__wrapper:after { opacity: 0.4; background-color: black; } .c-message--light .c-message__sender .c-message__sender_link, .p-threads_view__divider_label, .p-message_container_loading__msg, .p-threads_flexpane__header_channel_name, .c-icon--times:before { color: #d5d5d5; } .p-threads_view, .p-threads_view__default_background--first, .p-threads_view__default_background--last, .c-message_kit__thread_message, .p_threads_view_load_older_button, .p-threads_view__divider_label, .p_threads_view_load_older_button:hover{ background-color: #222222; } .p-threads_footer__input--legacy .p-message_input_field, .p-message_container_loading{ background-color: #222222; } .p-threads_view_header__channel_name, .p-threads_view .c-message_kit__thread_message .c-message_kit__labels__label{ color: #d5d5d5; } `; $("<style></style>").appendTo('head').html(css + customCustomCSS); } }); });
Para MacOS e Linux, fazemos o mesmo apenas para arquivos:
- Linux: /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js;
- Para quem instalou via flatpack:
Esta solução foi escrita por miir em # comment_20062516/var/lib/flatpak/app/com.slack.Slack/x86_64/stable/INSTALLATION_ID_STRING/files/extra/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js.
INSTALLATION_ID_STRING é substituído por uma cadeia longa.
Você precisa editar o arquivo com permissões elevadas.
- MacOS: /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js.
Se você deseja alterar qualquer estilo, é necessário abrir a versão Web do Slack, examinar a estrutura do bloco em que você está interessado no DOM, configurar os estilos diretamente nas ferramentas do desenvolvedor e copiar o código resultante na variável customCustomCSS;
- Salve o arquivo e execute o aplicativo. Novos estilos serão aplicados automaticamente.
As configurações serão desativadas na próxima vez que o aplicativo for atualizado.
Portanto, se você gosta do tema, é recomendável salvar uma cópia do arquivo `ssb-interop.js` modificado em qualquer local fora do diretório Slack, para que você não faça o mesmo novamente mais tarde. Na próxima atualização, você precisará substituir este arquivo no diretório pela nova versão novamente.
Espero que minhas instruções ajudem os mesmos amantes de um tema sombrio, como eu.
Todo o desenvolvimento confortável!
UPD - 21/04/2019. Atualizado o código. Um grande erro foi corrigido com a exibição da seção
Todos os Threads e pequenos erros na própria seção. Erros menores foram corrigidos com a exibição de etiquetas de mensagens de serviço, nomes de threads e ícones de fechamento de threads.
Obrigado a
newbie_java e
sw0rl0k por testar e apontar erros.
UPD2 - 23/04/2019. Uma solução foi adicionada às instruções para quem tem o Slack instalado via flatpack. Obrigado
miir pela solução.