Skip to content

Instantly share code, notes, and snippets.

@rafael-sa
Last active June 4, 2019 11:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rafael-sa/b1f5f9ea37063427d3875c50c06a1a8e to your computer and use it in GitHub Desktop.
Save rafael-sa/b1f5f9ea37063427d3875c50c06a1a8e to your computer and use it in GitHub Desktop.
Modified CSS for Slack (initial content copied from solution https://github.com/caiceA/slack-black-theme/blob/master/ssb-interop.js)
/* = my customization =
*
* tip for enabling dev tools in the app: set an env var called SLACK_DEVELOPER_MENU to true
* then run on mac via terminal: open -a slack
* you'll be able to find it in View > Developer
*/
[lang] body,
[lang] .c-texty_input,
[lang=en-US] #msg_input.texty_legacy,
[lang=en-US] .texty_legacy {
font-family: 'Monaco', monospace !important; /* caiceA uses Lato */
}
[lang] .c-texty_input .ql-editor,
[lang] .c-texty_input .ql-placeholder,
[lang] #msg_input {
font-size: 12px !important;
}
a,
a:link,
a:visited {
color: #9BFFA1 !important; /* OLX GROUP green */
}
.c-message__sender a {
font-weight: 600;
color: #ddd !important;
font-size: 12px !important;
}
span.c-message__body,
a.c-message__sender_link,
span.c-message_attachment__media_trigger.c-message_attachment__media_trigger--caption,
div.p-message_pane__foreword__description span {
color: #ddd;
font-size: 12px;
}
div.c-virtual_list__scroll_container {
background-color: #222222 !important;
}
// from caicA's version where I changed font sizes from 15 to 13, and colors white to #ddd
// todo: try to add css variables and have a smaller css that's easier to read
div.c-message.c-message--light.c-message--hover {
color: grey !important;
}
.light_theme ts-message .timestamp {
line-height: 18px;
opacity: 0;
color: #ffb088 !important;
}
.p-message_pane .c-message_list:not(.c-virtual_list--scrollbar),
.p-message_pane .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider {
z-index: 0;
}
.c-scrollbar__hider {
background: #222222 !important;
}
#team_menu,
#team_menu_overlay {
background: #222222 !important;
}
#client_body:not(.onboarding):not(.feature_global_nav_layout):before {
box-shadow: none !important;
border-left: 1px solid #303030;
}
#col_messages,
#client_header {
border-left: 1px solid #303030;
}
#team_menu,
#team_menu_overlay {
border-color: transparent !important;
}
.c-team__display-name,
.c-unified_member__display-name,
.c-usergroup__handle {
color: #ddd !important;
}
.c-dialog__content {
background: #333539!important;
}
.c-dialog__header {
background: #222222!important;
color: #ddd;
}
.c-dialog__footer {
background: #222222!important;
}
div.c-message:hover {
background-color: #222222 !important;
}
.c-dialog__title {
color: #ddd !important;
}
a {
color: #36D4F6!important;
}
.comment .app_preview_link_slug,
.comment .internal_member_link,
.comment .internal_user_group_link,
.comment .mention,
.ql-editor .app_preview_link_slug,
.ql-editor .internal_member_link,
.ql-editor .internal_user_group_link,
.ql-editor .mention,
ts-message .app_preview_link_slug,
ts-message .internal_member_link,
ts-message .internal_user_group_link,
ts-message .mention {
background: #fbd9a5 !important;
color: black !important;
}
.btn {
background: #008952;
color: #fff;
line-height: 1.2rem;
font-weight: 900;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
border: none;
border-radius: .25rem;
box-shadow: none;
position: relative;
display: inline-block;
vertical-align: bottom;
text-align: center;
white-space: nowrap;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
}
.btn_outline.hover,
.btn_outline:focus,
.btn_outline:hover {
background: #fff;
}
.btn_outline {
background: #f9f9f9;
color: #2c2d30!important;
font-weight: 700;
text-shadow: none;
}
.c-member_slug--link {
background: none !important;
color: #ffce8e!important;
font-weight: 600 !important;
border: none !important;
}
.menu_content a {
color: #ddd !important;
}
.menuitem a {
color: #ddd !important;
}
.c-member_slug--mention,
.c-member_slug--mention:hover {
background: #fbd9a5 !important;
color: black !important;
}
#convo_tab .message_input,
#convo_tab textarea#msg_text {
width: 100%;
background: #31353d !important;
border: 1px solid #31353d !important;
color: #ddd !important;
}
.upload_in_threads .inline_message_input_container:hover .inline_file_upload,
.upload_in_threads.has_focus .inline_message_input_container .inline_file_upload {
background: #008952 !important;
border: 2px solid #008952 !important;
color: #ddd !important;
}
#primary_file_button:hover {
border: 2px solid #006039 !important;
background: #006039 !important;
}
#primary_file_button {
position: absolute;
bottom: 1.375rem;
top: 0;
left: 0;
width: 44px;
padding: 0;
border: 2px solid #008952 !important;
background: #008952 !important;
color: #ddd !important;
line-height: 42px;
text-shadow: none;
text-align: center;
-webkit-transition: background 50ms, color 50ms;
-moz-transition: background 50ms, color 50ms;
transition: background 50ms, color 50ms;
border-radius: 6px 0 0 6px;
}
.inline_file_upload {
background: #008952 !important;
color: #ddd !important;
}
.p-share_dialog_message_input {
background: black !important;
color: #ddd !important;
}
.p-file_upload_dialog__preview {
background: transparent !important;
}
.c-input_select {
background: #222222 !important;
color: #ddd !important;
}
.c-label--inline .c-label__text {
color: #ddd !important;
}
.c-input_select_options_list_container:not(.c-input_select_options_list_container--always-open) {
background: #151515!important;
color: #ddd !important;
border: none !important;
border: 0 !important;
}
.p-search_filter .p-file_list__file_type_select,
.p-search_filter__select .c-input_select {
border: transparent;
}
.c-input_select_options_list__option {
color: #ddd !important;
}
.c-input_select__secondary_member_name {
color: #ddd !important;
}
.c-search__input_and_close {
background: #2b2c2e!important;
color white !important;
}
.c-search__input_box {
background: #2b2c2e!important;
color white !important;
}
.c-search_autocomplete {
background: #232323!important;
color white !important;
}
.c-search_autocomplete footer {
background: #3B3B3B!important;
color white !important;
}
.c-search_autocomplete__suggestion_text {
color white !important;
}
.c-search_autocomplete__suggestion_content .c-search_autocomplete__suggestion_text {
color white !important;
}
.c-search_autocomplete header {
background: #232323!important;
color: #ddd !important;
}
.c-search_autocomplete footer .c-search_autocomplete__footer_navigation_help {
color: #ddd !important;
}
.c-search__input_box .c-search__input_box__input .ql-editor,
.c-search__input_box .c-search__input_box__input .ql-placeholder {
background: #2b2c2e !important;
border: none !important;
}
.c-search__tabs {
background: #2b2c2e !important;
}
.c-search__view {
background: #2b2c2e !important;
}
.c-search_message__body {
color: #cacbcc !important;
}
.p-search_filter__title_text {
background: #2b2c2e !important;
color: #ddd !important;
}
.p-search_filter__title:before {
color: grey !important;
}
.p-search_filter__dates {
background: #1f2021!important;
border: none !important;
color: #cacbcc !important;
}
.p-search_filter__datepicker_trigger:hover {
color: #ddd !important;
}
.c-calendar_month {
color: black !important
}
.c-pillow_file__content--collapsed:after {
background: linear-gradient(0deg, #192a38, hsla(0, 0%, 100%, 0) 40px) !important;
}
.c-pillow_file_container {
background: #363636!important;
color: #ddd !important;
}
.c-pillow_file__swap .c-pillow_file__slide {
background: #363636!important;
}
.c-pillow_file__title {
color: #ddd !important;
}
.c-pillow_file__description {
color: #cacbcc !important;
}
.c-mrkdwn__broadcast--mention,
.c-mrkdwn__broadcast--mention:hover,
.c-mrkdwn__highlight,
.c-mrkdwn__mention,
.c-mrkdwn__mention:hover,
.c-mrkdwn__user_group--mention,
.c-mrkdwn__user_group--mention:hover {
color: black !important
}
#threads_msgs .inline_message_input_container.with_file_upload {
border: 2px solid #545454!important;
}
ts-message.active:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply):not(.show_broadcast_indicator),
ts-message.message--focus:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply):not(.show_broadcast_indicator),
ts-message:hover:not(.standalone):not(.multi_delete_mode):not(.highlight):not(.new_reply):not(.show_broadcast_indicator) {
background: #1f2021!important;
}
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload {
background: #545454 !important;
border: 0px !important;
}
.p-flexpane_header {
background: #1f2021!important;
}
.p-file_list__filters {
background: #1f2021!important;
}
.p-file_list__file_type_select .c-input_select__selected_value--placeholder {
color: #cacbcc !important;
}
.input.c-input_select__filter_input {
background: transparent;
}
.p-file_list__file.c-pillow_file_container--full_width {
border-bottom: 1px solid #383838
}
.c-search {
background: #2c2c2e !important;
}
.p-search_filter__title:before {
border-bottom: 1px solid #5F5F5F !important;
}
.c-search__input_and_close {
border-bottom: 1px solid #5F5F5F !important;
}
p-search_filter__date:first-child {
border-bottom: 1px solid #5F5F5F !important;
}
.p-search_filter__more_link {
color: #36D4F6;
font-size: 13px;
margin-top: 4px;
}
.c-link--button:active,
.c-link--button:focus,
.c-link--button:hover {
color: #36D4F6;
outline: none;
text-decoration: underline;
}
.c-filter_input {
align-items: center;
background-color: #545454;
}
.c-member_slug--link,
.c-member_slug--mention {
padding: 0!important;
}
.p-channel_insights__message ts-message.standalone:not(.for_mention_display):not(.for_search_display):not(.for_top_results_search_display):not(.for_star_display) {
background-color: black !important;
border: 1px solid #545454 !important;
}
.p-channel_insights__date_heading span {
position: relative;
z-index: 1;
padding: 0 .5rem;
background-color: #545454;
color: #ddd;
font-size: 13px;
}
.p-channel_insights__date_heading::before {
display: block;
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #545454;
}
#client_body:not(.onboarding):not(.feature_global_nav_layout):before {
background: #222222;
}
.p-channel_insights__message--truncate::before {
background: linear-gradient(180deg, transparent, #232323 90%);
}
.c-button--outline {
background: #2C2F33;
color: #ddd;
border: 1px solid #6A6C6E;
}
.c-button--outline a {
color: #ddd;
}
.c-message--light .c-message__sender .c-message__sender_link {
color: #a4d677 !important;
font-weight: 700 !important;
font-size: 13px !important;
}
.light_theme ts-message .message_content .message_sender {
color: #a4d677 !important;
text-transform: capitalize;
font-weight: 700 !important;
}
.p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted) .p-channel_sidebar__name {
font-weight: bolder !important;
}
.p-download_item__container .p-download_item__name_row {
color: #ddd !important
}
.p-download_item:hover {
border: none !important
}
.p-download_item {
border-bottom: 1px solid rgb(72, 72, 72) !important;
}
.p-download_item:hover {
border-bottom: 1px solid rgb(72, 72, 72) !important;
}
.p-downloads_list__shift_hint {
background: transparent !important;
color: #ddd;
}
.p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted):not(.p-channel_sidebar__channel--selected) .p-channel_sidebar__name,
.p-channel_sidebar__link--unread:not(.p-channel_sidebar__link--selected) .p-channel_sidebar__name,
.p-channel_sidebar__link--invites:not(.p-channel_sidebar__link--dim) .p-channel_sidebar__name,
.p-channel_sidebar__section_heading_label--clickable:hover,
.p-channel_sidebar__section_heading_label--unreads,
.p-channel_sidebar__quickswitcher:hover {
color: #ddd !importnat;
}
.p-download_item__actions {
background: none;
}
.c-message__body {
margin: 4px 0 -4px;
!important
}
.p-file_list a {
color: green !important;
}
.p-downloads_flexpane--list {
color: green !important;
}
.p-channel_sidebar {
font-size: 14px !important;
}
.c-file__meta {
background: blue !important;
}
.p-file_details__name {
color: #ddd !important;
}
.p-file_details__share_channel {
color: #36D4F6;
}
.p-file_details__share_divider hr {
border-color: #4B4B4B;
}
.p-flexpane_header {
border-bottom: 1px solid #4B4B4B;
}
.p-file_details__header_back:hover {
color: #36D4F6;
}
.c-deprecated_button--link {
color: #36D4F6 !important;
}
.p-file_list__file.c-pillow_file_container--full_width:hover {
border-bottom: 1px solid #4B4B4B;
border-color: #4B4B4B;
}
.p-file_list__filters {
border-bottom: 1px solid #4B4B4B;
}
.p-file_list__filters {
padding-top: 10px;
}
input.c-input_select__filter_input {
background: transparent !important;
}
.c-search_autocomplete__suggestion_item:hover {
background: #2D9EE0;
color: #ddd;
}
.texty_legacy.texty_single_line_input.focus,
.texty_legacy.texty_single_line_input:hover {
border-color: transparent;
}
.c-search__input_box__input:focus {
outline: none;
}
#search_container .search_input.focus,
#search_container .search_input:focus,
#search_container .search_input:hover {
color: #ddd !important;
background: transparent !important;
}
#search_container .search_input {
color: #ddd;
background: transparent !important;
border: 0px solid transparent !important;
}
.c-react_search_input:active .icon_search_wrapper *,
.c-react_search_input:active .search_input_wrapper *,
.c-react_search_input:focus .icon_search_wrapper *,
.c-react_search_input:focus .search_input_wrapper *,
.c-react_search_input:hover .icon_search_wrapper *,
.c-react_search_input:hover .search_input_wrapper * {
color: #ddd !important;
background: transparent !important;
border: 0px solid transparent !important;
}
.texty_legacy.texty_single_line_input {
background: transparent !important;
border: 0px solid transparent !important;
}
.texty_legacy.texty_single_line_input.focus,
.texty_legacy.texty_single_line_input:hover {
border: 0px solid transparent !important;
background: transparent !important;
}
.c-link--button:active,
.c-link--button:focus,
.c-link--button:hover {
color: #36D4F6 !important;
border: none !important;
}
.c-message_group .c-message_group__header:focus .c-channel_name,
.c-message_group .c-message_group__header:focus .c-channel_name__team_name,
.c-message_group .c-message_group__header:focus .c-message_group__header_date,
.c-message_group:hover .c-message_group__header .c-channel_name,
.c-message_group:hover .c-message_group__header .c-channel_name__team_name,
.c-message_group:hover .c-message_group__header .c-message_group__header_date {
color: #36D4F6 !important;
border: none !important;
}
.p-search_filter__date:first-child {
border-bottom: 1px solid #4B4B4B;
}
a:hover {
border-bottom: none !important;
text-decoration: none !important;
}
.c-menu_item__button,
.c-menu_item__button:link,
.c-menu_item__button:visited {
color: #252525 !important;
}
.c-menu_item__button:hover,
.c-menu_item__button:hover {
color: #ddd !important;
}
.c-message_group__header:active,
.c-message_group__header:hover {
text-decoration: none !important;
}
.c-search__input_box__clear {
color: #36D4F6 !important;
}
.c-search_modal .c-search__input_box__clear {
border-right: 1px solid #4B4B4B !important;
}
.c-file__meta {
background: transparent !important
}
.c-file__slide--meta {
background-color: #4B4B4B!important;
width: 110px;
color: #ddd !important;
}
#msg_input {
background: #424242!important;
}
.p-file_list__empty {
color: #ddd !important;
}
.searchable_member_list_filter .faux_input {
color: #ddd !important;
}
.p-channel_sidebar__badge,
.p-channel_sidebar__banner--mentions {
background: #fa623f !important;
box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5) !important;
}
.c-file_container {
background: #393939 !important;
max-width: 600px;
}
.p-file_list__empty {
background #222222 !important;
}
code {
color: #29ffe8!important;
}
.searchable_member_list_filter {
border-bottom: 1px solid #4B4B4B !important;
}
#client-ui #team_list_container .searchable_member_list_search {
border-bottom: 1px solid #4B4B4B !important;
}
.tab_container .star_item .message .star_jump.msg_right_link,
.tab_container .star_item ts-message .star_jump.msg_right_link {
color: #ddd !important;
}
#flex_contents .heading_text {
color: #ddd !important;
font-weight: bold;
}
.c-link--button {
color: #36D4F6 !important;
}
.p-file_upload_dialog__section input.c-input_text:focus {
background: transparent !important;
}
.c-input_character_count::after {
background: transparent !important;
}
.c-message_attachment__author--distinct {
color: #ddd !important;
}
#client_body {
position: relative;
}
#client-ui .searchable_member_list .team_list_item:hover {
background: #2c2c2c;
border-bottom: none !important;
}
a.file_download_link {
color: #ddd !important
}
a.file_download_link:hover {
color: #ddd !important
}
.slack_menu_download {
color: #ddd !important
}
.slack_menu_download ts-icon {
color: #ddd !important
}
.filetype_button:hover .file_download_label {
background: #545454;
color: #e6e6e6;
}
.filetype_button .file_title {
color: #e6e6e6;
}
.filetype_button .file_download_label {
background: #828282;
border-top: 1px solid #545454;
}
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload {
background: #393939 !important;
width: 40px;
color: #ddd;
}
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload.active .upload_plus_icon,
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload.focus-ring .upload_plus_icon,
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload:focus .upload_plus_icon,
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload:hover .upload_plus_icon {
color: #ddd !important;
}
.supports_custom_scrollbar .reply_input_container .ql-editor,
.supports_custom_scrollbar .reply_input_container .ql-placeholder {
padding: 8px 30px 9px 20px;
}
#threads_msgs .inline_message_input_container.with_file_upload .inline_file_upload .upload_plus_icon {
top: 15px;
}
.c-file__action_button:active,
.c-file__action_button:focus {
color: #e6e6e6 !important;
}
.c-file__action_button,
.c-file__action_button:link,
.c-file__action_button:visited {
color: #e6e6e6!important;
}
.c-pillow_file_container:focus-within .c-file__actions,
.c-pillow_file_container:focus .c-file__actions,
.c-pillow_file_container:hover .c-file__actions {
background: transparent !important;
}
.c-message--focus .c-message__image_container .c-file__actions,
.c-message__image_container:hover .c-file__actions {
background: transparent !important;
}
.p-file_details__meta_container .c-file__actions {
background: transparent !important;
}
.c-message__reply_bar--focus .c-message__reply_bar_view_thread,
.c-message__reply_bar:hover .c-message__reply_bar_view_thread {
background: #222222 !important
}
.c-deprecated_rounded_button:link,
.c-deprecated_rounded_button:visited {
color: #ddd !important;
}
.p-channel_sidebar__channel--unread:not(.p-channel_sidebar__channel--muted):not(.p-channel_sidebar__channel--selected) .p-channel_sidebar__name,
.p-channel_sidebar__link--unread .p-channel_sidebar__name,
.p-channel_sidebar__link--invites:not(.p-channel_sidebar__link--dim) .p-channel_sidebar__name {
color: #9BFFA1 !important;
}
.p-search_filter__date_readout {
color: #ffb28a !important;
}
.p-search_filter__date .c-icon--times-small {
margin-right: 10px;
margin-left: 10px;
}
.c-calendar_month__day_of_week_heading {
color: #ddd;
}
.c-date_picker_calendar__date {
background: white;
}
.c-calendar_view_header__stepper_btn,
.c-calendar_view_header__title_btn i {
color: #ddd !important;
}
.c-calendar_view_header__stepper_btn:hover,
.c-calendar_view_header__title_btn:hover {
background-color: #565656 !important;
}
.c-date_picker_calendar__date.c-date_picker_calendar__date--is_active:focus:not(.c-date_picker_calendar__date--is_selected),
.c-date_picker_calendar__date:not(.c-date_picker_calendar__date--disabled):not(.c-date_picker_calendar__date--is_selected):hover {
background-color: rgb(255, 110, 39) !important;
color: #ddd !important;
}
.c-date_picker_calendar__date--is_selected {
background-color: #0576b9 !important;
color: #ffffff;
}
.p-block_kit_date_picker_calendar_wrapper .c-date_picker_calendar__date--disabled,
.p-block_kit_date_picker_calendar_wrapper .c-mini_calendar__month_button:disabled {
background: #ffffff;
}
#team_tab #member_preview_scroller .feature_custom_status_expiry.member_details .member_name {
color: #ddd !important;
}
#member_preview_scroller a:not(.member_name):not(.current_status_preset_option):not(.member_details_manage_link):not(.current_status_presets_edit_link),
.team_list_item a:not(.member_name):not(.current_status_preset_option):not(.member_details_manage_link):not(.current_status_presets_edit_link) {
color: #ddd !important;
}
#team_tab #member_preview_scroller .feature_custom_status_expiry.member_details .member_action_bar .c-button:not(:first-child) {
color: #ddd !important;
}
.c-button--outline:active {
background: #e67a26 !important;
}
.c-button--outline:active {
box-shadow: inset 0 0 0 1px #ff5232 !important;
}
.c-button--outline:hover {
box-shadow: none !important;
background: green !important;
}
.rxn.user_reacted .emoji_rxn_count {
color: #ddd !important;
}
.rxn.rxn_add_btn .c-icon--small-reaction {
color: #6f6f6f !important;
}
ts-message .internal_member_link:hover {
color: #000000 !important;
}
#primary_file_button .ts_icon {
bottom: -5px;
}
#flex_contents .flexpane_tab_toolbar #search #team_filter .member_filter,
#flex_contents .flexpane_tab_toolbar #search #user_group_filter .member_filter {
background: transparent;
}
.c-message_list__day_divider__label__pill {
background: #222 !important;
top: 13px;
color: #ddd;
}
.c-message_list__day_divider__line {
border-top-color: #363636;
top: 13px;
}
#client-ui #team_list .team_list_item,
#member_preview_scroller .team_list_item {
border-bottom: 1px solid #545454 !important;
}
#client-ui #team_list .team_list_item:hover,
#member_preview_scroller .team_list_item:hover {
background: #2d2d2d !important;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type='url']:focus,
input[type=tel]:focus,
input[type=color]:focus,
input[type=search]:focus {
box-shadow: none !important;
}
.p-app_space_profile__info {
background: #222;
}
.supports_custom_scrollbar:not(.slim_scrollbar) #app_space_scroller_div,
.supports_custom_scrollbar:not(.slim_scrollbar) #archive_msgs_scroller_div,
.supports_custom_scrollbar:not(.slim_scrollbar) #msgs_scroller_div {
border-right: 0px !important;
}
.c-message__editor__input_container {
border-radius: 4px;
}
.c-message__editor__input--legacy.focus {
border-color: transparent;
background: #585858;
color: #ddd;
border-radius: 3px;
}
.c-menu_item__header,
.c-menu_item__header {
color: #ddd !important;
}
#im_browser #im_list_container:not(.keyboard_active).not_scrolling .im_browser_row:not(.disabled_dm):hover,
#im_browser .im_browser_row.highlighted {
background: black !important;
}
.c-calendar_view_header__stepper_btn {
background: orange !important
}
.c-react_search_input .ts_icon_times_small:active,
.c-react_search_input .ts_icon_times_small:focus,
.c-react_search_input .ts_icon_times_small:hover {
color: #ddd !important;
}
.unread_group .unread_group_header .unread_group_mark,
.unread_group .unread_group_header .unread_keyboard {
background: #339252 !important;
color: #ddd !important;
}
.p-threads_footer__input {
background: black;
}
.p-threads_footer__input .p-message_input_field {
border-color: transparent !important;
background: #4d4d4d !important;
color: #ddd !important;
}
.p-threads_footer__input .p-message_input_field.focus {
border-color: transparent !important;
background: #4d4d4d !important;
color: #ddd !important;
}
.p-threads_footer__input .p-message_input_field.focus~.p-message_input_file_button:not(:hover) {
border-color: transparent;
color: #ddd !important;
}
.p-threads_footer__input--legacy .p-message_input_field .ql-editor {
color: #ddd !important;
}
.p-threads_footer__input--legacy .p-message_input_file_button {
border: transparent !important;
}
.p-threads_footer__input--legacy .p-message_input_plus {
border: 1px solid transparent !important;
border-radius: 4px 0 0 4px;
background: #008952 !important;
}
.ql-editor [aria-label] {
color: #ddd !important;
}
.p-threads_footer__input--legacy .p-message_input_field {
min-height: 24px;
padding-left: 42px;
padding-bottom: 6px;
border-radius: 4px;
border-color: #868686;
background: black;
color: #ddd;
}
.p-threads_footer__input .p-message_input_plus .p-message_input_plus_icon {
transform: scale(1.11);
color: #ddd;
}
#reply_container .inline_message_input_container .message_input div,
#reply_container .inline_message_input_container textarea,
.reply_input_container .inline_message_input_container .message_input div,
.reply_input_container .inline_message_input_container textarea {
colo: white !important;
opacity: 1 !important;
}
.c-timestamp__label {
color: #ffb088 !important;
}
.c-message__sender {
color: #a4d677 !important
}
.c-dialog__footer .c-button {
background-color: #2ead5c;
color: #ffffff;
}
.btn_outline.hover,
.btn_outline:focus,
.btn_outline:hover {
background: black !important;
color: #ffffff !important;
}
.ql-editor[aria-label] {
color: #ddd !important;
}
.c-menu_item__icon {
color: rgba(162, 162, 162, 0.96);
}
.thrills_purple {
color: #ff3636!important;
}
.feature_channel_browser_dropdown .show_which_channels_container .lfs_input_container .selected {
color: #ffffff;
}
.feature_channel_browser_dropdown .channel_browser_sort_container .lfs_input_container .selected,
.feature_channel_browser_dropdown .show_which_channels_container .lfs_input_container .selected {
color: #ffffff;
}
.menu ul li a:not(.inline_menu_link) {
color: #e6e6e6 !important;
}
.ql-container.texty_single_line_input.focus,
.ql-container.texty_single_line_input:hover {
box-shadow: none !important;
}
.ql-container.texty_single_line_input.focus,
.ql-container.texty_single_line_input:hover {
color: #e6e6e6 !important;
}
.c-message__reply_bar:hover,
.c-message__reply_bar--focus {
background-color: #484848;
}
.c-message__reply_bar--focus .c-message__reply_bar_view_thread,
.c-message__reply_bar:hover .c-message__reply_bar_view_thread {
background-color: #484848 !important;
}
.c-dialog__cancel {
background: transparent !important;
}
.c-dialog__cancel:hover {
background: transparent !important;
}
.c-search_modal .popover>div,
.c-search_modal .c-search__input_box,
.c-search_modal:not(.c-search_modal--primarysearch) .popover>div,
.c-search_modal:not(.c-search_modal--primarysearch) .c-search__input_box {
background: #2b2c2e !important;
}
.c-card_carousel__text_section p {
color: #ddd;
}
.c-card_carousel__page_count {
color: black;
}
.c-file__slide--meta {
background-color: #393939 !important;
}
#admin_invites_add_row {
background: transparent;
border: transparent;
}
.p-file_upload_dialog__footer_cancel_all {
background: transparent !important;
}
.p-file_upload_dialog__footer_cancel_all:hover {
background: black !important;
}
.p-threads_flexpane__header_permalink,
.p-threads_flexpane__header_channel_name {
color: #36D4F6!important;
}
.c-message .c-button--primary {
background-color: #008952;
}
.c-message_kit__file__meta__text {
font-size: 12px;
color: #949494 !important;
}
.msg_input_btn {
background-color: #008952 !important;
}
.p-threads_footer__input--legacy .p-message_input_file_button {
background-color: #008952 !important;
color: #ddd;
}
.sli_briefing {
background: #222222;
}
.sli_briefing_preview__title {
color: #ddd;
}
.sli_briefing_preview {
background-color: #363636;
border: 1px solid #585858;
}
.sli_briefing_preview_container::after,
.sli_briefing_preview_container::before {
background: #222222;
border: 1px solid #737373;
}
.sli_briefing_preview__description_text {
color: #ddd;
}
.sli_briefing_preview__description_text b {
color: #2dffd1;
font-weight: 600;
}
.sli_briefing__message ts-message:not(.for_mention_display):not(.for_search_display):not(.for_top_results_search_display):not(.for_star_display) {
background-color: #313131;
border: 1px solid #000;
}
.sli_briefing_view__footer_title {
color: #ffffff;
}
.sli_briefing__justification {
color: #bfbfbf;
}
.sli_briefing__header {
border-bottom: 1px solid #000;
background-color: #3b3b3b;
}
.sli_briefing__title {
color: #ffffff;
}
.sli_briefing__feedback_controls {
color: #969696;
}
.channel_title .channel_name {
font-weight: bold !important;
}
.p-threads_flexpane__header .p-flexpane_header__children {
font-weight: 700;
}
.p-threads_view__default_background--first {
background: #323232 !important;
}
.p-threads_view__footer,
.p-threads_view_root {
border: 1px solid #000;
}
.p-threads_view_reply {
border: 1px solid #000;
}
.p-threads_view__default_background {
background: #323232;
}
.p_threads_view_load_newer_button,
.p_threads_view_load_older_button {
height: 32px;
line-height: 32px;
display: flex;
align-items: center;
background: #535353;
padding-left: 12px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
.c-channel_name__text--inline {
color: #36D4F6!important;
}
.p-threads_view__divider_label {
background: #323232;
color: #ddd;
}
.p-threads_view__divider_line {
border-top: 1px solid #323232;
}
.p-threads_view_header__participant_list {
color: #ddd !important;
}
.p-threads_view_reply--new_reply {
background: #535353;
}
.c-mrkdwn__highlight {
background: transparent !important;
}
.c-message_kit__background--labels {
background: #323232;
}
.c-icon_button--light,
.c-icon_button--light.c-button-unstyled,
.c-icon_button--light:link {
color: rgba(255, 255, 255, 0.7);
}
.c-icon_button--light.c-button-unstyled:hover,
.c-icon_button--light:hover,
.c-icon_button--light:link:hover {
color: #ffffff;
}
.c-fullscreen_modal__header {
background: #222222;
}
.p-prefs_modal .c-fullscreen_modal__body {
overflow-y: scroll;
background: #181818;
}
.p-prefs_modal__radiogroup label.p-prefs_modal__radiogroup--selected {
background: #383737;
border-color: #000000;
}
.p-prefs_modal__radiogroup label.p-prefs_modal__radiogroup--selected {
background: #383737;
border-color: #000000;
}
p {
color: #ddd;
}
textarea.c-input_textarea.c-input_textarea--with_hint {
color: #ddd;
}
.c-sidebar_menu__list li .c-link--button {
color: #ddd !important;
}
.p-prefs_modal__radiogroup .p-prefs_modal__radio_decorator {
background: #2b2b2b;
}
#footer_archives_preview {
background-color: #2f2f2f;
border-top: 1px solid #525252;
}
.c-archive_footer__metadata {
color: #ffffff;
}
.c-archive_footer__title {
color: #ffffff;
}
.c-message_kit__labels__text,
.c-icon,
.c-menu_item__link_icon,
.c-menu_item__shortcut {
color: #ddd;
}
.c-mrkdwn__highlight {
color: #ffe9b8 !important;
}
.c-action_buttons__button {
background: #242424;
border-right: 1px solid #000;
}
.c-action_buttons {
border: 1px solid #000;
}
.c-action_buttons__button:hover .c-action_buttons__icon {
color: #9d9d9d;
}
.c-action_buttons:hover {
border-color: #646464;
}
.c-pillow_file--full_width .c-pillow_file__header:link {
background: #232323;
}
.channel_header {
display: flex;
background: #222222;
}
.channel_title .channel_name {
color: #ffffff;
}
#footer {
background: #222222;
}
.p-channel_sidebar__name {
color: #ddd;
}
.texty_legacy.texty_single_line_input .ql-editor,
.texty_legacy.texty_single_line_input .ql-placeholder {
color: #ddd !important;
}
.p-flexpane_header__primary_content {
color: #ddd;
}
#flex_contents .heading {
border-bottom: none;
position: relative;
z-index: 50;
background: #222222;
}
#details_tab .channel_page_section {
background: #222222;
position: relative;
border-top: 1px solid #4c4c4c;
color: #ddd
}
#details_tab .channel_page_section .section_title {
color: #f7f7f7;
}
#details_tab .channel_page_section.expanded .section_content,
#details_tab .channel_page_section.expanded .ts_icon_caret_down {
display: block;
color: #ddd;
}
#details_tab .conversation_details .member_info_timezone {
line-height: 1.5;
padding: 11px 0 11px 11px;
border-top: 1px solid #4c4c4c;
font-size: 14px;
background: #222222;
color: #ddd;
}
#details_tab .conversation_details .member_info,
#details_tab .conversation_details .slackbot_info {
background: #222222;
}
.flex_content_scroller {
background: #222222;
}
.p-channel_sidebar__channel--selected,
.p-channel_sidebar__channel--selected:hover,
.p-channel_sidebar__link--selected,
.p-channel_sidebar__link--selected:hover {
background: #505050 !important;
}
.c-color_picker__container {
color: #ddd !important;
}
.c-color_picker__input[type=text] {
color: #ddd
}
.c-fullscreen_modal__header .c-fullscreen_modal__title {
margin: 0;
color: #ddd !important;
}
h1,
h2,
h3,
h4 {
color: #ddd !important;
}
.menu .menu_content {
background: #3e3e3e;
box-shadow: 0px 20px 20px 20px rgba(0, 0, 0, 0.2)
}
.menu_member_header .member_details .member_current_status,
.menu_member_header .member_details .member_timezone_value {
background: #5b5b5b;
color: #ffffff;
}
.menu_member_footer {
border-top: 1px solid #000
}
.p-multi_file_upload__add_file_btn {
color: #ddd !important
}
.c-message_list__unread_divider__label {
background: #f81111;
border: 1px solid transparent;
text-transform: capitalize;
}
.c-message_list__unread_divider__label {
color: #ddd;
padding: 3px 4px 4px;
margin: -8px 0 -7px 0;
}
.c-message_list__unread_divider--ghost .c-message_list__unread_divider__separator {
opacity: 1;
}
#col_messages {
box-shadow: inset 1px 0 0 0 #000;
}
#col_messages,
#client_header {
border-left: 1px solid #464646;
}
.flex_pane_showing #col_flex {
border-left: 1px solid #000;
box-shadow: inset 1px 0 0 0 #000;
}
.c-search_autocomplete__suggestion_item {
color: #ddd;
}
.c-tabs__tab.c-tabs__tab--active,
.c-tabs__tab:active {
outline: 0;
color: #ffffff;
}
.c-search__tab.c-tabs__tab.c-tabs__tab--active,
.c-search__tab.c-tabs__tab.c-tabs__tab--active:active,
.c-search__tab.c-tabs__tab.c-tabs__tab--active:focus {
border-radius: 0;
box-shadow: inset 0 -2px 0 0 #ff0000;
}
.c-message_group {
padding: 7px 12px 12px 12px;
border: 1px solid #000;
border-radius: 6px;
margin-bottom: 10px;
background-color: #4c4c4c;
}
.c-tabs__tab:hover {
color: #ddd
}
.p-search_filter__select {
color: #ddd
}
.c-message_group__header_view_label {
color: #ddd;
}
code {
background: black;
border: 1px solid black;
}
.c-menu.p-emoji_picker,
.p-emoji_picker__input_container,
.p-emoji_picker__heading,
.p-emoji_picker__list_container,
.p-emoji_picker__footer,
.menu #menu_items_scroller {
background: #3a3a3a;
}
.p-channel_sidebar__channel--selected {
background: #3a3a3a !important
}
#details_tab .channel_page_section .disclosure_triangle {
color: #ddd !important;
}
.fs_modal_file_viewer_header {
background-color: #424242;
}
.fs_modal_file_viewer_header .control_btn,
.fs_modal_file_viewer_header .control_btn:link,
.fs_modal_file_viewer_header .control_btn:visited,
.fs_modal_file_viewer_header a.control_btn,
.fs_modal_file_viewer_header a.control_btn:link,
.fs_modal_file_viewer_header a.control_btn:visited {
color: #ddd
}
.fs_modal_file_viewer_content .viewer {
background: #232323;
}
.channel_header_info_item.channel_header_member_status #header_status_message {
color: #ddd;
}
.channel_header {
box-shadow: inset 1px 0 0 0 #000;
}
.p-channel_insights .c-unified_member__title {
color: #adadad;
}
.channel_page_member_row:hover {
background-color: #424242;
border-color: #000000;
}
.btn_link:focus,
.btn_link:hover {
text-decoration: none;
}
.c-reaction {
background: rgb(118, 118, 118);
}
.c-reaction__count {
color: #ddd
}
.c-reaction_add {
opacity: 1 background:#656565;
}
.c-reaction:hover {
box-shadow: inset 0 0 0 1px rgb(58, 58, 58);
background: #868686;
}
.c-message_kit__labels__text,
.c-icon,
.c-menu_item__link_icon,
.c-menu_item__shortcut {
color: #949494;
}
input.c-input_text,
input[type=text].c-input_text,
input[type=password].c-input_text {
border: 1px solid #000000;
}
.p-emoji_picker__group_tab--active {
margin-bottom: -1px;
background: #515151;
padding-top: 3px;
border-bottom: 3px solid #ff5a5a;
}
.p-emoji_picker__preview_text {
font-size: .9rem;
line-height: .9rem;
padding: .6rem .7rem .8rem 0;
background: #3a3a3a;
color: #ffffff;
}
#details_tab .feature_sli_channel_insights .edit_purpose--blank {
color: #ddd;
}
pre {
background: black;
color: #ddd;
}
#menu li.team_pricing_info {
color: #ddd;
}
.c-search_autocomplete__suggestion_item .token {
border-radius: 2px;
background-color: hsl(39, 100%, 79%) !important;
}
.c-menu_item__button,
.c-menu_item__button:link,
.c-menu_item__button:visited {
color: #ddd
}
.c-menu {
box-shadow: 0px 20px 20px 12px rgba(0, 0, 0, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.5);
background-color: #444;
}
.light_theme ts-message.first:not(.feature_file_threads) .message_body,
.light_theme ts-message.selected:not(.feature_file_threads) .message_body {
color: #ddd
}
.star_item {
border-bottom: 1px solid #4a4a4a;
}
.tab_container .file_comment_item .actions .star,
.tab_container .file_list_item .actions .star,
.tab_container .star_item .message .actions .star,
.tab_container .star_item ts-message .actions .star {
background: black;
}
#footer {
box-shadow: inset 1px 0 0 0 #000;
}
.c-menu_item__button,
.c-menu_item__button:link,
.c-menu_item__button:visited {
color: #ddd !important
}
.c-menu_item__description {
font-size: 13px;
line-height: .9375;
color: #ababab;
}
.c-message--focus:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight),
.c-message--hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight),
.c-message:hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight) {
background-color: #232323;
}
.c-message_actions__container {
background: #000 !important;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3) !important
}
.c-message_actions__button:active {
background: #2b2b2b;
}
#flex_contents .subheading:not(:empty)#mentions_options {
background: #000;
border-top: 0;
border-bottom: 1px solid #000;
}
#flex_contents .help {
font-size: 1rem;
color: #ffffff;
line-height: 1.3rem;
padding-top: 1rem;
border-top: 5px solid #ea5218;
}
#menu.search_filter_menu label {
color: #ddd;
}
.channel_header .blue_on_hover:hover {
color: #ffffff;
}
.menu {
background: #414141;
}
#msg_input.focus,
#msg_input:focus {
border-color: #404040;
}
.mention_day_container_div .day_divider:before {
position: absolute;
margin-bottom: .75rem;
border-bottom: 1px solid #494949;
background: #232323;
}
.day_divider .day_divider_label {
background: #424242;
color: #ddd;
}
#edit_topic_trigger {
display: none;
visibility: hidden;
color: #ffffff;
}
.channel_header_info button {
color: #ddd;
}
.channel_header .blue_on_hover:hover {
color: #ddd;
}
#edit_topic_inner:before {
background: transparent;
border: 1px solid transparent;
color: #ddd
}
.p-message_pane__limited_history_foreword {
text-align: center;
padding-top: 24px;
padding-bottom: 32px;
color: #ffffff;
background-image: url(https://a.slack-edge.com/436da/img/wave.jpg);
background-position: 0 100%;
background-repeat: repeat-x;
background-color: #383838;
background-image: none;
}
.supports_custom_scrollbar:not(.slim_scrollbar) #messages_container:after {
background: none
}
#channel_topic_text {
color: #d8d8d8;
}
.close_flexpane:focus,
.close_flexpane:hover {
color: #ddd;
}
.close_flexpane {
color: #ddd;
}
.p-search_filter__option--suggestion,
.c-message_kit__labels__text,
.c-icon,
.c-menu_item__link_icon,
.c-menu_item__shortcut {
color: #ddd;
}
.c-calendar_view_header__stepper_btn:hover,
.c-calendar_view_header__title_btn:hover {
background-color: #4a3f3f !important;
color: #ddd;
}
.p-search_filter__checkbox_label--selected {
font-weight: 700;
color: #ddd;
}
.p-search_filter__option {
display: flex;
align-items: center;
margin-bottom: .375rem;
font-weight: 700;
line-height: inherit;
font-size: inherit;
color: #ddd;
}
.c-input_select_options_list__empty_state {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #ffffff;
}
#fs_modal .contents_container {
position: absolute;
background: #3c3c3c;
color: #ddd !important;
}
.ts_toggle .ts_toggle_secondary_label {
display: inline-block;
color: #ffffff;
}
.modal_input_note {
font-size: .8rem;
color: #ffffff;
}
.greigh {
color: #fda792!important;
}
#new_channel_modal input[type=text],
#new_channel_modal textarea,
.p-share_channel_dialog__contents input[type=text],
.p-share_channel_dialog__contents textarea {
font-size: 18px;
margin-bottom: 0;
background: transparent;
}
.lazy_filter_select .lfs_list_container {
display: none;
position: absolute;
z-index: 200;
width: 100%;
max-height: 250px;
top: 100%;
left: 0;
overflow: auto;
margin-top: 3px;
margin-bottom: 3px;
border: 1px solid #232323;
border-radius: 4px;
background: #232323;
}
.lazy_filter_select .lfs_list .lfs_item.selected,
.lazy_filter_select .lfs_list .lfs_item.selected .c-unified_member__current-status .prevent_copy_paste,
.lazy_filter_select .lfs_list .lfs_item.selected .c-unified_member__current-status--small:before,
.lazy_filter_select .lfs_list .lfs_item.selected .c-unified_member__display-name,
.lazy_filter_select .lfs_list .lfs_item.selected .c-unified_member__name,
.lazy_filter_select .lfs_list .lfs_item.selected .c-unified_member__secondary-name {
color: #9ac4e5;
}
.input_note_special {
font-size: .9rem;
line-height: 1.25rem;
color: #ffffff;
}
.btn {
text-shadow: none;
}
.plastic_select,
input[type=url],
input[type=text],
input[type=tel],
input[type=number],
input[type=email],
input[type=password],
select,
textarea {
color: #ddd;
}
.lazy_filter_select .lfs_list .lfs_item.active {
background-color: #000000;
border-color: #000000;
}
.subtle_silver {
color: #ffffff!important;
}
.black {
font-weight: 700 !important;
}
#details_tab .feature_sli_channel_insights .channel_created_section .creator_link,
#details_tab .feature_sli_channel_insights .channel_purpose_section .channel_purpose_text {
color: #ddd
}
.btn_link {
color: #b2ddff;
}
#channel_browser .channel_browser_row_header {
color: #ffffff;
}
#channel_browser #channel_list_container:not(.keyboard_active).not_scrolling .channel_browser_row:hover,
#channel_browser .channel_browser_row.highlighted {
background: #232323;
border: 1px solid #000000;
}
.sk_black {
color: #ffffff;
}
#channel_browser .channel_browser_channel_created_info,
#channel_browser .channel_browser_channel_invite_info,
#channel_browser .channel_browser_channel_shared_info,
#channel_browser .channel_browser_private_channel_rollup_info {
font-size: 13px;
line-height: 1.38463;
font-weight: initial;
color: #c0c0c0;
}
.channel_modal .channel_modal_filter_container input[type=text] {
width: 100%;
padding-left: 2.5rem;
padding-right: 12px;
padding-top: .65rem;
background: transparent;
}
#channel_browser .channel_browser_divider {
color: #ffffff;
font-size: 14px;
width: 100%;
padding: 4px 0 4px 12px;
font-weight: 700;
background: #000000;
}
#channel_browser .channel_browser_row {
border-top: 1px solid #676767;
}
#details_toggle.active,
#details_toggle.active:hover,
#recent_mentions_toggle.active,
#recent_mentions_toggle.active:hover,
#sli_recap_toggle.active,
#stars_toggle.active,
#stars_toggle.active:hover {
background: transparent;
color: #ffb400;
}
.c-message_list__day_divider__label__pill {
background: #474747 !important;
}
#im_browser .im_browser_row .im_display_name_container {
font-size: 13px;
line-height: 21px;
height: 21px;
color: #ddd;
}
#im_browser .im_browser_row {
width: 100%;
height: 64px;
cursor: pointer;
border: 1px solid transparent;
border-top: 1px solid #646464;
}
.c-unified_member__secondary-name--medium {
color: #b0b0b0;
}
#im_browser_tokens #im_browser_filter,
#im_browser_tokens .member_token {
margin-top: .25rem;
margin-right: 6px;
height: 26px;
line-height: 26px;
background: transparent;
}
.charcoal_grey {
color: #ffffff!important;
}
.alert {
padding: .75rem 1rem .75rem 3rem;
border: 1px solid #ddd;
background: #595959;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: none
}
.btn_link:focus,
.btn_link:hover {
color: #ffffff;
}
.uneditable-input,
input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=tel],
input[type=color],
input[type=search],
textarea {
border-radius: 0 !important;
background: #222222;
}
.searchable_member_list_filter .faux_input {
font-size: 1rem;
padding: .55rem .75rem .65rem;
border: 1px solid #3c3c3c;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
color: #1d1c1d;
background: #222222;
}
.searchable_member_list_filter {
padding: 1rem;
position: relative;
border-bottom: 1px solid #ddd;
background: #222222;
}
#client-ui .searchable_member_list .team_list_item {
padding: .75rem .5rem .75rem .75rem;
border-bottom: 1px solid #565656
}
#whats_new_tab p {
font-size: 13px;
line-height: 22px;
color: #ffffff;
}
.indifferent_grey {
color: #ddd !important;
}
.bottom_border {
border-bottom: 1px solid #525252;
}
.c-fullscreen_modal__body {
border-right: .25rem solid transparent;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
align-items: flex-start;
display: flex;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
line-height: 1.46666667;
overflow-y: auto;
padding: 15vh 32px 32px 32px;
color: #ffffff;
background: #3c3c3c;
}
.c-filter_input__input[type=text][placeholder] {
background: transparent;
text-overflow: ellipsis;
color: #ddd;
}
.c-link--button:active,
.c-link--button:focus,
.c-link--button:hover {
color: #ddd !important;
text-decoration: none
}
.p-help_modal__list__item:focus,
.p-help_modal__list__item:hover,
.p-help_modal__list__item__focus {
cursor: pointer;
outline: none;
background-color: transparent;
}
.p-help_modal__popular_topics {
color: #ffffff;
}
.p-shortcuts_flexpane__shortcut_title {
flex-grow: 1;
padding: 6px 0 6px 0;
color: #ffffff;
}
.p-shortcuts_flexpane__shortcut_hoverable .p-shortcuts_flexpane__shortcut_title {
color: #ffffff;
}
.p-help_modal__list__item {
border-top: 0
}
.p-help_modal__footer {
position: absolute;
bottom: 0;
padding: 1rem;
background-color: #161616;
}
#msg_input {
overflow: auto;
margin: 0;
width: 100%;
min-height: 42px;
height: 38px;
max-height: 180px;
border: 2px solid rgba(134, 134, 134, 0);
color: #fff;
}
#col_messages {
margin-left: 0;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
min-width: 1px;
box-shadow: inset 1px 0 0 0 #ddd;
background: #222222;
}
.unread_empty_state_message {
-webkit-transition: all .4s ease 0s;
-moz-transition: all .4s ease 0s;
transition: all .4s ease 0s;
font-weight: 900;
font-size: 24px;
line-height: 32px;
color: #ddd;
}
.p-shortcuts_flexpane__shortcut {
border-color: #3b3b3b;
}
.p-shortcuts_flexpane__shortcut:last-of-type {
border-bottom: 1px solid #46a091;
}
c-keyboard_key {
background: #646464;
padding: 2px 8px;
font-size: 13px;
font-weight: 400;
min-width: 24px;
height: 27px;
margin: 0 2px;
border-radius: 5px;
color: #ffffff;
}
.p-message_pane__foreword__description,
.p-message_pane__limited_history_alert {
color: #ffffff;
}
.modal {
background: #3c3c3c;
}
.c-button-unstyled:active,
.c-button-unstyled:focus,
.c-button-unstyled:hover {
outline: none;
}
.p-shortcuts_flexpane__shortcut_hoverable .p-shortcuts_flexpane__shortcut_title:hover {
text-decoration: none;
}
.c-message--focus:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight),
.c-message--hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight),
.c-message:hover:not(.c-message--highlight):not(.c-message--standalone):not(.c-message--pinned):not(.c-message--ephemeral):not(.c-message--custom_response):not(.c-message--starred):not(.c-message--sli_highlight) {
background-color: #3e3e3e !important;
}
.c-keyboard_key {
background: #575656;
padding: 2px 8px;
font-size: 13px;
font-weight: 400;
min-width: 24px;
height: 27px;
margin: 0 2px;
border-radius: 5px;
color: #ffffff;
}
.p-multi_file_upload__container .p-galler_scroller__wrapper {
background: #3c3c3c;
}
.c-dialog__body {
flex-shrink: 1;
overflow-y: auto;
padding: 0 24px;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
background: #222222;
}
#col_messages {
box-shadow: inset 1px 0 0 0 #000 !important;
}
.tab_container .star_item .message .star_jump.msg_right_link,
.tab_container .star_item ts-message .star_jump.msg_right_link {
background: black
}
[lang] .c-message_kit__message {
font-size: 13px;
color: #ddd;
}
.p-multi_file_upload__container .p-galler_scroller__wrapper {
border: none
}
.fs_modal_file_viewer_header .control_btn.active,
.fs_modal_file_viewer_header .control_btn:active,
.fs_modal_file_viewer_header .control_btn:focus,
.fs_modal_file_viewer_header .control_btn:hover,
.fs_modal_file_viewer_header a.control_btn.active,
.fs_modal_file_viewer_header a.control_btn:active,
.fs_modal_file_viewer_header a.control_btn:focus,
.fs_modal_file_viewer_header a.control_btn:hover {
color: #ddd;
}
.modal-footer {
background: #232323;
}
.modal label {
color: #ffffff;
}
.CodeMirror-scroll {
background: black;
color: #ddd;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
display: inline-block;
vertical-align: top;
margin-bottom: -30px;
background: #444446;
color: #ddd !important;
}
.CodeMirror .CodeMirror-linenumber {
color: #ffffff;
}
.lazy_filter_select.single .lfs_input_container:after {
color: #ddd;
}
#file_comment_textarea.texty_comment_input,
.comment_form .texty_comment_input,
.edit_comment_form .texty_comment_input {
background: #212121;
}
.btn {
background: #008952;
color: #fff !important;
}
.c-button-unstyled:active,
.c-button-unstyled:focus,
.c-button-unstyled:hover {
outline: none;
}
.c-menu_item__button--danger:hover {
background: #e01e5a !important;
}
.c-file__action_button {
background-color: hsla(0, 0%, 0%, 0.9);
}
.c-file__action_button,
.c-file__action_button:link,
.c-file__action_button:visited {
color: #ffffff!important;
}
.CodeMirror {
position: relative;
overflow: hidden;
background: #000;
}
.c-pillow_file__snippet__content .CodeMirror {
height: auto;
border: none;
color: #ffffff;
}
.c-pillow_file__snippet__content .CodeMirror-code>div:before {
color: rgb(255, 101, 101);
}
.p-channel_sidebar__section_heading_label--clickable:hover {
background: transparent
}
.c-message__label__highlight_title {
color: #ffffff;
font-weight: 700;
}
.c-message--sli_highlight .c-message__label__icon {
color: #ffd452;
}
.c-message--pinned,
.c-message--sli_highlight:not(.c-message--sli_highlight_negative),
.c-message--starred {
background: rgb(52, 54, 56);
border: 1px solid #edad37;
border-radius: 4px;
}
.c-search_autocomplete__suggestion_item .token {
border-radius: 2px;
z-index: 99999;
position: relative;
color: black;
}
.c-tabs__tab:hover {
color: #ddd;
background: transparent !important;
}
.p-search_filter__datepicker_trigger {
flex-grow: 1;
display: flex;
align-items: center;
padding: 8px 10px;
line-height: 24px;
font-size: 15px;
background: TRANSPARENT !important;
}
.c-message--highlight,
.c-message--highlight_yellow_bg {
background: #171614;
}
.c-message__editor__input--legacy {
background: #3f3f3f;
}
.c-menu_item__li:hover {
background: #0c77bb !important;
}
#msg_form .ql-editor,
#msg_form .ql-placeholder {
opacity: 0.4, color:white
}
.supports_custom_scrollbar .texty_legacy .ql-editor,
.supports_custom_scrollbar .texty_legacy .ql-placeholder {
color: #ddd !important;
}
.c-texty_input .ql-editor,
[lang] .c-texty_input .ql-placeholder {
color: #ddd !important
}
.c-presence--active {
color: #93cc93 !important;
}
select {
background: #232323;
}
.p-apps_browser__app_description,
.p-apps_browser__app_name {
color: #ddd;
}
p-apps_browser__app_limit_meter__paragraph {
color: #d8d8d8;
}
.p-apps_browser__category_header {
font-size: 1rem;
line-height: 1.2rem;
background: TRANSPARENT;
color: #ffffff;
padding-bottom: .5rem;
}
.p-apps_browser__app {
display: flex;
align-items: center;
padding: 11px 12px;
border: 1px solid transparent;
border-top-color: #6b6b6b;
}
.p-apps_browser__app--selected {
border-radius: 6px;
background: #2b2b2b;
border: 1px solid #000;
}
.p-apps_browser__app_limit_meter b {
color: #ffffff;
}
.p-apps_browser__app_limit_meter__paragraph {
color: #cecece;
}
.pinned_item .pinned_message_text {
line-height: 18px;
max-height: 90px;
overflow: auto;
position: relative;
padding-top: 2px;
color: #ddd;
}
.pinned_item .pin_member_name a,
.pinned_item .pin_member_title {
color: #ffb15e!important;
font-weight: 700!important;
}
.app_preview_link_slug,
.internal_member_link,
.internal_user_group_link {
background: #f1c877;
color: #000000 !important;
opacity: 1;
font-weight: 700;
padding: 0 4px;
border-radius: 3px;
}
.pinned_item .pinned_message_text .pin_truncate_fade {
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #343434), color-stop(1, rgba(255, 255, 255, 0)));
}
#client-ui .file_list_item.file_list_item--redesign {
flex-wrap: wrap;
margin-top: 0;
margin-bottom: .5rem;
padding: 12px 12px 8px;
border: 1px solid #6d6d6d;
}
.tab_container .file_list_item:focus,
.tab_container .file_list_item:hover {
background-color: #000;
}
.tab_container .file_list_item .actions .btn_icon {
background-color: #444;
}
.p-channel_page_apps__list__row:hover .p-channel_page_apps__list__row__wrapper {
background-color: #3c3c3c;
border-color: #000000;
}
.p-channel_page_apps__list__row:hover {
color: #ffffff;
}
.active .tab_container .file_list_item {
background-color: #000;
}
.tab_complete_ui {
background: #000000;
}
.tab_complete_ui .tab_complete_ui_header {
background: #383838;
}
.tab_complete_ui ul.type_members .unify_broadcast {
color: #ffe34b;
}
.p-file_upload_banner__progress {
border-radius: 6px;
width: 100%;
display: flex;
align-items: center;
background: #2b5043;
}
#select_share_channels .lazy_filter_select .lfs_value .lfs_item.selected {
height: 28px;
color: #ffffff;
}
.modal .close {
color: #ffffff;
}
.p-search_filter__checkbox_label {
color: #ddd;
}
.modal .close:hover {
color: #ddd
}
.c-label__text {
color: #ddd
}
#team_tab #member_preview_scroller {
width: 100%;
background: #222222;
}
#member_preview_scroller .member_data_table td,
#member_preview_web_container .member_data_table td,
.menu_member_header .member_data_table td {
color: #ddd;
}
hr {
border-top: 1px solid #575757;
}
.p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list.c-virtual_list--scrollbar>.c-scrollbar__hider:before,
.p-message_pane .p-message_pane__top_banners:not(:empty)+div .c-message_list:not(.c-virtual_list--scrollbar):before {
box-shadow: 0 32px #222222;
}
#team_tab #member_preview_scroller .member_details .member_title:not(:empty) {
color: #cccccc;
}
.p-custom_status_input__dialog .p-custom_status_input__preset_option_text {
color: wheat;
}
.c-dialog__close:hover {
color: #ffffff;
}
.c-alert--inline,
.c-alert--nested_box {
color: #e7e7e7;
}
[lang] .c-message_attachment__body {
color: wheat;
}
.c-message_kit__background--editing {
background: #3c3c3c;
}
.c-message__editor__emoji_circle_icon,
.c-message__editor__emoji_happy_icon,
.c-message__editor__emoji_smile_icon {
color: rgb(154, 154, 154);
}
.c-message__reply_bar_description {
position: relative;
margin-left: 8px;
color: #b1b1b1;
}
.c-message__reply_bar:hover,
.c-message__reply_bar--focus {
border: 1px solid black;
}
.c-select_button {
background-color: black
}
.c-select_button:active {
background-color: #000000;
}
.c-select_button:active .c-select_button__icon,
.c-select_button:hover .c-select_button__icon {
color: #ffffff;
}
.p-prefs_modal__notification_example.p-prefs_modal__notification_example--mac {
background: #5d5d5d;
}
#team_tab #member_preview_scroller .member_details .member_name {
color: #ddd !important;
}
hr {
border-bottom: 1px solid #424242;
}
.p-threads_flexpane__separator_line {
flex: 1;
margin: 1px 0 0 0;
border-top-color: rgb(0, 0, 0);
}
// Append this to /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
// ATTENTION: This file may get overridden by Slack app when the app gets updated =(
// Slack my modified dark theme
// https://gist.github.com/rafael-sa/b1f5f9ea37063427d3875c50c06a1a8e
document.addEventListener("DOMContentLoaded", function() {
// Then get its webviews
let webviews = document.querySelectorAll(".TeamView webview");
// Fetch our CSS in parallel ahead of time
const cssPath = 'https://gist.githubusercontent.com/rafael-sa/b1f5f9ea37063427d3875c50c06a1a8e/raw/5f973ceb53d4bb6c8b56d72f19c27c0f5c9c20fd/css-slack-dark.css';
let cssPromise = fetch(cssPath).then(response => response.text());
let customCustomCSS = ``
// Insert a style tag into the wrapper view
cssPromise.then(css => {
let s = document.createElement('style');
s.type = 'text/css';
s.innerHTML = css + customCustomCSS;
document.head.appendChild(s);
});
// Wait for each webview to load
webviews.forEach(webview => {
webview.addEventListener('ipc-message', message => {
if (message.channel == 'didFinishLoading')
// Finally add the CSS into the webview
cssPromise.then(css => {
let script = `
let s = document.createElement('style');
s.type = 'text/css';
s.id = 'slack-custom-css';
s.innerHTML = \`${css + customCustomCSS}\`;
document.head.appendChild(s);
`
webview.executeJavaScript(script);
})
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment