Как включить тёмную тему в Slack — неофициальный метод

Быстрые ссылки

• Скачивание темы
• Патчинг Slack
• Добавление собственных тем

Slack всё ещё не имеет полноценного системного тёмного режима. Есть тёмные темы, которые влияют только на боковую панель, но основное окно остаётся светлым. На macOS и Windows с системным тёмным режимом это выглядит неуместно.

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

Скачивание темы

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

Самая популярная полностью тёмная тема — slack-black-theme от Widget. Так как Electron кроссплатформенный, тема работает на Windows и Linux. Для macOS есть форк с поддержкой Mojave, который стоит попробовать, если основной пакет даёт визуальные артефакты.

Патчинг Slack

Эту часть придётся повторять после каждого обновления Slack. На macOS можно попасть в каталог приложения, щёлкнув правой кнопкой по самому приложению и выбрав “Показать содержимое пакета”. На Windows клиент обычно находится в папке:

~\AppData\Local\slack\

Далее перейдите в папку

resources/app.asar.unpacked/src/static/

и найдите файл

ssb-interop.js

— именно в нём мы будем вносить изменения. Закройте Slack, откройте ssb-interop.js в текстовом редакторе и прокрутите в самый низ:

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

// 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); }) }); }); }); ``` После правки рекомендуется сохранить копию ssb-interop.js в отдельной папке. Тогда при следующем обновлении Slack вы сможете просто перетащить резервную копию в каталог приложения и не писать код заново: Запустите Slack снова. Через несколько секунд тёмная тема должна примениться. Экран загрузки останется светлым, но главное окно будет выглядеть в тон с системой: ## Добавление собственных тем Если базовая тема не устраивает, вы можете редактировать CSS. Код загружает стили по URL https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css — скачайте этот файл, внесите правки и замените URL в ssb-interop.js на путь к вашему файлу. Сохраните изменения и перезапустите Slack — новые стили применятся. Если вы не уверены в CSS, достаточно изменить четыре CSS-переменные в вставленном фрагменте, чтобы быстро поменять основные цвета: –primary, –text, –background, –background-elevated. ## Когда это не сработает - Slack изменит внутреннюю структуру папок или переименует файлы. - Вы используете версию из Microsoft Store или Mac App Store с ограничениями упаковки. - IT-политики вашей организации запрещают правку клиентских файлов. - Изменения в Electron или механизме webview сделают этот подход неприменимым. ## Альтернативные подходы - Подождать официального выпуска тёмного режима от Slack. - Использовать системные фильтры или режимы инвертирования цвета в ОС. - Искать специализированные утилиты для управления оформлением приложений на уровне системы. ## Чеклист по платформам macOS: - Закройте Slack. - Правой кнопкой по приложению → “Показать содержимое пакета”. - Перейдите в resources/app.asar.unpacked/src/static/. - Отредактируйте ssb-interop.js и вставьте код. - Сохраните резервную копию и перезапустите Slack. Windows: - Закройте Slack. - Откройте %LOCALAPPDATA%\slack\ или путь ~\AppData\Local\slack. - Перейдите в resources/app.asar.unpacked/src/static/ и отредактируйте ssb-interop.js. - Сохраните резервную копию и перезапустите Slack. Linux: - Путь установки зависит от дистрибутива; найдите директорию, где установлен Slack, и аналогично отредактируйте resources/app.asar.unpacked/src/static/ssb-interop.js. ## Безопасность и риски Любая правка исполняемых файлов повышает риск стабильности и безопасности системы. Храните резервные копии оригинальных файлов и избегайте вставки скриптов из ненадёжных источников. В корпоративной среде перед внесением изменений согласуйте действия с администраторами. ## Критерии приёмки - Основное окно Slack отображается в тёмной теме. - Текст читаем, контраст достаточный для удобной работы. - После перезапуска тема восстанавливается без ручного повторного редактирования файла (если вы используете резервную копию для перезаписи). ## Глоссарий - Electron — фреймворк для создания десктопных приложений на базе Node.js и Chromium. - CSS — язык стилей для оформления интерфейсов. - webview — встроенный веб-контейнер, который рендерит содержимое Slack внутри приложения. - asar — формат упаковки ресурсов Electron-приложений. Краткое резюме: способ даёт рабочую тёмную тему там, где её нет официально. Он гибок и позволяет кастомизировать внешний вид, но требует аккуратности и повторного применения после обновлений.