Cette méthode est non officielle et implique de fouiller dans les fichiers source de Slack. C’est assez facile à faire, mais comme il sera écrasé chaque fois que vous mettrez à jour, vous devrez le faire plusieurs fois.
Télécharger un thème
Slack étant basé sur Electron, un framework permettant de développer des applications de bureau Node.js, vous pouvez modifier ses styles comme vous le feriez pour le code CSS d’un site Web. Mais les fichiers CSS de Slack sont enterrés dans le source, vous devez donc charger vos propres thèmes.
Le thème le plus populaire du vrai mode sombre est slack-black-theme by Widget. Et comme Electron partage du code sur toutes les plateformes, ce thème fonctionnera également sous Windows et Linux. Nous avons constaté quelques problèmes avec le thème sur macOS Mojave. Par conséquent, si cela ne fonctionne pas, vous pouvez essayer ce fork, qui indique que cela fonctionne uniquement sur macOS, mais peut également fonctionner pour les utilisateurs de Windows.
Patching Slack
~AppDataLocalslack
Ensuite, parcourez quelques dossiers jusqu’à
resources/app.asar.unpacked/src/static/
. Vous allez vouloir trouver le
ssb-interop.js
fichier, où vous allez éditer le code. Assurez-vous que Slack est fermé, ouvrez ce fichier dans votre éditeur de texte préféré et faites défiler vers le bas:
ssb-interop.js
fichier:
// 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); }) }); }); });
Vous voudrez probablement dupliquer ce fichier et le sauvegarder dans un emplacement différent, afin de ne pas avoir à modifier le code à chaque fois. De cette façon, vous pouvez simplement le faire glisser dans le répertoire pour écraser la version la plus récente:
Ajouter vos propres thèmes
Si vous n’aimez pas son apparence, vous pouvez éditer le CSS avec n’importe quel style. Tout ce code ne charge que des styles personnalisés à partir de https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; vous pouvez télécharger ce fichier, le modifier avec vos modifications et remplacer l'URL par votre propre code. Enregistrez, relancez Slack et vos modifications seront visibles. Si vous ne connaissez pas le code CSS ou souhaitez simplement apporter une modification mineure, quatre variables de couleur sont définies avant le chargement du fichier CSS. Vous pouvez donc les modifier avec vos propres couleurs.
