How to theme Slack (Dark, White, Rosé, whatever)

hack-yo-own-slack-theme.md

How to dark theme Slack v3.x and v4.0.1 (and not just the sidebar)

Update as of 8.15.2019: Added some styles for the sidebar comments.

Slack's themes are tired (as of this writing) and it's hard to find snippets around the web that really work without having to do some crazy-long setTimeout() or re-do all your work on each startup of Slack.

And yes, there are themes, but actually getting them into Slack has been the big challenge. (Because Slack devs update and break old methods.)

Enough with that. (Note to Slack devs: please keep updating Slack but don't keep breaking our hacky theming mods. Thanks!)

My Psuedo-Solarized Theme

Kinda cool, amiright? Code for this is directly below.

Works on OSX, Linux, and should work on Windows too (I think)

At the time of this writing, Slack was using jQuery. So, easiest thing to do is fire some $.ajax() to get a publicly available theme as a starting point, then combine that with some of your own tweaked styles, then inject into Slack's DOM.

Slack v4.0 and above

In order to get Slack v4 and up to work, you'll need a simple Node package. If you were 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

This extracts the archive's contents to an /app directory within the current directory.

4.) From this great article (https://www.codepicky.com/hacking-electron-restyle-skype/), Slack will either look for the app.asar archive OR the /app directory. Since we'll modify some JS within the /app folder, let's tell Slack to ignore the archive:

sudo mv app.asar app.asar.bak

5.) Lastly, open up ssb-interop.bundle.js. It's within our new /app folder (/app/dist/ssb-interop.bundle.js). Paste this at the very bottom of the file. (Note: this is different from v3.x. It's now simpler, leaner, and faster.)

document.addEventListener('DOMContentLoaded', function() {

    let tt__customCss = `
        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 { background: rgb(0, 43, 54) !important; }
        .p-prefs_modal .c-radiogroup .c-label--with_formatted_text { background:  rgba(255, 255, 255, 0.85); }
        .p-emoji_picker__content, .p-emoji_picker__input_container, .p-emoji_picker__list_container, .p-emoji_picker__footer, .p-emoji_picker__heading, .p-emoji_picker__preview_text, .ReactModal__Overlay--after-open .c-dialog__content, .c-dialog__header, .c-dialog__footer, .p-member_profile_card { background: rgb(1, 21, 34); }
        .p-workspace__input .p-message_input_field, .p-flexpane, .c-texty_autocomplete, .p-threads_footer__input .p-message_input_field { background: rgb(1, 24, 34); border-color: rgb(27, 139, 210); }
        .p-workspace__input .p-message_input_field, .p-threads_footer__input .p-message_input_field { border-color: rgba(25,255,255, 0.4); }
        .p-workspace__input .p-message_input_field.focus, .p-threads_footer__input .p-message_input_field.focus { border-color: rgb(27, 139, 210); }
        .c-message--hover { background: rgba(3, 69, 86, 0.7) !important; }
        .p-classic_nav__team_header__team__name, .p-classic_nav, .p-classic_nav__model__title__name__button, .c-message_attachment, .c-message--light .c-message__sender .c-message__sender_link, .c-message_attachment__author_name, .c-texty_input__placeholder, .ql-editor, .p-notification_bar__formatting, .p-emoji_picker__heading, .p-emoji_picker__preview_text, body, .c-message__sender a, .p-classic_nav__channel_header .c-button-unstyled, .p-classic_nav__model__title__info__topic__content, .p-classic_nav__right_header i, .p-classic_nav__right__search__placeholder, .c-dialog__title, .p-share_dialog__warning_message, .c-message_attachment__author_name, .c-message_attachment__author_name.c-link--button, .p-channel_details__heading, .c-link--button, .c-mrkdwn__code, .c-mrkdwn__pre, .p-member_profile_field__label, .p-prefs_modal h2, .p-prefs_modal h3, .p-prefs_modal p, .p-prefs_modal .c-label__text, .p-prefs_modal .c-channel_name__text, .p-classic_nav__model__title span, .channel_header__title__info, .p-classic_nav__model__title__info__secondary_name, .p-classic_nav__model__title__info__presence, .c-app_badge, .c-texty_input.focus .c-texty_input__button, .p-workspace__input .p-message_input_field.focus~.p-message_input_file_button:not(:hover) { color: rgba(255,255,255,0.8); }
        .p-prefs_modal .p-prefs_modal__radiogroup p, .c-message--editing p, .p-notification_bar__formatting code { color: rgba(0,0,0,0.8); }
        .c-mrkdwn__code, .c-mrkdwn__pre, .c-texty_autocomplete__result_highlight, .c-texty_autocomplete__result_highlight--selected { background: rgb(1, 13, 19) !important;}
        .c-message--highlight.c-message--editing { background: rgb(27, 139, 210);}
        .p-classic_nav__model__title__name--dim, .c-texty_input .c-texty_input__button, .p-workspace__input .p-message_input_file_button { color: rgba(25,255,255,0.3); }
        .c-message__body { color: rgb(153, 174, 177); }
        .p-message_pane__unread_banner__banner { color: #111; text-shadow: none; }
        .c-message_list__unread_divider__separator { border-color: rgb(177, 202, 17); }
        .c-message_list__unread_divider__label, .p-message_pane__unread_banner__banner, .c-mrkdwn__member--mention { background: rgb(177, 202, 17) !important; }
        .c-presence--active {color: rgb(177, 202, 17) !important;}
        #team_menu, .p-channel_sidebar { background: #023f4e !important; }
        nav.p-channel_sidebar .p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider:before, .c-button--primary { color: #eee !important; background: rgb(27, 139, 210) !important; }
        .p-channel_sidebar__channel:hover { color: #eee !important; background: rgba(27, 139, 210, 0.5) !important; }
        .c-mrkdwn__member--link { background: rgb(27, 139, 210); color: rgb(0, 43, 54) !important; }
        .c-message_list__day_divider__line { border-top-color: rgb(27, 139, 210) !important}
        #msg_input, #primary_file_button { background: rgb(2, 55, 68) !important; }
        #msg_form #msg_input { border-color: transparent; }
        #msg_input.texty_legacy .ql-placeholder, .c-message_kit__file__meta, .c-message_kit__labels__link, .p-threads_view_header__participant_list { color: #fff; opacity: 0.5; }
        .c-message--starred { background: #1b3f5f; }
        #client-ui.flex_pane_showing #col_flex, #col_flex { border-left-color: #000; }
        #flex_contents, #threads_msgs_scroller_div, ts-thread, .p-threads_view .c-virtual_list__scroll_container { background: #0e2e4a }
        #flex_contents .heading, .p-flexpane_header, ts-thread .thread_messages, .p-threads_view__default_background { background: rgba(0,0,0,0.5); }
        .c-icon_button--light, .c-icon_button--light.c-button-unstyled, .c-icon_button--light:link, .p-threads_flexpane__header_channel_name, .p-threads_flexpane__separator_count, .p-threads_view_header__channel_name, .p-classic_nav { color: white;}
        .p-threads_view_reply, .p-threads_view_root, .p-threads_view__footer, .p-classic_nav__right__search { border: 1px solid rgba(255,255,255,0.4); }
    `;
    var head = document.head;
    var darkStyles  = document.createElement('style');
    darkStyles.appendChild(document.createTextNode(tt__customCss));
    head.appendChild(darkStyles);
});

6.) Enjoy.

Slack v3.0 and below

1. Open
   (OSX): /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
   (Linux {thanks @svenwoldt}): /usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js
   (Windows): %LocalAppData%\Slack<latest>\resources\app.asar.unpacked\src\static\ssb-interop.js
   (Linux Mint 19 {thanks @stevenc7}): /var/lib/flatpak/app/com.slack.Slack/current/active/files/extra/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

2. Then drop this code at the bottom of the above file (note that as of 11.7.18 there is a conditional statement you'll want to put this code inside of, so just put the below right before the enclosing curly brace).

document.addEventListener('DOMContentLoaded', function() {

    let tt__customCss = `
        body, .channel_header, #footer, .channel_title_info, #channel_topic_text, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider { background: rgb(0, 43, 54); }
        .c-message__body { color: rgb(153, 174, 177); }
        .c-message_list__unread_divider__label, .p-message_pane__unread_banner__banner, .c-mrkdwn__member--mention { background: rgb(177, 202, 17) !important; }
        .p-message_pane__unread_banner__banner { color: #111; text-shadow: none; }
        .c-message_list__unread_divider__separator { border-color: rgb(177, 202, 17); }
        #team_menu, .p-channel_sidebar { background: #023f4e !important; }
        .c-presence--active {color: rgb(177, 202, 17) !important;}
        nav.p-channel_sidebar .p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider:before { color: #eee !important; background: rgb(27, 139, 210) !important; }
        .c-mrkdwn__member--link { background: rgb(27, 139, 210); color: rgb(0, 43, 54) !important; }
        .c-message_list__day_divider__line { border-top-color: rgb(27, 139, 210) !important}
        #msg_input, #primary_file_button { background: rgb(2, 55, 68) !important; }
        #msg_form #msg_input { border-color: transparent; }
        #msg_input.texty_legacy .ql-placeholder, .c-message_kit__file__meta, .c-message_kit__labels__link, .p-threads_view_header__participant_list { color: #fff; opacity: 0.5; }
        .c-message--starred { background: #1b3f5f; }
        #client-ui.flex_pane_showing #col_flex, #col_flex { border-left-color: #000; }
        #flex_contents, #threads_msgs_scroller_div, ts-thread, .p-threads_view .c-virtual_list__scroll_container { background: #0e2e4a }
        #flex_contents .heading, .p-flexpane_header, ts-thread .thread_messages, .p-threads_view__default_background { background: rgba(0,0,0,0.5); }
        .c-icon_button--light, .c-icon_button--light.c-button-unstyled, .c-icon_button--light:link, .p-threads_flexpane__header_channel_name, .p-threads_flexpane__separator_count, .p-threads_view_header__channel_name { color: white;}
        .p-threads_view_reply, .p-threads_view_root, .p-threads_view__footer { border: 1px solid rgba(255,255,255,0.4); }
    `;
    $.ajax({
        url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
        success: function(css) {
            $('<style></style>').appendTo('head').html(css + tt__customCss);
        }
    });
});

3. Enjoy.

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, 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.

Works on linux too ;-) kudos

/usr/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

Good to know! Updated the gist.

Awesome! Will have to give this a go.

OMG! Thank you for this!
I've made my own theme as well!

Here's my custom css:

body, .channel_header, #footer, .channel_title_info, #channel_topic_text, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider { background: #1d1d1d; }
.c-message__body { color: #c2c2c2; }
.c-message_list__unread_divider__label, .p-message_pane__unread_banner__banner, .c-mrkdwn__member--mention { background: rgb(177, 202, 17) !important; }
.p-message_pane__unread_banner__banner { color: #111; text-shadow: none; }
.c-message_list__unread_divider__separator { border-color: rgb(177, 202, 17); }
#team_menu, .p-channel_sidebar { background: #393939 !important; }
.c-presence--active { color: #95e96f !important; }
nav.p-channel_sidebar .p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider:before { color: #1a1a1a !important; background: #da8200 !important; }
.c-mrkdwn__member--link { background: #2f2f2f; color: #1a1a1a !important; }
.c-mrkdwn__broadcast.c-mrkdwn__broadcast--link.c-mrkdwn__broadcast--mention { color: #111 !important;  }
.c-message_list__day_divider__line { border-top-color: #da8200 !important; }
.c-message.c-message--light.c-message--hover { background-color: #2a2a2a !important; }
a, a:link, a:visited { color: #0483ce; }
.c-member_slug--link, .c-member_slug--mention { background: #fff6d1 !important; border: 0 !important; padding: 1px 5px !important; opacity: 0.85; }
#msg_input, #primary_file_button { background: #2f2f2f !important; }
#msg_form #msg_input { border-color: transparent; }
#msg_input.texty_legacy .ql-placeholder { color: #fff; opacity: 0.5; }
a.c-message__sender_link { color: #8ab5ca !important; }
.c-message__edited_label { font-size: 12px; color: #939393; }
a.p-channel_sidebar__channel.p-channel_sidebar__channel--private.p-channel_sidebar__channel--selected:before, a.p-channel_sidebar__channel.p-channel_sidebar__channel--selected:before { color: #1a1a1a !important; }
.c-reaction_add { border: 0; }
code { background-color: #cacaca; color: #d72b3f; border: 0; border-radius: 1px; padding: 5px 2px 1px 2px; margin: 0 2px; }

On my Linux Mint 19:
/var/lib/flatpak/app/com.slack.Slack/current/active/files/extra/lib/slack/resources/app.asar.unpacked/src/static/ssb-interop.js

@lucidkodo - nice work and glad it helped.

And thanks as well @stevenc7 - I'll update the Gist with that.

We are, indeed, much obliged good sir!

I opt'd for a darker theme :)

body, .channel_header, #footer, .channel_title_info, #channel_topic_text {background: #252526; }
  .c-message__body { color: #efefef;}
  #team_menu, .p-channel_sidebar {background: #252526 !important; }
  .c-icon--presence-offline:before {color:#9100ff}
  .p-channel_sidebar__channel--selected .c-icon--presence-offline:before {color:#fff}
  .c-presence--active {color: #9100ff !important;}
  .p-channel_sidebar__channel--selected .c-presence--active {color: #fff !important;}
  nav.p-channel_sidebar .p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider:before { color: #f8f8f8!important;background: #9100ff !important; }
  .c-message_list__day_divider__line { border-top-color: #9100ff!important}
  #msg_input, #primary_file_button {background: #121212 !important; }
  #msg_form# msg_input {border-color: transparent;}

Works great, with the exception of separate threads. The latter are displayed in a black/dark grey color instead of a bluish color as is the case for the sidebar and middle window.

Great...thank you for sharing this! One question...trying to figure out what parameters to change in order to modify the color for items that are starred, as I'd like the contrast to be a bit greater to make it easy to pick them out. Does anyone know? Thanks!

Thanks @matt77hias. Just added some extra styles to help cover the sidebar on threads.

And thanks @mtpadilla. Just added some extra styles to bring greater contrast to the starred items.

Works fine with the version 3.3.7 on Linux, as opposed to several other alternatives posted on the web.

@gcinbis - thanks for confirming. Glad it's working well (and continuing to do so despite many Slack updates).

Still looking good 😄 I couldn't figure out the correct directory to change if slack was installed with Snap (they officially support this method now), but using a .deb everything worked out fine.

Awesome, glad to hear @johnhamelink. Was also happy to find that the latest (June 2019) update still works with my snippet above.

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 install it (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 app directory. Find and open the dist/ssb-interop.bundle.js file.
This is a bundle of a bunch of code. I searched for the second SLACK_PRQ_TEAM_BOOTED in 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.asar
Restart 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.

Thanks a ton @wolfjagger. I hadn't known 4.0 was out, but it did indeed break mine as well after update. Just went through a few steps and added instructions for what I did above.

Thank you for the Slack 4.0 update instructions! I was bummed when I saw that updating Slack wiped out my "dark mode" theme and that the previous method of appending to src/static/ssb-interop.js wouldn't work due to the file/build changes.

The only thing I'd mention is that for me I was not able to see my dark theme until I specifically chose the "Help/Troubleshooting/Reset App Data..." menu item. I initially tried reloading (CMD-R) and/or choosing the "Help/Troubleshooting/Clear Cache and Exit" menu item, but those did not show the dark theme for me. Only "Reset App Data..." worked. Maybe update the gist to highlight this?

@wolfjagger, it is a bit involved but fortunately it allows to be scripted. Especially as the patch does not really need to be inserted in that particular place but can be simply appended at the end as with Slack 3 (at least it happens to be so here on macOS 10.14) - I simply updated my current script to do the asar stuff and it's good https://gist.github.com/gkostov/592a0a8e0cc8f059635c7a5ccfd0a507 ... and would be amazing if the styles did work fine too but unfortunately I'll have to fix the CSS as well :(

Hey, nice script. I thought you might not need to add it to the same place; I was simply done with it. 😛

@focus97 You don't need to repack it, great catch!

Anyone know how to change Slack 4.0's window titlebar, which for some reason is now bright white/grey on MacOSX, even in dark mode?

@briantully - have a look at my revised code. I found the previous code I had in the Gist for v4.0 had two errors. First, they aren't using jQuery anymore, so the failure caused an error that would prevent the styles from working correctly. Secondly, they're now blocking any external resources from being loaded, such as the CDN'd external CSS file I'm using in v3.x instructions. So the revised code I have for 4.0 doesn't need external resources nor jQuery.

@briantully and @wolfjagger - with this updated script, not only do you not need to repack the asar, but you shouldn't need to Reset App Data either. :)

@focus97 you are a legend! Thanks so much for realizing that jQuery wasn't being used anymore and that the styles needed to be inline. Looks like I have some work to do porting my v3 dark theme over to v4, but this is a great start. Thanks again!

@briantully - glad it's working for you. Fun to figure this stuff out and make Slack easier on the eyes.

@focus97 I wish I had seen your post earlier. I ended up creating a shell script to help me unpack/pack my injected js/css from my old hacked theme: https://github.com/mikey-t/slack-dark-theme. The CSS needs a little work, but the injection method makes it really fast for rapid trial and error changes. If someone wanted to use the injection method they could just add their own css file to the folder and point the shell script to it.

@mikey-t hopefully the method i'm posting works well on your side. Just saw Slack's 4.0.1 update and it of course broke my custom theme. Ran through the steps and now it's back in order. Just added some additional styles to my theme above, as I caught some styles that needed work.

I've now got my shell script to a point where it's re-runnable (it removes the previous injected content before re-injecting). If you want, you could actually download my repo and just replace my css with yours if you want a fast way to re-inject your css and/or make css fixes and quickly test them. I was making changes this morning and it was super quick. Got a terminal window open with sudo access and I can just make a change, re-run script, reload slack. Was able to make a few dozen css changes in just a few minutes.

Slack 4.0.1 on MacOS broke the side-thread input text color for me. It's now white on white when typing

Great job on this by the way! I'm really glad I found this :)

Thanks @AlexPoirier1. Glad it's working for you. FYI: I think i saw what you meant about the side-thread input. The text color is white but so is the background. Just fixed that with the latest update above. :)