Dark Mode is finally here, Martha.

Slack is a staple app in the modern workspace, especially remote companies.With more than 10 million users, you’d think that Slack will have a night mode feature baked in its software.

But sadly no. If you use Slack, you had to have found it annoying to browse through Slack threads at night. You may also be one of those people who prefer a darker-color UI, for which…respect.

Only recently has Slack rolled out Dark Mode out of beta. In this post, we’re looking at how to enable Dark Mode on Slack in both iOS and Android apps. We’ll also take a look at how to do it on Windows 10 and Mac apps.

Enable Slack’s Dark Mode on iOS and Android

To enable Dark Mode on Slack in your iPhone, you’ll need to tinker with your app’s settings. Follow the settings listed below.

  • Launch the Slack app
  • Swipe left to pull up a menu. Tap “Settings”.
  • Under “Settings”, find the toggle for Dark Mode and turn it on.
  • Done!

As for turning on Dark Mode in your Android smartphone, you’ll need to change the following settings.

  • Launch the Slack app
  • On the upper-left corner, you’ll see a vertical ellipsis icon. Tap that.
  • From the dropped down menu, tap “Settings”
  • Find the Dark Mode toggle and turn it on.
  • Done!

Enable Slack’s Dark Mode on Windows 10 and Mac

Slack has yet to release an official Dark Mode for its desktop apps, but I’d imagine is next on their list. For now, users who are enthusiastic about a dark-colored Slack will have to make do with workarounds such as widget-‘s absolutely phenomenal (unofficial) slack-dark-mode Git.

There’s a pretty straightforward tutorial in the GitHub page, too. But basically, to install the Dark Mode UI, you need to update a specific .js code from Slack’s directory.

How to Enable Dark Mode on Slack in iOS and Android

Find your Slack’s application directory.

  • Windows: %homepath%\AppData\Local\slack\
  • Mac: /Applications/Slack.app/Contents/
  • Linux: /usr/lib/slack/ (Debian-based)

Open up the most recent version (e.g. app-2.5.1) then open resources\app.asar.unpacked\src\static\index.js

For versions after and including 3.0.0 the same code must be added to the following file: resources\app.asar.unpacked\src\static\ssb-interop.js

Then, at the very bottom of the code, add:

// First make sure the wrapper app is loaded
document.addEventListener("DOMContentLoaded", function() {

   // Then get its webviews
   let webviews = document.querySelectorAll(".TeamView webview");

   // Fetch our CSS in parallel ahead of time
   const cssPath = 'https://cdn.rawgit.com/widget-/slack-black-theme/master/custom.css';
   let cssPromise = fetch(cssPath).then(response => response.text());

   let customCustomCSS = `
   :root {
      /* Modify these to change your theme colors: */
      --primary: #09F;
      --text: #CCC;
      --background: #080808;
      --background-elevated: #222;
   }
   `

   // Insert a style tag into the wrapper view
   cssPromise.then(css => {
      let s = document.createElement('style');
      s.type = 'text/css';
      s.innerHTML = css + customCustomCSS;
      document.head.appendChild(s);
   });

   // Wait for each webview to load
   webviews.forEach(webview => {
      webview.addEventListener('ipc-message', message => {
         if (message.channel == 'didFinishLoading')
            // Finally add the CSS into the webview
            cssPromise.then(css => {
               let script = `
                     let s = document.createElement('style');
                     s.type = 'text/css';
                     s.id = 'slack-custom-css';
                     s.innerHTML = \`${css + customCustomCSS}\`;
                     document.head.appendChild(s);
                     `
               webview.executeJavaScript(script);
            })
      });
   });
});

As you can see, you can easily customize the look and feel of the UI. If you know a bit of CSS, you’ll be able to implement changes to the app.

Here are just some of the possible themes you might like.

How to Enable Dark Mode on Slack in iOS and Android

It’s worth noting that you need to deploy this change every time you update the Slack app. Click here to check out widget-‘s Git.

Why enable Slack’s Dark Mode?

Dark Mode is inherently beneficial, especially for users who use specific apps within long stretches of time like Slack. For one, it’s easier on the eyes. And, with smartphones having high-quality OLED screens, the “dark mode” has morphed into a more functional (e.g. battery-saving) feature.

As for Slack’s official mobile Dark Mode, it looks great. The typography pops even better in my testing, and it’s much more pleasant to use now even at night.

With this development, I’m personally excited about where Slack is taking matters as far as UI is concerned.

Get Slack
Slack
Slack
Price: Free
Slack
Slack
Price: Free
Slack
Slack
Developer: Slack Technologies Inc.
Price: Free
No more articles