Как установить (неофициальный) темный режим для Slack

У слабины до сих пор нет темного режима. У них темные темы, но они позволяют настроить цвета боковой панели, оставляя главное окно белым. С выпуском общесистемных темных режимов на MacOS Mojave и Windows 10 Slack чувствует себя очень неуместно.

Этот метод неофициальный и включает в себя поиск исходных файлов для Slack. Это довольно легко сделать, но так как он будет перезаписываться при каждом обновлении, вам придется делать это несколько раз.

Загрузка темы

Поскольку Slack работает на Electron, фреймворке для разработки настольных приложений Node.js, вы можете редактировать стили для него так же, как вы редактировали бы CSS веб-сайта. Но CSS-файлы для Slack скрыты в исходном коде, поэтому вам придется загружать свои собственные темы..

Самая популярная тема в тёмном режиме - slack-black-theme от Widget. И поскольку Electron обменивается кодом между платформами, эта тема будет работать и в Windows, и в Linux. Мы обнаружили, что были некоторые проблемы с темой на MacOS Mojave, поэтому, если она не работает, вы можете попробовать этот форк, который говорит, что он работает только на MacOS, но может работать и для пользователей Windows..

Исправление слабины

Эту часть вам придется повторять каждый раз, когда обновляется Slack. В macOS вы можете получить доступ к исходному каталогу Slack, щелкнув правой кнопкой мыши само приложение и выбрав «Показать содержимое пакета». В Windows вы найдете его в ~ \ AppData \ Local \ слабину \ .

Затем перейдите несколько папок вниз ресурсы / app.asar.unpacked / SRC / статический / . Вы захотите найти SSB-interop.js файл, где вы будете редактировать код. Убедитесь, что Slack закрыт, откройте этот файл в вашем любимом текстовом редакторе и прокрутите вниз:

Скопируйте и вставьте следующий код в самый конец SSB-interop.js файл:

// Сначала убедитесь, что приложение-оболочка загружено document.addEventListener ("DOMContentLoaded", function () // Затем получаем его веб-просмотры let webviews = document.querySelectorAll (". TeamView webview"); // Вперед получаем наш CSS параллельно) времени const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css'; пусть cssPromise = fetch (cssPath) .then (response => response.text () ); let customCustomCSS = ': root / * Измените их, чтобы изменить цвета вашей темы: * / --primary: # 09F; --text: #CCC; --background: # 080808; --background-elevated: # 222 ; '// Вставить тег стиля в представление оболочки cssPromise.then (css => let s = document.createElement (' style '); s.type =' text / css '; s.innerHTML = css + customCustomCSS ; document.head.appendChild (s);); // Ожидание загрузки каждого веб-просмотра webviews.forEach (webview => webview.addEventListener ('ipc-message', message => if (message.channel ==) 'didFinishLoading') // Наконец добавьте CSS в веб-представление 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 (ы); 'webview.executeJavaScript (script); )); ); ); 

Возможно, вы захотите продублировать этот файл и сохранить его в другом месте, чтобы вам не приходилось каждый раз редактировать код. Таким образом, вы можете просто перетащить его в каталог, чтобы перезаписать последнюю версию:

После того, как вы закончите, снова откройте Slack, и через несколько секунд должен сработать темный режим. Экран загрузки будет по-прежнему белым, но главное окно приложения будет намного лучше сочетаться с остальной частью вашей системы:

Добавление собственных тем

Если вам не нравится его внешний вид, вы можете редактировать CSS с любыми стилями, которые вы хотите. Все, что делает этот код, это загружает пользовательские стили из https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css; Вы можете скачать этот файл, отредактировать его со своими изменениями и заменить URL своим собственным кодом. Сохраните, перезапустите Slack, и ваши изменения будут видны. Если вы не знаете CSS или просто хотите внести незначительные изменения, перед загрузкой CSS определены четыре цветовые переменные, поэтому вы можете просто отредактировать их своими цветами.