Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Solarized theme for Slack (including background - not just sidebar)
.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;
}
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.