Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Slack CSS hack style sheet to customize the theming the Electron application.
ts-message:hover:not(.standalone):not(.multi_delete_mode):not(.highlight) {
background: #353535;
}
ts-message {
font-size: .8375rem !important;
}
#col_channels,
#team_menu,
#quick_switcher_btn {
background: #2B2B2B !important;
}
.channel_title_info,
.channel-header .flex_header,
.flex_header,
#channel_header_info,
#primary_file_button,
#col_messages > .row-fluid,
#client-ui,
.client-ui,
.channel_header_refresh #client_body:not(.onboarding):before,
#footer,
#messages_container,
.day_divider,
.tab_container,
.panel .heading,
#mentions_options
{
background: #000 !important;
}
.ts_icon:not(.ts_icon_presence):before, ts-icon:before,
.panel .heading,
.message_body,
.timestamp,
.initial_comment .comment,
#im_title,
#channel_title,
#mentions_options {
color: #fff !important;
}
#quick_switcher_btn {
border-top: none !important;
}
.channel_header_refresh #client_body:not(.onboarding):before {
border-bottom: 1px solid #4C4C4C;
}
.monkey_scroll_bar,
.monkey_scroll_handle_inner {
background: #333131 !important;
}
#stars_toggle.active,
#recent_mentions_toggle.active {
background: #6D6D6D !important;
}
.action_hover_container .ts_icon:before,
.action_hover_container .ts_icon:after,
#menu_items .ts_icon:before,
#menu_items .ts_icon:after {
color: #000 !important;
}
#search_container input,
#message-input {
background: #000 !important;
color: #fff !important;
}
.special_formatting {
background-color: inherit !important;
color: #39cc2f !important;
}
.mention {
background: inherit !important;
color: #e1dc28;
}
@kuanb

This comment has been minimized.

Copy link
Owner Author

kuanb commented Nov 27, 2017

Update: Ignore this; the best solution is here: https://github.com/widget-/slack-black-theme

How to use the above CSS in your Slack desktop application:
Navigate to /Applications, and open Slack.app/Contents/Resources/app.asar.unpacked/src/static/index.js in your editor of choice. Next, add the below script to to the index.js file. Save the file and restart Slack. You should be using this Slack customization theme now.

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() { // eslint-disable-line
   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");

   // Fetch our CSS in parallel ahead of time
   const cssURI = 'https://gist.githubusercontent.com/kuanb/43078822ae59ee43f1ff9ec24c6ad39b/raw/c22c6123a0c56a031f80113d0b8d8ee8ea39a4ea/black_slack_custom.css';
   let cssPromise = fetch(cssURI).then(response => response.text());

   // Then wait for the views to load
   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            // Finally add the CSS in
            cssPromise.then(css => webview.insertCSS(css));
      });
   });
});

Want a new theme or to customize this one? Make your own Gist and replace the string value of cssURI with the link to your new raw Gist.

Credit to Bryan Keller for creating the original script and stylesheet. For more guidance and alternate methods of messing with Slack's theming, view this Gist.

@jtlevy

This comment has been minimized.

Copy link

jtlevy commented Jun 3, 2019

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.