Theming Slack for OSX

Theming-Slack-OSX.md

Theming Slack for OSX

So, you love Slack, but you hate applications with large white backgrounds? Why not use Dark Mode!

Unfortunately, Slack does not have a Dark Mode, although it's on their list of possibilities.

But, don't fret - there is a solution! Because the slack native desktop apps are just wrappers around a web app, we can inject our own CSS to customize the application to our liking.

How to (OSX Only)

Prerequisite Your custom CSS needs to be hosted somewhere accessible over HTTP. For a free option, you can use a Gist and use the link to the raw file.

1. Open up Slack.app, and navigate to any message;
2. In the message input field, enter /macgap.app.enabledevelopertools(), and press enter
3. Right click any element in the app (except the team switcher on the left), and choose Inspect Element
4. Open the Console tab
5. Run the following snippet of JavaScript in your console, replacing the value of cssURI with the URI that points to your custom stylesheet.

// Using ajax rather than a dynamically injected <link>, to account for sites (like gist.github.com) that don't serve
// a content-type for CSS files
var cssURI = 'https://gist.githubusercontent.com/DrewML/f244d6015c9b690b1dc241669b69dde1/raw/3d6351b8767ee5fba1ac86cad9b8cc5cf2ff9fea/slack-theme.css';
$.get(cssURI).then(function(css) {
   $('<style />').text(css).appendTo('body')
});

Example Dark Theme

Writing your own theme

If you know the basics of CSS and browser developer tools, writing a theme should be a breeze. You can either use the Developer Tools exposed in the Slack application itself, or you can visit https://{myteamhere}.slack.com/messages and use the browser dev tools of your choosing.

The part that's a bummer

Because you're just injecting styles in the DOM, this means that your changes do not persist when you exit and re-open the application. However, the Developer Tools will remember the last code you executed, so it should be a few keystrokes to open the panel and re-run your injection script.

Use this instead.

@danilodequeiroz That works great. Thanks for that. Incredible that Slack has not properly addressed this yet.

@danilodequeiroz that's fantastic; however, I think it'd be better if your link color (and maybe tags as well) was changed to #0000EE instead of the stale gray that it currently is. Again, just my opinion - but I think a lot of people would like it better.

If using the solution provided by @danilodequeiroz, you'll notice the menu links are hard to see. Use the following script to make the text white:

document.addEventListener('DOMContentLoaded', function() {
  let tt__customCss = `.menu ul li a:not(.inline_menu_link) {color: #fff !important;}`
  $.ajax({
      url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
      success: function(css) {
          $("<style></style>").appendTo('head').html(css + tt__customCss);
      }
  });
});

Just want to say that this is awesome, just what I was looking for. Thanks so much for sharing.

Legend, finally my eyes can rest on Mojave. 😃

I wrote a script I can run each time Slack updates: https://gist.github.com/ryanpcmcquen/8a7ddc72460eca0dc1f2dc389674dde1

@danilodequeiroz worked immediately! Amazing!

@danilodequeiroz thank you!

/macgap.app.enabledevelopertools() is not a valid command. In Slack, all messages that start with the "/" character are interpreted as commands.

If you are trying to send a message and not run a command, try preceding the "/" with an empty space.

What can I do?

@XLPI
Just got the same. I did an update and... :(
Commenting to follow while I dig into it a bit.

https://gist.github.com/focus97/21a8b7f130f0afd0b26f0d84f3a02d2b