Dark theme for slack

slack-minimal-dark-theme.css

form#msg_form {
    margin: 0px 0px -22px 0px;
}

div#msg_input,
button#primary_file_button {
    border-radius: 0px;
    border-color: rgba(000, 000, 000, calc(32/256)) !important;
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
}

body {
    filter: invert(.85) !important;
}

.client_channels_list_container {
    filter: contrast(1.5) invert(1) ;
}

.client_main_container figure,
.client_main_container code,
.client_main_container .message_icon > a.member_preview_link,
.client_main_container a[rel="noreferrer"],
.client_main_container a[href^="mailto"],
.client_main_container a.internal_member_link,
.client_main_container a span.file_preview_link,
.client_main_container .emoji-outer.emoji-sizer {
    filter: invert(1) !important;
}

.client_main_container a.internal_member_link {
    background-color: rgba(255, 255, 255, calc(64/256));
    color: rgba(224, 224, 255, 1);
}

.client_main_container code {
    border-color: rgba(255, 255, 255, calc(127/256));
    background-color: rgba(255, 255, 255, calc(32/256));
    color: rgba(255, 64, 64, 1);
    padding: 2px 3px;
}

After launching slack by doing

export SLACK_DEVELOPER_MENU=true
open -a /Applications/Slack.app

Open an inspector for your team, then paste this into the console..unfortunately i haven't found a good way to automate this yet.

const cssURI = 'https://gist.githubusercontent.com/dmland/2f432fe021283f92de96bec00c474989/raw/320bfd71e2ae1d34f176a83baf5b28795179ce73/slack-minimal-dark-theme.css';

fetch(cssURI)
  .then(response => { 
    return response.text()  
  })
  .then(css => {
    let style = document.createElement('style')
    style.innerHTML = css

    document.body.appendChild(style)
  })

in a inspector in order to apply the theme to the team.