Загорелся желанием поставить себе на десктопную версию Slack тёмную тему, т.к. много времени провожу в нём в тёмное время суток и хочется комфортно работать в однородной тёмной среде.
Так как официальную тему не завезли и вероятно в ближайшее время даже не планируется, то пришлось использовать текущие наработки энтузиастов. Т.к. десктопная версия Slack написана на Electron, то можно управлять стилями уже собранного приложения, поэтому я начал копать в сторону готовых решений или намёков на них.
Сначала думал поставить существующее кастомное решение sblack, но оно оказалось только для счастливых обладателей MacOS. Поэтому пришлось искать дальше и наткнулся на довольно интересный хак на этом сайте. Решение оказалось поломанным, но отсюда я взял часть по кастомизации стилей. А основное рабочее решение я взял отсюда.
Готовое решение я немного кастомизнул, т.к. текст и картинки смотрелись слишком резко, ярко и вырвиглазно на тёмном фоне. В итоге я поубавил яркость текста, затемнил превью изображений и получил результат, с которым комфортно работать и который виден на картинке в начале поста.
Вот короткая инструкция как это сделать для разных платформ:
- Полностью закрываем приложение Slack;
- Для Windows. В конец файла ~\AppData\Local\slack\app-3.3.8\resources\app.asar.unpacked\src\static\ssb-interop.js добавить код:
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); } }); });
Для MacOS и Linux делаем то же самое, только для файлов:
- Linux: /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js;
- Для тех у кого установлено через flatpack:
Данное решение написал miir в #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 — длинная строка.
Редактировать файл нужно с повышенными правами. - MacOS: /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js.
При желании изменить какие-либо стили, нужно открыть Web-версию Slack, посмотреть структуру интересующего вас блока в DOM, настроить стили прямо в средствах разработчика и скопировать полученный код в переменную customCustomCSS;
- Сохраняем файл и запускаем приложение. Новые стили применятся автоматически.
Настройки слетят при следующем обновлении приложения.
Поэтому если тема понравится, то желательно сохранить копию изменённого файла `ssb-interop.js` в любое место вне директории Slack, чтобы потом не делать то же самое снова. При следующем обновлении нужно будет снова заменить этот файл в директории с новой версией.
Надеюсь моя инструкция поможет таким же любителям тёмной темы, как и я.
Всем комфортной разработки!
UPD — 21.04.2019. Обновил код. Был исправлен крупный баг с отображением раздела All Threads и мелкие баги в самом разделе. Были исправлены мелкие баги с отображением надписей сервисных сообщений, названий тредов и иконки закрытия треда.
Спасибо newbie_java и sw0rl0k за тестирование и указание на баги.
UPD2 — 23.04.2019. В инструкцию добавлено решение для тех, у кого Slack установлен через flatpack. Спасибо miir за решение.
Комментарии (46)
mrTyler
19.04.2019 16:22Интересно, насколько такой хак легален с точки зрения безопасности компании? Одобрит ли команда internals красивую черную тему, которая тянет что-то из gist?
zaytal Автор
19.04.2019 16:56Не задумывался об этом.
С учётом того, что этот хак в разработке уже пару лет и прецедентов со стороны компании не было, я думаю, что на своей версии приложения можно такое использовать. Конечно на свой страх и риск.
alexvoz
20.04.2019 13:36А CSS можно скачать и рядом положить исправив путь на локальный?
zaytal Автор
21.04.2019 16:07Конечно можно, либо вытяните curl'ом, либо просто в браузере перейдите по предложенному пути и сохраните в отдельный файл на компьютере.
Но его скорее всего нужно будет положить где-то снаружи директории с приложением, т.к. на каких-то системах меняется директория слака (из-за версии), а где-то директория неизменна.
popopa
19.04.2019 16:53В линукс минт 19 нет /usr/lib/slack/
Также найти файл ssb-interop.js тоже не удалосьzaytal Автор
19.04.2019 16:54Нашёл какую-то зацепку на github для mint 19.
Попробуйте посмотреть по пути /usr/share/applications/slack.desktop.popopa
19.04.2019 16:58Не поверите, но тоже нет указанного вами пути ?\_(?)_/?
zaytal Автор
19.04.2019 17:05Печалька. У электрона в основном архитектура кроссплатформенная, а значит этот файл должен быть где-то.
Я с mint дела не имел, не знаю где может быть расположено приложение.
Но если вы найдёте, я дополню пост :)
panter_dsd
19.04.2019 19:03Попробуй в /opt поискать. В gentoo оно там лежит.
popopa
19.04.2019 20:11Тоже нет :)
panter_dsd
19.04.2019 20:15Попробуй сделать
и посмотреть куда оно покажет.ls -lhFAX /usr/bin/slackpopopa
19.04.2019 20:16No such file or directory
Да и дело в том, что у меня установлено через flatpack
EndUser
19.04.2019 16:59Ого! А можно для Skype for Desktop аналогично?
Не получается найти аналогичные файлы.
А шрифт там вырвиглазный.
Спасибо!zaytal Автор
21.04.2019 18:39Для десктопной версии Skype такое вряд ли удастся сделать. По крайней мере я по этому поводу ничего не нашёл. Придётся довольствоваться тем, что есть.
А шрифт там вырвиглазный
— возможно у вас в настройках стоит использование контрастной темы. Там действительно интерфейс сильно бьёт по глазам.
zaytal Автор
19.04.2019 17:01Есть проблемы с отображением тёмной темы в разделе All Threads. Я думаю, что там не хватает просто тёмного бэка. На выходных разберусь и обновлю код в посте.
В остальном пользуюсь уже 2 дня. Больше проблем особых не заметил, глаз радуется.
Если обнаружите серьёзные баги, пишите в ответ, постараюсь разобраться.newbie_java
19.04.2019 17:14Название треда на правой панели так же показывается чёрным на тёмно-сером. Как и крестик закрытия данной панели.
zaytal Автор
19.04.2019 17:15Спасибо. Тоже это заметил, но пока отметил как незначительный баг. Будет время, поправлю.
zaytal Автор
21.04.2019 18:18Благодарю за тестирование.
Крупный баг по All Threads и прочие мелкие баги поправлены. Изменения уже отражены в посте.
sw0rl0k
19.04.2019 20:27Еще к багам
1. Затеняет картинки в чате. При этом, если нажать на картинку, чтоб она открылась, то все норм.Прочитал, не баг, а фича)
2. На странице настроек та же проблема с фоном что и в разделе со всеми тредами.zaytal Автор
21.04.2019 18:17Благодарю за тестирование.
Проблему с фоном в настройках не исправлял, т.к. раздел не популярный, баг не сказывается на рабочей среде и на него надо выделить много времени. Если кто-то пожелает ему приделать тёмную тему, то можете присылать код стилей и я их отражу в посте.
Крупный баг по All Threads и прочие мелкие баги поправлены. Изменения уже отражены в посте.
newbie_java
19.04.2019 18:31Да простит меня автор, но нашлась популярная solarized тема в сети(с теми же «багами»):
document.addEventListener('DOMContentLoaded', function() { $.ajax({ url: 'https://cdn.jsdelivr.net/gh/chattahippie/slack-night-mode@fcafbca8be2a720410c6b3988f280fa09ef8fca0/css/raw/variants/solarized-dark.css', success: function(css) { $("<style></style>").appendTo('head').html(css); } }); });zaytal Автор
19.04.2019 18:43Круто же!
Раз там те же баги, то я пока что свою доработаю до вменяемого состояния.
Можете картинку прикрепить как там выглядят чаты с картинками? Может почерпну что-то.
streetturtle
20.04.2019 03:01+1Альтернативным решением может быть использование агрегатора мессенджеров, например Rambox, одной из фич которого является вставка кастомного JS снипета (или даже CSS в pro версии). Это позволит использовать темную тему (используя кастомный CSS) для любого мессенджера: Slack, VK, Telegram, Skype и даже Outlook! Это работает как Stylus расширение для браузера. Темы можно брать отсюда: userstyles.org. А подгружать CSS из JS таким способом.
lebtim
20.04.2019 06:14На скриншоте вы спрашиваете об алгоритмах YouTube, которые «позволяют даже на галимом интернете получать картинку в HD или даже Full HD». Вы нашли какую-то информацию насчет этого? Было бы очень интересно узнать, как YouTube делает это. Спасибо
zaytal Автор
20.04.2019 06:18В комментариях я написал (не видно), что это скорее не вопрос, а восхищение оптимизацией.
Скорее всего ютуб использует свои кодеки, которые он облегчил по максимуму, чтобы работать всего с одним расширением файлов. Ну и посылает данные меньшими пакетами, чтобы не приходилось долго ждать следующий пакет с данными.
Но это просто догадки. Можете поискать в интернете, наверняка кто-то уже занимался оптимизацией проигрывания/декодирования видео для своих плееров.
KpoKec
20.04.2019 19:07А где про это можно почитать? А то по логике делать пакеты сильно меньше MTU — крайне нелогично. А с учетом, что модемов уже нет — то и MTU везде 1400-1500 (хотя я не в курсе про 3G/4G).
immaculate
20.04.2019 10:11+1Есть native клиент для Slack — не на Electron — Ripcord. Требует в 10 раз меньше ОЗУ (или еще меньше, грубо замерял на своем ноутбуке), почти не создает нагрузку на GPU и CPU (Slack непрерывно загружает CPU хотя бы на 2%), темная тема в комплекте.
Правда пока еще не привык им пользоваться, недавно установил. UI конечно не такой красочный, но вполне достойный.
zaytal Автор
21.04.2019 17:43Здорово. Не знал, что есть такой клиент.
Дизайн от слова «ничего лишнего». Это конечно удобно с практической точки зрения, но выглядит «тяжеловато» на мой взгляд.
Стандартный UI Slack выглядит менее загружено и проще для восприятия. Хотя зазря пропадает часть полезной зоны. Наверное я всё же предпочту красоту практичности, хотя бы потому, что оно постоянно подсознательно напоминает как должен выглядеть userfriendly интерфейс.
kalnyanton
21.04.2019 16:01+1Отлично, спасибо! Я себе ещё такие добавил стили:
zaytal Автор
21.04.2019 16:02Не добавился код стилей в вашем комментарии. Можете отправить снова?
kalnyanton
22.04.2019 12:16Точно, прошу прощения:
.c-member_slug { background: #222!important; color: #fff!important; }
Тогда ники пользователей при обращении у меня более гармонично вписались.
popopa
22.04.2019 13:28Добрый день. Возможно, кто-то подскажет как сделать, если установлено слак через flatpack?
miir
23.04.2019 00:35У меня файл нашёлся по следующему пути:
/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 — длинная строка.
Редактировать файл нужно с повышенными правами.
basilbasilbasil
стало гораздо лучше
zaytal Автор
Спасибо. На выходных уберу баги, которые обнаружил и будет ещё лучше.