How to opt-in (or opt-out) of Slack's new UI

Slack's new UI hits pretty different. Since it's rolling out slowly, being in multiple organisations is quite jarring as it impacts organisation-switching the most.

Luckily, it's still possible to opt-in, or opt-out, on a per-organisation basis.

Enable Developer mode

If you haven't already, enable developer mode by setting the SLACK_DEVELOPER_MENU environment variable to true.

  • On macOS or Linux, this could mean adding SLACK_DEVELOPER_MENU=true in your profile, and then restarting Slack.
  • And for macOS specifically, running launchctl setenv SLACK_DEVELOPER_MENU true in a terminal will work until you log-out of your Mac, or switch it off.
  • In Windows environments, if you're uncomfortable with setting environment variables, then something like this will work.

Next, open the inspector. It should now appear under "View" -> "Developer" -> "Toggle DevTools". Or if you're used to a Google-Chrome-like browser, do whatever you normally do to open the inspector (Cmd+Shift+I on a Mac).

To enable the new UI

Open the inspector, and execute this code in the console: (Or, have a read of what it's doing, at the bottom of this post first!)

localStorage.setItem("localConfig_v2", (() => {
    const isEnabled = true
    const settings = JSON.parse(localStorage.getItem("localConfig_v2"))
    settings.is_unified_user_client_enabled = isEnabled
    Object.values(settings.teams).forEach(team => team.is_unified_user_client_enabled = isEnabled)
    return JSON.stringify(settings)
})())

Repeat this on every organisation you want to enable the new UI for, and then refresh.

To disable the new UI

Open the inspector, and execute this code in the console: (Or, have a read of what it's doing, at the bottom of this post first!)

localStorage.setItem("localConfig_v2", (() => {
    const isEnabled = false
    const settings = JSON.parse(localStorage.getItem("localConfig_v2"))
    settings.is_unified_user_client_enabled = isEnabled
    Object.values(settings.teams).forEach(team => team.is_unified_user_client_enabled = isEnabled)
    return JSON.stringify(settings)
})())

Repeat this on every organisation you want to enable the new UI for, and then hit refresh.

What is the code doing?

  1. First we read the current localConfig_v2 item in localStorage, and deserialise it from JSON.
  2. We add or change a property called is_unified_user_client_enabled which is the feature-flag that Slack are using for the new UI.
  3. We iterate over all teams (or organisations) that you're in, and add or change another property is_unified_user_client_enabled which is the feature-flag that Slack are using for the new UI
  4. We then serialise the settings object back into JSON.
  5. All of this is wrapped in an Immediately-Invoked-Function-Expression, mostly so it's easy to copy-and-paste.
  6. Finally, we write the newly serialised and modified settings object back into localConfig_v2

Why do we have to repeat this per-organisation? Well: Slack keeps one of these configurations for every organisation you're in, as localStorage is scoped to a browser origin, and each Slack organisation is a different browser origin.

That's it!

Credit to Ændra for pointing in the right direction!

Before you go, if you're here via social media: Please leave a like, reply or repost. It really helps with reach!

Topics:

Read Next

© Alex Wilson 2024