Dark theme for slack

slack-dark-theme.css

#msgs_scroller_div::-webkit-scrollbar-track, #client_body::before, .client_container, 
#search_terms, #client_body, #footer, ts-message, .channel_header, ts-jumper ts-jumper-container,
ts-jumper input[type="text"] {
  background: #282c34 !important;
}

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

ts-message, .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: #eee !important;
}

.light_theme ts-message .message_content .message_sender, #msg_input::-webkit-input-placeholder,
ts-jumper input[type="text"]::-webkit-input-placeholder {
  color: #aaa !important;
}

#msg_input, #primary_file_button {
  background: transparent !important;
  color: #eee !important;
  border-color: #444 !important;
}

.day_divider .day_divider_label {
  color: #eee !important;
}

.day_container .day_msgs {
  border-top: 1px solid #1a2129 !important;
}

ts-message:hover, .day_divider .day_divider_label {
  background: #1A2129 !important;
}

#messages_container::after {
  background: none !important;
}

.bot_label { 
  padding: 0 4px !important;
  border-radius: 3px !important;
  background: #0a233a !important;
}

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/bradens/0ec8b48488e0071bdee947964b45353a/raw/04ccd66477fb78963d221cfd40580ddaf1133fcb/slack-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.

hello. thanks for making this.

I tried it out today with the Slack app (Version 3.1.0) on Mac, and it works for the most part, but the "This is the very beginning of your direct message history with" text isn't visible (as shown by the following screenshot). Do you by chance have any ideas of how to fix this?
And this screenshot doesn't show it, but much of the text written in a room is missing - overall what i tried here worked better.

And I'd be all ears if there's a way to automate this (without editing *.js Slack files on my Mac - because I don't have root/sudo access) so the dark theme remains in place even after re-starting the Slack app on my Mac.

thanks!