19.04.2019 12:44
zaytal 46 8200 Источник
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
    19.04.2019 15:53
    #20049010

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


    1. zaytal Автор
      19.04.2019 17:07
      #20049542

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


  1. mrTyler
    19.04.2019 16:22
    #20049210

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


    1. zaytal Автор
      19.04.2019 16:56
      #20049462

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


      1. alexvoz
        20.04.2019 13:36
        #20053210

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


        1. zaytal Автор
          21.04.2019 16:07
          #20056166

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


  1. popopa
    19.04.2019 16:53
    #20049436

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


    1. zaytal Автор
      19.04.2019 16:54
      #20049448

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


      1. popopa
        19.04.2019 16:58
        #20049478

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


        1. zaytal Автор
          19.04.2019 17:05
          #20049520

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


          1. sm4tlm
            19.04.2019 17:29
            #20049642

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


        1. worldxaker
          19.04.2019 17:56
          #20049842

          небось через flatpack установлен


          1. popopa
            19.04.2019 20:11
            #20050502

            Да именно так.


    1. panter_dsd
      19.04.2019 19:03
      #20050222

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


      1. popopa
        19.04.2019 20:11
        #20050508

        Тоже нет :)


        1. panter_dsd
          19.04.2019 20:15
          #20050524

          Попробуй сделать 

          ls -lhFAX /usr/bin/slack
          и посмотреть куда оно покажет.


          1. popopa
            19.04.2019 20:16
            #20050530

            No such file or directory
            Да и дело в том, что у меня установлено через flatpack


            1. zaytal Автор
              23.04.2019 12:36
              #20064176

              Возможно в этом комментарии решение для flatpack.


  1. EndUser
    19.04.2019 16:59
    #20049484

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


    1. zaytal Автор
      19.04.2019 17:02
      #20049504

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


    1. zaytal Автор
      21.04.2019 18:39
      #20056562

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

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


  1. zaytal Автор
    19.04.2019 17:01
    #20049494

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


    1. newbie_java
      19.04.2019 17:14
      #20049576

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


      1. zaytal Автор
        19.04.2019 17:15
        #20049580

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


      1. zaytal Автор
        21.04.2019 18:18
        #20056504

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


    1. sw0rl0k
      19.04.2019 20:27
      #20050586

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


      1. zaytal Автор
        21.04.2019 18:17
        #20056500

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


    1. AibekAS
      21.04.2019 15:59
      #20056136

      (del)


      1. zaytal Автор
        21.04.2019 16:01
        #20056148

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


        1. AibekAS
          21.04.2019 16:03
          #20056156

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


  1. sm4tlm
    19.04.2019 17:09
    #20049548

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


    1. zaytal Автор
      19.04.2019 17:10
      #20049558

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


  1. newbie_java
    19.04.2019 18:31
    #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);
   }
 });
});


    1. zaytal Автор
      19.04.2019 18:43
      #20050114

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


  1. streetturtle
    20.04.2019 03:01
    #20051918
    +1

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


  1. lebtim
    20.04.2019 06:14
    #20052060

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


    1. zaytal Автор
      20.04.2019 06:18
      #20052068

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


      1. lebtim
        20.04.2019 10:53
        #20052648

        Благодарю


      1. KpoKec
        20.04.2019 19:07
        #20054242

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


  1. immaculate
    20.04.2019 10:11
    #20052496
    +1

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


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


    1. zaytal Автор
      21.04.2019 17:43
      #20056392

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


  1. kalnyanton
    21.04.2019 16:01
    #20056152
    +1

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


    1. zaytal Автор
      21.04.2019 16:02
      #20056154

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


      1. kalnyanton
        22.04.2019 12:16
        #20059040

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

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


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


  1. popopa
    22.04.2019 13:28
    #20059424

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


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