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

В 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 \ slack \ .

Затем перейдите к нескольким папкам до resources/app.asar.unpacked/src/static/. Вы захотите найти файл 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';
let cssPromise = fetch (cssPath) .then (response => response.text ());
let customCustomCSS = `
: root {/* Измените их, чтобы изменить цвета вашей темы: */- основной: # 09F;
- текст: #CCC;
- background: # 080808;
- задний фон: # 222;
}
`
// Вставляем тег стиля в представление оболочки
cssPromise.then (css => {
let s = document.createElement ('style');
s.type = 'text/css';
s.innerHTML = css + customCustomCSS;
document.head.appendChild (ы);
});
// Ожидание загрузки каждого веб-просмотра
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 (сценарий);
})
});
});
});

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

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

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

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

Оцените статью
TutoryBird.Ru
Добавить комментарий