Removing obnoxious colours from Slack with Stylus

By Abhijit Menon-Sen <>

I have to use Slack at work, and the obnoxious bright colours it uses for people's names in the “Compact” message view have always annoyed me. Today I finally did something to get rid of them.

I open the Slack web site in Chrome, rather than using the desktop app. There are some Chrome extensions that tweak the Slack web UI, but they either do too much, or have drifted out of date with the Slack CSS and do nothing at all.

The open source Stylus extension (available for both Chrome and Firefox) makes it easy and convenient to inject custom CSS into web pages. After installing the extension, I clicked its toolbar icon and opted to "Write style for" app.slack.com.

A few minutes of playing around in the “Developer Tools” pane gave me the following CSS, which I pasted into the Stylus editor:

/* Use only a sober blue for all names in conversations */
.c-message__sender_link {
    color: #447 !important;
    font-weight: lighter;
}

/* Highlight @mentions, leave other @nicks alone */
.c-member_slug--link { background: #fff; }
.c-member_slug--mention { background: #ffc; }

/* Don't colour text inside preformatted blocks */
.c-mrkdwn__code { color: black !important; }

It's hardly sophisticated, but it gets rid of the dazzling panoply of colours in the main conversation view. Best of all, it's easy to add more rules to tweak other parts of the UI.

Of course, any other method to inject CSS would also work, but Stylus is easier than, say, Tampermonkey (which I also use and like, but is better suited to running arbitrary JavaScript code).