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.

Is it just me, or this doesn't work anymore?

slackbot [12:27 PM]
*/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.

@nbau21 You can still use the trick mentioned above with SLACK_DEVELOPER_MENU.

@nbau21 You have two options now. (I can only confirm this works on MacOS).

Permanent Solution
Create the file (or open it if you've already created it for something else) /etc/launchd.conf. Append the line setenv SLACK_DEVELOPER_MENU true to that file (you probably have to be sudo). Then quit Slack (if it's running) and reopen it. You may have to restart your computer for this to work, but if you follow the Temporary Solution below you can avoid restarting.

Temporary Solution
In your terminal run the command launchctl setenv SLACK_DEVELOPER_MENU true. Then quit Slack (if it's running) and reopen it. That's all!

sadly @widget- 's solution no longer works on beta v3. love to find new alternatives.

They have replaced the webview's with BrowserView's and the above hack no longer works. But not all is lost as seen in widget-/slack-black-theme/issues/21 and it's now needed to add to Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js instead:

document.addEventListener('DOMContentLoaded', function() {
	const cssURI = 'https://gist.githubusercontent.com/gkostov/039fe18fac0c27a4350b274f83403dcb/raw/slack-dark-theme.css',
		codeMirrorThemURI = 'https://gist.githubusercontent.com/pdsullivan/32bad68541ccb66ae6d4948f7c9e88bb/raw/f22e0f5de5ff25d2c06337e8a0ea1ce25885b0e4/cobalt.css';  // also add the "cobalt" theme for the CodeMirror snippets

	Promise.all([cssURI, codeMirrorThemURI].map((file)=>{
		return fetch(file)
				.then( response => {
					return response.text();
				});
	})).then(files => {
		files[1] = files[1].replace(/cm-s-cobalt/g, 'cm-s-default')
		$("<style></style>").appendTo('head').html(files.join('\n'));
	});
});

and it's all back to normal ;-)

@gkostov, Thanks!

Is it possible to get the darker contrast theme working with this method?

I tried replacing const cssURI = 'https://gist.githubusercontent.com/gkostov/039fe18fac0c27a4350b274f83403dcb/raw/slack-dark-theme.css', with const cssURI = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css',, but that didn't work.

It did work for me when I tried here - both themes did load as I changed the uris.

Lots of solutions around the web seem to only partially work. Took a few bits from them and created what works for me.

Add this code (below) to the bottom of: Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

(I used laCour's slack night theme and then customized the elements I wanted by finding them in the Slack Dev tools.)

document.addEventListener('DOMContentLoaded', function() {

    let tt__customCss = `
        body, .channel_header, #footer, .channel_title_info, #channel_topic_text { background: rgb(0, 43, 54); }
        .c-message__body { color: rgb(153, 174, 177); }
        #team_menu, .p-channel_sidebar { background: #023f4e !important; }
        .c-presence--active {color: rgb(177, 202, 17) !important;}
        nav.p-channel_sidebar .p-channel_sidebar__channel--selected, .p-channel_sidebar__link--selected, .c-message_list__day_divider__label__pill, .p-message_pane .c-message_list.c-virtual_list--scrollbar > .c-scrollbar__hider:before { color: #eee !important; background: rgb(27, 139, 210) !important; }
        .c-message_list__day_divider__line { border-top-color: rgb(27, 139, 210) !important}
        #msg_input, #primary_file_button { background: rgb(2, 55, 68) !important; }
        #msg_form #msg_input { border-color: transparent; }
    `;
    $.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);
        }
    });
});

Hope it helps others!

Thanks focus97, looks great.

For all you windows app users, you can find that file at this location:

%LocalAppData%\Slack<latest>\resources\app.asar.unpacked\src\static\ssb-interop.js

i.e.
C:\Users<user>\AppData\Local\Slack\app-3.0.5\resources\app.asar.unpacked\src\static\

@focus97 thanks a lot - I also looked around a lot and your approach works the best so far. Thanks 🙇‍♂️

I don't have root nor sudo access on my Mac, so the solutions that involve editing a *.js file in /Applications/Slack.app/Contents/Resources/ aren't options for me.

Can someone please tell me is there any other option (that is known to be currently working)? I have the Slack app (Version 3.1.0) on my Mac. I went through the 5 steps in this Theming-Slack-OSX.md file (for step 2. I used the workaround described by this comment. As you can see by the following screenshot, for the most part Slack looks good, except the name of the room is missing (where I have the red arrow pointing to the circled area).

And more importantly than the room name being invisible in that one spot, I'd be all ears if anyone has any ideas how I can automate this (so the dark theme remains in place even after re-starting the Slack app on my Mac).

Any suggestions would be greatly appreciated. thank you!

---

UPDATE: fyi a co-worker helped me solve this:

I created the following on my Mac (so this env var is always exported)...:

$ cat /etc/launchd.conf
setenv SLACK_DEVELOPER_MENU true

...though it turns out that isn't needed, because I don't need to do step 3. after all, because I found a way to edit a Slack *.js file:

Before I gave up when it looked like only root can edit the file:

$ ls -l Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js
-rw-r--r--  1 root  wheel  2952 Apr  4 12:35 Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js

But I opened Finder, clicked Applications, right-click Slack, Show Package Contents, browse to Contents/Resources/app.asar.unpacked/src/static/ and then I edited the ssb-interop.js file.

I copied the code from https://github.com/widget-/slack-black-theme/blob/master/readme.md into that ssb-interop.js file. (Those instructions (from that readme.md) are for version 2.5.1, but I found with Slack version 3.1.0 that ssb-interop.js is actually the file that needs to be edited.) And in the "cdn.rawgit.com" URL I changed "/widget-/" to "/ViktorQvarfordt/", because personally I like that slightly different css better.

FWIW I tried the JS file edit and Slack stopped being able to get past the "Connecting to Slack" window.

@focus97 - I can't seem to give a thumbs up here, but your theme is superb. Thanks!

@focus97 - you are a lifesaver :)

@focus97, I've been LOVING your solution which worked for me until today. Wondering if there's an easy tweak to make it work again? I'm feeling blinded by the white background which has returned. Perhaps a class or id name was changed so the background color doesn't work anymore?

Note: Re-pasted your block of code into the ssb-interop.js file and restarted Slack just to be sure to no avail.

FYI - fix for the latest changes is here: laCour/slack-night-mode#73 (comment)

I get "/macgap.app.enabledevelopertools() is not a valid command." no matter what I do. I tried to set the SLACK_DEVELOPER_MENU env var in all the ways mentioned above.

I get "/macgap.app.enabledevelopertools() is not a valid command." no matter what I do. Tried to set the SLACK_DEVELOPER_MENU env var in all the ways mentioned above.

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