DEV Community

Cover image for Setup Dark Mode in Slack on MacOS

Posted on • Updated on • Originally published at

Setup Dark Mode in Slack on MacOS

July 2019 update 😭

The Slack version 4.0.0 is not compatible with this solution. Need to investigate and if we can do this in this version as well.

June 2019 update 💁‍

  • Added a bonus step at the end (on my blog only), for automating the dark theme implementation with a simple double-click. 😁
  • Dark mode has arrived for mobile apps. Read it in the Slack blog itself. Desktop dark mode still in progress. Hopefully we can use this little hack here.
  • Updated the links to

Credits to this Gist.

First, configure the general theme 👨‍💻

  1. Close Slack
  2. Open this file /Applications/
  3. Append this at the very bottom
document.addEventListener("DOMContentLoaded", function() {
  let tt__customCss =
    ".menu ul li a:not(.inline_menu_link) {color: #fff !important;}";
    success: function(css) {
        .html(css + tt__customCss);

Second, choose a proper sidebar theme 💅

  1. Go to Preferences / Sidebar
  2. At the end of that page, choose to set a custom color
  3. Paste this custom theme:

You can see other sidebar themes at Slack Theme. The one I chose is Green Lantern.

Enjoy the darkness 😈

That’s it. You can now open Slack and see the results!

¡Bonus step! Automatize this 🤓

Every time Slack makes a little update, you’ll need to manually add that little script again and again.

Well, not anymore. Read it on my blog

Discussion (0)