Slack — неофициальная тёмная тема для десктопной версии Windows, Linux, MacOS

Dark Theme Slack

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

Сначала думал поставить существующее кастомное решение sblack, но оно оказалось только для счастливых обладателей MacOS. Поэтому пришлось искать дальше и наткнулся на довольно интересный хак на этом сайте. Решение оказалось поломанным, но отсюда я взял часть по кастомизации стилей. А основное рабочее решение я взял отсюда.

Готовое решение я немного кастомизнул, т.к. текст и картинки смотрелись слишком резко, ярко и вырвиглазно на тёмном фоне. В итоге я поубавил яркость текста, затемнил превью изображений и получил результат, с которым комфортно работать и который виден на картинке в начале поста.

Вот короткая инструкция как это сделать для разных платформ:

  1. Полностью закрываем приложение Slack;
  2. Для 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;
  3. Сохраняем файл и запускаем приложение. Новые стили применятся автоматически.

Настройки слетят при следующем обновлении приложения.

Поэтому если тема понравится, то желательно сохранить копию изменённого файла `ssb-interop.js` в любое место вне директории Slack, чтобы потом не делать то же самое снова. При следующем обновлении нужно будет снова заменить этот файл в директории с новой версией.

Надеюсь моя инструкция поможет таким же любителям тёмной темы, как и я.

Всем комфортной разработки!

UPD — 21.04.2019. Обновил код. Был исправлен крупный баг с отображением раздела All Threads и мелкие баги в самом разделе. Были исправлены мелкие баги с отображением надписей сервисных сообщений, названий тредов и иконки закрытия треда.
Спасибо newbie_java и sw0rl0k за тестирование и указание на баги.
UPD2 — 23.04.2019. В инструкцию добавлено решение для тех, у кого Slack установлен через flatpack. Спасибо miir за решение.
Поделиться публикацией

Комментарии 51

    +2
    стало гораздо лучше
      0
      Спасибо. На выходных уберу баги, которые обнаружил и будет ещё лучше.
        0
        Может лучше стоит поддержать пулл реквест с исправлениями?
        github.com/laCour/slack-night-mode/pull/219
          0
          Прошу простить, но я не хочу тратить на это больше времени. Потому что если серьёзно подойти к вопросу, то нужно всё сделать грамотно и без костылей (решение представляет из себя и так один большой костыль).
          Если у вас есть желание, то вы можете использовать мои наработки и сами предложить исправления автору.
          Я сделал быстрое, рабочее и удобное решение для себя и просто поделился с другими.
      +2
      Интересно, насколько такой хак легален с точки зрения безопасности компании? Одобрит ли команда internals красивую черную тему, которая тянет что-то из gist?
        0
        Не задумывался об этом.
        С учётом того, что этот хак в разработке уже пару лет и прецедентов со стороны компании не было, я думаю, что на своей версии приложения можно такое использовать. Конечно на свой страх и риск.
          +1
          А CSS можно скачать и рядом положить исправив путь на локальный?
            0
            Конечно можно, либо вытяните curl'ом, либо просто в браузере перейдите по предложенному пути и сохраните в отдельный файл на компьютере.
            Но его скорее всего нужно будет положить где-то снаружи директории с приложением, т.к. на каких-то системах меняется директория слака (из-за версии), а где-то директория неизменна.
        0
        В линукс минт 19 нет /usr/lib/slack/
        Также найти файл ssb-interop.js тоже не удалось
          0
          Нашёл какую-то зацепку на github для mint 19.
          Попробуйте посмотреть по пути /usr/share/applications/slack.desktop.
            0
            Не поверите, но тоже нет указанного вами пути ¯\_(ツ)_/¯
              0
              Печалька. У электрона в основном архитектура кроссплатформенная, а значит этот файл должен быть где-то.
              Я с mint дела не имел, не знаю где может быть расположено приложение.
              Но если вы найдёте, я дополню пост :)
                0
                $ sudo find / | grep interop
                тоже без результатов?
                0
                небось через flatpack установлен
                  0
                  Да именно так.
              0
              Попробуй в /opt поискать. В gentoo оно там лежит.
                0
                Тоже нет :)
                  0
                  Попробуй сделать
                  ls -lhFAX /usr/bin/slack
                  и посмотреть куда оно покажет.
                    0
                    No such file or directory
                    Да и дело в том, что у меня установлено через flatpack
            0
            Ого! А можно для Skype for Desktop аналогично?
            Не получается найти аналогичные файлы.
            А шрифт там вырвиглазный.
            Спасибо!
              0
              Постараюсь поискать. Но уже на выходных.
                0
                Для десктопной версии Skype такое вряд ли удастся сделать. По крайней мере я по этому поводу ничего не нашёл. Придётся довольствоваться тем, что есть.
                А шрифт там вырвиглазный
                — возможно у вас в настройках стоит использование контрастной темы. Там действительно интерфейс сильно бьёт по глазам.
                0
                Есть проблемы с отображением тёмной темы в разделе All Threads. Я думаю, что там не хватает просто тёмного бэка. На выходных разберусь и обновлю код в посте.
                В остальном пользуюсь уже 2 дня. Больше проблем особых не заметил, глаз радуется.
                Если обнаружите серьёзные баги, пишите в ответ, постараюсь разобраться.
                  0
                  Название треда на правой панели так же показывается чёрным на тёмно-сером. Как и крестик закрытия данной панели.
                    0
                    Спасибо. Тоже это заметил, но пока отметил как незначительный баг. Будет время, поправлю.
                      0
                      Благодарю за тестирование.
                      Крупный баг по All Threads и прочие мелкие баги поправлены. Изменения уже отражены в посте.
                      +1
                      Еще к багам
                      1. Затеняет картинки в чате. При этом, если нажать на картинку, чтоб она открылась, то все норм. Прочитал, не баг, а фича)
                      2. На странице настроек та же проблема с фоном что и в разделе со всеми тредами.
                        0
                        Благодарю за тестирование.
                        Проблему с фоном в настройках не исправлял, т.к. раздел не популярный, баг не сказывается на рабочей среде и на него надо выделить много времени. Если кто-то пожелает ему приделать тёмную тему, то можете присылать код стилей и я их отражу в посте.
                        Крупный баг по All Threads и прочие мелкие баги поправлены. Изменения уже отражены в посте.
                        0
                        (del)
                          0
                          Левая панель не меняется этим решением.
                          Я просто выбрал тёмный цвет левой панели в настройках приложения (цвет левой панели можно менять).
                            0
                            Да, спасибо, уже понял свою ошибку.
                        +1
                        круто, нравится!
                          0
                          Спасибо. Рад, что был полезен.
                          0
                          Да простит меня автор, но нашлась популярная 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);
                             }
                           });
                          });
                            0
                            Круто же!
                            Раз там те же баги, то я пока что свою доработаю до вменяемого состояния.
                            Можете картинку прикрепить как там выглядят чаты с картинками? Может почерпну что-то.
                            +1

                            Альтернативным решением может быть использование агрегатора мессенджеров, например Rambox, одной из фич которого является вставка кастомного JS снипета (или даже CSS в pro версии). Это позволит использовать темную тему (используя кастомный CSS) для любого мессенджера: Slack, VK, Telegram, Skype и даже Outlook! Это работает как Stylus расширение для браузера. Темы можно брать отсюда: userstyles.org. А подгружать CSS из JS таким способом.

                              0
                              На скриншоте вы спрашиваете об алгоритмах YouTube, которые «позволяют даже на галимом интернете получать картинку в HD или даже Full HD». Вы нашли какую-то информацию насчет этого? Было бы очень интересно узнать, как YouTube делает это. Спасибо
                                0
                                В комментариях я написал (не видно), что это скорее не вопрос, а восхищение оптимизацией.
                                Скорее всего ютуб использует свои кодеки, которые он облегчил по максимуму, чтобы работать всего с одним расширением файлов. Ну и посылает данные меньшими пакетами, чтобы не приходилось долго ждать следующий пакет с данными.
                                Но это просто догадки. Можете поискать в интернете, наверняка кто-то уже занимался оптимизацией проигрывания/декодирования видео для своих плееров.
                                  0
                                  Благодарю
                                    0

                                    А где про это можно почитать? А то по логике делать пакеты сильно меньше MTU — крайне нелогично. А с учетом, что модемов уже нет — то и MTU везде 1400-1500 (хотя я не в курсе про 3G/4G).

                                  +2

                                  Есть native клиент для Slack — не на Electron — Ripcord. Требует в 10 раз меньше ОЗУ (или еще меньше, грубо замерял на своем ноутбуке), почти не создает нагрузку на GPU и CPU (Slack непрерывно загружает CPU хотя бы на 2%), темная тема в комплекте.


                                  Правда пока еще не привык им пользоваться, недавно установил. UI конечно не такой красочный, но вполне достойный.

                                    0
                                    Здорово. Не знал, что есть такой клиент.
                                    Дизайн от слова «ничего лишнего». Это конечно удобно с практической точки зрения, но выглядит «тяжеловато» на мой взгляд.
                                    Стандартный UI Slack выглядит менее загружено и проще для восприятия. Хотя зазря пропадает часть полезной зоны. Наверное я всё же предпочту красоту практичности, хотя бы потому, что оно постоянно подсознательно напоминает как должен выглядеть userfriendly интерфейс.
                                      0
                                      Ещё есть плагин для Pidgin. Возможности ещё более аскетичные: тупо однопоточный чатик, без всяких там цитат и тем более тредов (ибо упирается в возможности libpurple). Но по крайней мере, во входящих сообщениях их показывает.
                                    +1
                                    Отлично, спасибо! Я себе ещё такие добавил стили:
                                      0
                                      Не добавился код стилей в вашем комментарии. Можете отправить снова?
                                        0
                                        Точно, прошу прощения:

                                        .c-member_slug {
                                          background: #222!important;
                                          color: #fff!important;
                                        }


                                        Тогда ники пользователей при обращении у меня более гармонично вписались.
                                      0
                                      Добрый день. Возможно, кто-то подскажет как сделать, если установлено слак через flatpack?
                                        0
                                        У меня файл нашёлся по следующему пути:
                                        /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 — длинная строка.
                                        Редактировать файл нужно с повышенными правами.
                                        0
                                        Так, а что за алгоритмы у ютюба, выяснили?
                                          0
                                          Нет, не выяснили.

                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                        Самое читаемое