Update as of 8.08.2021:
- Hid the bookmarks bar and fine-tuned some header styles.
If you want to add your own style to Slack, here's how.
I dunno what happened. I just wanted to try something sporty/future-y, I guess. Code for this is directly below.
Just requires some CSS injection via Javascript.
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 asarThis 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.jsOn 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 one of these two files (depending on your architecture) 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.jsLastly, 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, .p-message_input__input_container_unstyled, .p-composer_page, .p-composer_page__subheader { background: #010a18 !important; }
.p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .c-button--primary, .p-team_sidebar__mentions_badge { color: #000 !important; background: #f4b301 !important; }
.c-message_kit__background, .c-wysiwyg_container__formatting { 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; }
.c-wysiwyg_container--theme_dark_bordered:focus-within, .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, .p-view_header, .p-huddle_sidebar_footer__join_non_active_container { background: black !important; }
.p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before, .p-bookmarks_bar_container { display: none;}
.p-file_drag_drop__container { z-index: 1}
.p-view_header { height: 50px; }
.c-virtual_list__item--sticky { top: 0 !important;}
.p-ia__view_header, .p-view_header, .p-composer_page__subheader, .p-channel_sidebar__pages_list_spacer { position: relative; z-index: 2; border-bottom: 1px solid #f4b301 !important; }
.p-huddle_sidebar_footer__join_non_active_container { border-top: 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.
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.
OK, so it broke for me with 4.0.0. One problem is they moved to webpack and so it bundles the js. The other is they compress the app directory it's in with https://github.com/electron/asar. So I reversed it, added this fix to the bundle file, repacked, and I'm themed again.
Steps:
Go to AppData/Local/slack/app-4.*.*/resources. See the app.asar file. This is the compressed file ssb-interop(.bundle).js is in. (Back it up).
Clone https://github.com/electron/asar, cd to the dir, and
npm installit (or npm global install it directly if you want?).Run
node bin/asar extract /path/to/app.asar /some/other/path/app/.Now it's decompressed into the
appdirectory. Find and open thedist/ssb-interop.bundle.jsfile.This is a bundle of a bunch of code. I searched for the second
SLACK_PRQ_TEAM_BOOTEDin the file and added the above fix (document.addEventListener...});) after the next semicolon. Column 1918643 for me.Close the file.
node bin/asar pack /some/other/path/app/ /path/to/app.asarRestart slack!
Caveats:
Obviously more involved. If someone has a simpler solution, I'd like to know.
Need node/npm to use asar, afaik.
I don't know what options slack uses to asar pack; my repacked app.asar file is DOUBLE the size (I didn't bother removing whitespace from my addition, but I don't see that causing a 25KB -> 43KB increase...).
Hope this helps someone.