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 👨💻
- Close Slack
- Open this file
/Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
- 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 💅
- Go to Preferences / Sidebar
- At the end of that page, choose to set a custom color
- 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
Top comments (0)