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

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 theme was not delivered and probably in the near future is not even planned, it was necessary to use the current developments of enthusiasts. Because the desktop version of Slack is written in Electron, then you can control the styles of the already assembled application, so I began to dig in the direction of ready-made solutions or hints at them.

At first I thought of putting an existing sblack custom solution, but it turned out only 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 a part on customizing the styles. And I took the main working decision from here .

I’m a bit of a custom solution because the text and the pictures looked too harsh, bright and vigorously on a dark background. As a result, I reduced the brightness of the text, darkened the preview of the images and got the result, which is comfortable to work with and which is visible in the picture at the beginning of the post.
')
Here is a short tutorial 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 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; } `; $("<style></style>").appendTo('head').html(css + customCustomCSS); } }); }); 

   
   For MacOS and Linux we do the same, only for files:
   
   • Linux: /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js;
   • 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 Slack Web version, look at the structure of the block you are interested in in the DOM, set up the styles directly in the developer’s tools and copy the resulting code into the customCustomCSS variable;
   
3. Save the file and run the application. New styles will be applied automatically.

Settings will fly with the next update of the application.

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. With the next update, you will need to replace this file in the directory with the new version again.

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

All comfortable development!

UPD. Updated 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 the inscriptions of service messages, threads names and thread closing icons.
Thanks to newbie_java and sw0rl0k for testing and pointing out bugs.