Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to theme Slack (Dark, Solarized, White, Rosé, whatever)

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

Update as of 11.27.2019:

  • ** Revised styles for a Solarized'ish look.**
  • ** Animated message input with showing/hiding formatting bar. (I didn't like the new, bigger message input area. So now it grows only when needed. :)**

Slack's themes really aren't that great. You either get Light or Dark, and then some Sidebar themes. The main content area just stays boring if you "theme" it using Slack's default ways.

My Psuedo-Solarized Theme (Solarized'ish?)

I love Solarized themes, but wanted a bit more contrast and color saturation. Code for this is directly below.

image

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

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: #021525 !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__primary_view { border-left: 1px solid rgba(27, 139, 210, 0.45); }
        .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, .p-workspace__input .p-message_input_field.focus .ql-composer-sticky { border-color: rgb(27, 139, 210) !important; }
        .c-texty_input.c-texty_input--sticky_composer { padding-bottom: 0 !important; transition: all 0.2s ease; }
        .c-texty_input.c-texty_input--sticky_composer.focus { padding-bottom: 48px !important; }
        .c-texty_input.c-texty_input--sticky_composer.focus .ql-composer-sticky { background: transparent; }
        .p-message_input_field .ql-composer-sticky { display: none;}
        .p-message_input_field.focus .ql-composer-sticky { display: block;}
        .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, .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, .p-team_sidebar, .p-team_sidebar--frameless::before { background: #010f1d !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: rgba(27, 139, 210, 0.45) !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.) Last step: choose Slack's "Dark" theme (in Preferences -> Themes) as a baseline set of colors/styles that the above code will expand upon.

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, .p-classic_nav, footer, .p-classic_nav__team_header, .p-prefs_modal, .c-fullscreen_modal__header { background: #021525 !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__primary_view { border-left: 1px solid rgba(27, 139, 210, 0.45); }
        .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, .p-workspace__input .p-message_input_field.focus .ql-composer-sticky { border-color: rgb(27, 139, 210) !important; }
        .c-texty_input.c-texty_input--sticky_composer { padding-bottom: 0 !important; transition: all 0.2s ease; }
        .c-texty_input.c-texty_input--sticky_composer.focus { padding-bottom: 48px !important; }
        .c-texty_input.c-texty_input--sticky_composer.focus .ql-composer-sticky { background: transparent; }
        .p-message_input_field .ql-composer-sticky { display: none;}
        .p-message_input_field.focus .ql-composer-sticky { display: block;}
        .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, .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, .p-team_sidebar, .p-team_sidebar--frameless::before { background: #010f1d !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: rgba(27, 139, 210, 0.45) !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); }
    `;
    $.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);
        }
    });
});
  1. 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, 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.

@svenwoldt

This comment has been minimized.

Copy link

svenwoldt commented Feb 28, 2018

Works on linux too ;-) kudos

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

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Feb 28, 2018

Good to know! Updated the gist.

@loganloganlogan

This comment has been minimized.

Copy link

loganloganlogan commented Mar 3, 2018

Awesome! Will have to give this a go.

@lucidkodo

This comment has been minimized.

Copy link

lucidkodo commented Sep 27, 2018

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

image

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; }
@stevenc7

This comment has been minimized.

Copy link

stevenc7 commented Oct 15, 2018

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

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Nov 7, 2018

@lucidkodo - nice work and glad it helped.

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

@dexterous

This comment has been minimized.

Copy link

dexterous commented Dec 12, 2018

We are, indeed, much obliged good sir!

@jtlevy

This comment has been minimized.

Copy link

jtlevy commented Jan 15, 2019

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;}

Screen Shot 2019-03-14 at 12 58 18 PM

@matt77hias

This comment has been minimized.

Copy link

matt77hias commented Feb 20, 2019

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.

@mtpadilla

This comment has been minimized.

Copy link

mtpadilla commented Feb 22, 2019

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!

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Mar 12, 2019

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.

@gcinbis

This comment has been minimized.

Copy link

gcinbis commented Mar 30, 2019

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

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Apr 25, 2019

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

@johnhamelink

This comment has been minimized.

Copy link

johnhamelink commented Jun 5, 2019

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.

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Jun 5, 2019

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

@wolfjagger

This comment has been minimized.

Copy link

wolfjagger commented Jul 18, 2019

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.

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Jul 18, 2019

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.

@briantully

This comment has been minimized.

Copy link

briantully commented Jul 22, 2019

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?

@gkostov

This comment has been minimized.

Copy link

gkostov commented Jul 23, 2019

@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 :(

@wolfjagger

This comment has been minimized.

Copy link

wolfjagger commented Jul 23, 2019

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!

@briantully

This comment has been minimized.

Copy link

briantully commented Jul 23, 2019

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?

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Jul 24, 2019

@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. :)

@briantully

This comment has been minimized.

Copy link

briantully commented Jul 24, 2019

@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!

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Jul 24, 2019

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

@mikey-t

This comment has been minimized.

Copy link

mikey-t commented Aug 1, 2019

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

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Aug 2, 2019

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

@mikey-t

This comment has been minimized.

Copy link

mikey-t commented Aug 2, 2019

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.

@AlexPoirier1

This comment has been minimized.

Copy link

AlexPoirier1 commented Aug 9, 2019

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 :)

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Aug 15, 2019

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. :)

@gkostov

This comment has been minimized.

Copy link

gkostov commented Nov 7, 2019

Ok, so Slack finally got a native dark theme (at least on a Mac here). This whole non-sense about chasing every app update will finally stop :)

Cheers everyone.

@focus97

This comment has been minimized.

Copy link
Owner Author

focus97 commented Nov 18, 2019

Well, Slack having a "dark" theme wasn't the only impetus for creating a custom theme... :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.