April 19, 2019 at 15:44

Slack - an unofficial dark theme for the desktop version of Windows, Linux, MacOS

Dark theme slack

I was eager to put a dark theme on my desktop version of Slack, because I spend a lot of time in it in the dark and I want to work comfortably in a homogeneous dark environment.
Since the official topic was not brought in and probably is not even planned in the near future, I had to use the current achievements of enthusiasts. Because Since the desktop version of Slack is written in Electron, you can control the styles of the already built application, so I started digging towards ready-made solutions or hints of them.

At first thought to put an existing custom solution sblack , but it only turned out for the lucky owners of MacOS. So I had to look further and came across a rather interesting hack on this site. The solution turned out to be broken, but from here I took the part on customizing styles. And I took the main working solution from here .

I have a little custom solution, because text and pictures looked too sharp, bright and vyrviglazno against a dark background. As a result, I reduced the brightness of the text, darkened the preview of the images and got a result that is comfortable to work with and which is visible in the picture at the beginning of the post.

Here is a short instruction on how to do this for different platforms:

  1. Completely close the Slack application;
  2. For Windows. At the end of the file ~ \ AppData \ Local \ slack \ app-3.3.8 \ resources \ app.asar.unpacked \ src \ static \ ssb-interop.js add the code:

    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;
                }
               `;
           $("").appendTo('head').html(css + customCustomCSS);
       }
});
});

    For MacOS and Linux, we do the same for files only:
    • Linux: /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js;
    • For those who have installed via flatpack:
      This solution was written by miir in # 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 is replaced with a long string.
      You need to edit the file with elevated permissions.
    • MacOS: /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js.


    If you want to change any styles, you need to open the Web version of Slack, look at the structure of the block you are interested in in the DOM, configure the styles directly in the developer tools and copy the resulting code into the customCustomCSS variable;
  3. Save the file and run the application. New styles will be applied automatically.

The settings will fly off the next time the application is updated.

Therefore, if you like the theme, it is advisable to save a copy of the modified `ssb-interop.js` file to any place outside the Slack directory, so that you do not do the same again later. At the next update, you will need to replace this file in the directory with the new version again.

I hope my instruction will help the same lovers of a dark theme, like me.

All comfortable development!

UPD - 04/21/2019. Updated the code. A major bug was fixed with the display of the All Threads section and minor bugs in the section itself. Minor bugs were fixed with the display of service message labels, thread names and thread closing icons.
Thanks newbie_java and sw0rl0kfor testing and pointing out bugs.
UPD2 - 04/23/2019. A solution has been added to the instructions for those who have Slack installed via flatpack. Thanks miir for the solution.
Tags:

Also popular now: