Slack app (mac) custom theme technique

slack_app_theme_instructions.md

Theming Slack for OSX

(revised)

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.

build custom css

1. Open up Slack.app
2. From the slack main menu: view/developer/toggle webapp Devtools
3. Right click any element in the app (except the team switcher on the left), and choose Inspect Element
4. use this to build up your custom element styles
5. When you are done, shut down Slack

edit a file inside slacks app(mac)

This persists across restarts/reloads (but probably not across app updates):

  1.  Find Slack.app (usually in /Applications folder)
  2.  Right click and select “Show Package Contents”
  3.  Navigate to Contents/Resources/app.asar.unpacked/src/static
  4.  Open ssb-interop.js for editing

Add this code (below) to the bottom of the file:

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

    let tt__customCss = `
    // custom inline css goes here...open the dev tools as described above...
    // from the slack menu: view/developer/toggle webapp Devtools
    // the interface is just like a browser....just select the elements you want and make up your styles
    // then place them below here this line
    
    `;
    $.ajax({
        url: 'https://gist.githubusercontent.com/thefonso/8ba7f36a14e7be4c4568f8520f0cd4c0/raw/ac87b397e0b6f080ef306d151518d66f90d0bb14/slack-dark-theme.css',
        success: function(css) {
            $('<style></style>').appendTo('head').html(css + tt__customCss);
        }
    });
});

NOTE: You can create your own larger CSS file as a gist and point to it as I have in the $.ajax section

restart Slack

1. at your terminal prompt...
2. $ export SLACK_DEVELOPER_MENU=true
3. $ open /Applications/Slack.app

Respect:

This gist is based off of DrewML's older document, outdated at the time of this documents creation, I used the notes found in the comments section to compile this gist.