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).
Update: Another Slack-in-the-browser tip: to activate the
"Threads" view with the keyboard, install the
Shortkeys
extension and map ctrl+alt+t to the following Javascript code.
document.getElementById("Vall_threads")
.querySelector("span.p-channel_sidebar__name").click()