focus97/hack-your-own-slack-theme.md

## hack-your-own-slack-theme.md

      
        

          Raw
        
        
          
            
          
          
            
              hack-your-own-slack-theme.md
            
          
        
      
    
  
    How to theme Slack v4.12.0+
Update as of 2.18.2020:

New filesystem architecture and fix for v4.12.0 + background color fix for workspace footer

Update as of 12.3.2020:

All new theme!

If you want to add your own style to Slack, here's how.
My quazi-Tron Theme'ish?
I dunno what happened. I just wanted to try something sporty/future-y, I guess. Code for this is directly below.

Works on OSX, Linux, and should work on Windows too (I think)
Just requires some CSS injection via Javascript.
Slack v4.0 and above
In order to get Slack v4 and up to work, you'll need a simple Node package. If you are comfortable with opening a Javascript file and modifying it, running a couple extra Terminal commands will be no big deal.
Note: you will need Admin access to your computer for this to work (as far as I can tell).
Here's how I'm able to do it on macOS Mojave:
1.) Install Node package first. Open up a Terminal and run:
npm install -g asar
This will install a package that will allow you to unpack Slack's app.asar archive, which is where the JS file we need to modify lives.
2.) Within the Terminal, navigate to the directory where the app.asar file lives:
cd /Applications/Slack.app/Contents/Resources/
(again, this is the location on my Mac)
3.) Extract the Asar archive (you may need to run as super user, so I'll just include that code here):
sudo asar extract app.asar app; sudo asar extract app-arm64.asar app-arm64; sudo asar extract app-x64.asar app-x64;
This extracts the asar's contents to newly creatd directories within the current directory.
4.) From this great article (https://www.codepicky.com/hacking-electron-restyle-skype/), Slack will either look for an asar archive OR the /{extracted asar app from above} directory. Let's tell Slack to ignore the archive:
sudo mv app.asar app.asar.bak; 
5.) Now we need to modify three files. First, run this command:
open app/index.js
On lines 2 and 4, remove the .asar from the resolve() function. Your finished file should look like
if (process.arch === 'arm64') {
  process._archPath = require.resolve('../app-arm64');
} else {
  process._archPath = require.resolve('../app-x64');
}

require(process._archPath);
Now open two files in order to place our custom code:
open /Applications/Slack.app/Contents/Resources/app-x64/dist/preload.bundle.js;
open /Applications/Slack.app/Contents/Resources/app-arm64/dist/preload.bundle.js
Lastly, at the bottom of both of those files, place this code below and save the file.
document.addEventListener('DOMContentLoaded', function() {
    var tt__customCss = `
        #team_menu, .p-channel_sidebar, .p-team_sidebar--frameless::before, body, .channel_header, #footer, .channel_title_info, #channel_topic_text, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider, .p-classic_nav, footer, .p-classic_nav__team_header, .p-prefs_modal, .c-fullscreen_modal__header, .workspace__primary_view_footer, .p-workspace__primary_view_footer { background: #010a18 !important; }
        .p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .c-button--primary { color: #000 !important; background: #f4b301 !important; }
        .c-message_kit__background { background: transparent; }
        .p-workspace__primary_view { border-left: 1px solid #f4b301; }
        .p-client_desktop--ia-top-nav .p-team_sidebar { border-right: 1px solid #f4b301; }
        .p-top_nav { background: #f4b301 !important; }
        .p-channel_sidebar__presence_icon.c-presence--active, .p-top_nav--iap2 .p-ia__nav__user__presence { color: #f4b301 !important; }
        .p-workspace__input.p-message_input--dark .p-message_input_field.focus, .p-workspace__input.p-message_input--dark .p-message_input_field.focus~.p-texty_sticky_formatting_bar, .c-message_list__day_divider__line, .p-ia__sidebar_header--top-nav .p-ia__sidebar_header__button, .p-ia__sidebar_header--top-nav .p-ia__sidebar_header__mode { border-color: #f4b301 !important; }
        .p-top_nav__sidebar button, .p-top_nav__windows_controls_container button, .p-channel_sidebar__channel--selected .p-channel_sidebar__channel_icon_prefix { color: black !important; }
        pre, .p-channel_sidebar--iap1 .p-channel_sidebar__section_heading, .p-drag_layer .p-channel_sidebar__section_heading, .p-ia__sidebar_header, .p-ia__view_header, .c-texty_input__container--sticky_composer .c-texty_input.focus~.p-texty_sticky_formatting_bar, .p-team_sidebar { background: black !important; }
        .p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before { display: none;}
        .p-file_drag_drop__container { z-index: 1}
        .p-ia__view_header { position: relative; z-index: 2; border-bottom: 1px solid #f4b301; }
    `;
    var head = document.head;
    var darkStyles  = document.createElement('style');
    darkStyles.appendChild(document.createTextNode(tt__customCss));
    head.appendChild(darkStyles);
});
6.) Last step: choose Slack's "Dark" theme (in Preferences -> Themes) as a baseline set of colors/styles that the above code will expand upon.
Style your own
If you have some CSS and browser devtools experience, you can customize the colors all you want. Slack has a way to expose their devtools.
On OSX, first quit Slack, then run this command in the Terminal: export SLACK_DEVELOPER_MENU=true; open -a /Applications/Slack.app
Once you do that, Slack will open up and you can hit the View menu to find a new Developer entry. I used Toggle WebApp DevTools to check the dom for the selectors I wanted to style.