DEV Community

Cover image for Setup Dark Mode in Slack on MacOS
Nahue
Nahue

Posted on • Edited on • Originally published at nahuelhds.dev

1 2

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 rawgit.com links to jsdelivr.com.

Credits to this Gist.

First, configure the general theme 👨‍💻

  1. Close Slack
  2. Open this file /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
  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;}";
  $.ajax({
    url:
      "https://cdn.jsdelivr.net/gh/laCour/slack-night-mode@master/css/raw/black.css",
    success: function(css) {
      $("<style></style>")
        .appendTo("head")
        .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:
#171717,#404245,#424242,#ECF0F1,#4A4A4A,#FAFAFA,#2ECC71,#00A362

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay