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



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 за решение.

Вы можете помочь и перевести немного средств на развитие сайта



Комментарии (46):

  1. basilbasilbasil
    /#20049010

    стало гораздо лучше

    • zaytal
      /#20049542

      Спасибо. На выходных уберу баги, которые обнаружил и будет ещё лучше.

  2. mrTyler
    /#20049210

    Интересно, насколько такой хак легален с точки зрения безопасности компании? Одобрит ли команда internals красивую черную тему, которая тянет что-то из gist?

    • zaytal
      /#20049462

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

      • alexvoz
        /#20053210

        А CSS можно скачать и рядом положить исправив путь на локальный?

        • zaytal
          /#20056166

          Конечно можно, либо вытяните curl'ом, либо просто в браузере перейдите по предложенному пути и сохраните в отдельный файл на компьютере.
          Но его скорее всего нужно будет положить где-то снаружи директории с приложением, т.к. на каких-то системах меняется директория слака (из-за версии), а где-то директория неизменна.

  3. popopa
    /#20049436

    В линукс минт 19 нет /usr/lib/slack/
    Также найти файл ssb-interop.js тоже не удалось

    • zaytal
      /#20049448

      Нашёл какую-то зацепку на github для mint 19.
      Попробуйте посмотреть по пути /usr/share/applications/slack.desktop.

      • popopa
        /#20049478

        Не поверите, но тоже нет указанного вами пути ?\_(?)_/?

        • zaytal
          /#20049520

          Печалька. У электрона в основном архитектура кроссплатформенная, а значит этот файл должен быть где-то.
          Я с mint дела не имел, не знаю где может быть расположено приложение.
          Но если вы найдёте, я дополню пост :)

          • sm4tlm
            /#20049642

            $ sudo find / | grep interop
            тоже без результатов?

    • panter_dsd
      /#20050222

      Попробуй в /opt поискать. В gentoo оно там лежит.

  4. EndUser
    /#20049484

    Ого! А можно для Skype for Desktop аналогично?
    Не получается найти аналогичные файлы.
    А шрифт там вырвиглазный.
    Спасибо!

    • zaytal
      /#20049504

      Постараюсь поискать. Но уже на выходных.

    • zaytal
      /#20056562

      Для десктопной версии Skype такое вряд ли удастся сделать. По крайней мере я по этому поводу ничего не нашёл. Придётся довольствоваться тем, что есть.

      А шрифт там вырвиглазный
      — возможно у вас в настройках стоит использование контрастной темы. Там действительно интерфейс сильно бьёт по глазам.

  5. zaytal
    /#20049494

    Есть проблемы с отображением тёмной темы в разделе All Threads. Я думаю, что там не хватает просто тёмного бэка. На выходных разберусь и обновлю код в посте.
    В остальном пользуюсь уже 2 дня. Больше проблем особых не заметил, глаз радуется.
    Если обнаружите серьёзные баги, пишите в ответ, постараюсь разобраться.

    • newbie_java
      /#20049576

      Название треда на правой панели так же показывается чёрным на тёмно-сером. Как и крестик закрытия данной панели.

      • zaytal
        /#20049580

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

      • zaytal
        /#20056504

        Благодарю за тестирование.
        Крупный баг по All Threads и прочие мелкие баги поправлены. Изменения уже отражены в посте.

    • sw0rl0k
      /#20050586

      Еще к багам
      1. Затеняет картинки в чате. При этом, если нажать на картинку, чтоб она открылась, то все норм. Прочитал, не баг, а фича)
      2. На странице настроек та же проблема с фоном что и в разделе со всеми тредами.

      • zaytal
        /#20056500

        Благодарю за тестирование.
        Проблему с фоном в настройках не исправлял, т.к. раздел не популярный, баг не сказывается на рабочей среде и на него надо выделить много времени. Если кто-то пожелает ему приделать тёмную тему, то можете присылать код стилей и я их отражу в посте.
        Крупный баг по All Threads и прочие мелкие баги поправлены. Изменения уже отражены в посте.

    • AibekAS
      /#20056136

      (del)

      • zaytal
        /#20056148

        Левая панель не меняется этим решением.
        Я просто выбрал тёмный цвет левой панели в настройках приложения (цвет левой панели можно менять).

        • AibekAS
          /#20056156

          Да, спасибо, уже понял свою ошибку.

  6. sm4tlm
    /#20049548

    круто, нравится!

    • zaytal
      /#20049558

      Спасибо. Рад, что был полезен.

  7. newbie_java
    /#20050056

    Да простит меня автор, но нашлась популярная 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
      /#20050114

      Круто же!
      Раз там те же баги, то я пока что свою доработаю до вменяемого состояния.
      Можете картинку прикрепить как там выглядят чаты с картинками? Может почерпну что-то.

  8. streetturtle
    /#20051918 / +1

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

  9. lebtim
    /#20052060

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

    • zaytal
      /#20052068

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

      • KpoKec
        /#20054242

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

  10. immaculate
    /#20052496 / +1

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


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

    • zaytal
      /#20056392

      Здорово. Не знал, что есть такой клиент.
      Дизайн от слова «ничего лишнего». Это конечно удобно с практической точки зрения, но выглядит «тяжеловато» на мой взгляд.
      Стандартный UI Slack выглядит менее загружено и проще для восприятия. Хотя зазря пропадает часть полезной зоны. Наверное я всё же предпочту красоту практичности, хотя бы потому, что оно постоянно подсознательно напоминает как должен выглядеть userfriendly интерфейс.

  11. kalnyanton
    /#20056152 / +1

    Отлично, спасибо! Я себе ещё такие добавил стили:

    • zaytal
      /#20056154

      Не добавился код стилей в вашем комментарии. Можете отправить снова?

      • kalnyanton
        /#20059040

        Точно, прошу прощения:

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


        Тогда ники пользователей при обращении у меня более гармонично вписались.

  12. popopa
    /#20059424

    Добрый день. Возможно, кто-то подскажет как сделать, если установлено слак через flatpack?

    • miir
      /#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 — длинная строка.
      Редактировать файл нужно с повышенными правами.