Solarized theme for Slack (including background - not just sidebar)

slack-solarized-theme.css

.dummy {
  color: #002b36; /* base03 */
  color: #073642; /* base02 */
  color: #586e75; /* base01 */
  color: #657b83; /* base00 */
  color: #839496; /* base0 */
  color: #93a1a1; /* base1 */
  color: #eee8d5; /* base2 */
  color: #fdf6e3; /* base3 */
  color: #b58900;
  color: #cb4b16;
  color: #dc322f;
  color: #d33682;
  color: #6c71c4;
  color: #268bd2;
  color: #2aa198;
  color: #859900;
}

/**
 * Add these lines to /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/index.js
 * to have the style auto-load

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() { // eslint-disable-line
  // Only do this when it's dark out
  const hours = new Date().getHours();
  // if (process.env.SLACK_DEVELOPER_MENU !== 'true' && (hours > 8 || hours < 19)) return;
  if (process.env.SLACK_DEVELOPER_MENU !== 'true') return;

  // Then get its webviews
  let webviews = document.querySelectorAll(".TeamView webview");

  // Fetch our CSS in parallel ahead of time
  const cssURI = 'https://gist.githubusercontent.com/jez/cd7f8646bcc29237f47779efa4241c01/raw/slack-solarized-theme.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));
    });
  });
});

 */


#msgs_scroller_div::-webkit-scrollbar-track,
#client_body::before,
.client_container,
#client_body,
#footer,
ts-message,
.channel_header,
ts-jumper ts-jumper-container,
ts-jumper input[type="text"],
.rxn {
  background: #002b36 !important; /* base03 */
}

ts-message.active:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply),
ts-message.message--focus:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply),
ts-message:hover:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply),
.day_divider .day_divider_label,
#channel_topic_text,
.file_container {
  background: #073642 !important; /* base02 */
}

.rxn:hover,
.rxn.user_reacted {
  background: #268bd2 !important;
}
.rxn.user_reacted .emoji_rxn_count {
  color: #073642 !important;
}

ts-message,
.message_body,
.channel_title .channel_name,
ts-jumper input[type="text"],
ts-jumper ol li .member_real_name,
ts-jumper ol li .view_name,
ts-jumper ol li .channel_name {
  color: #839496 !important; /* base0 */
}

.light_theme ts-message .message_content .message_sender,
.light_theme ts-message .message_content a.message_sender,
#msg_input::-webkit-input-placeholder,
ts-jumper input[type="text"]::-webkit-input-placeholder,
.email_container.email_reset .email_inline_collapsed_content .email_header .file_header_meta,
.email_container.email_reset .email_inline_collapsed_content .email_header .file_header_title,
.bot_message .message_sender,
.bot_message .message_sender a {
  color: #93a1a1 !important; /* base1 */
}

.feature_name_tagging_client .app_preview_link_slug,
.feature_name_tagging_client .internal_member_link,
.feature_name_tagging_client .internal_user_group_link,
.feature_name_tagging_client ts-mention {
  background: #073642 !important; /* base2 */
  color: #268bd2 !important;
}

.client_channels_list_container {
  border-right: 0px !important;
}

#client_body::before {
  border-bottom: 1px solid #586e75 !important;
}

#msg_input,
#primary_file_button {
  background: #073642 !important;
  color: #839496 !important;
  border-color: #93a1a1 !important;
}

.day_divider .day_divider_label {
  color: #073642 !important;
}
.day_container .day_msgs {
  border-top: 1px solid #268bd2 !important;
}

/* Label next to output from bot/APP */
.bot_label {
  padding: 0 4px !important;
  border-radius: 3px !important;
  background: #073642 !important;
}

/* Buttons on message hover */
.ts-message .action_hover_container .btn_msg_action {
  color: #839496 !important;
  background: #073642 !important;
}

/* Search box */
.search_form {
  background: #073642 !important;
}
.ql-placeholder {
  color: #839496 !important;
}
.ql-container.texty_single_line_input {
  background: #073642 !important;
  color: #93a1a1 !important;
}