4

Slack themes are available in the web app using Stylish see https://userstyles.org/styles/browse?search_terms=slack

However there must be a way to use them on the Desktop application. What is the hack?

4 Answers 4

4

UPDATED LATEST! Slack desktop app now supports dark mode natively! Just got to preferences cmd+, and select Themes > Dark

UPDATED, previous hacks stopped working with release of 4.0.0.

This solution works as of July 18, 2019

see https://github.com/LanikSJ/slack-dark-mode

You may need to see instructions on https://github.com/LanikSJ/slack-dark-mode/issues/80

I will likely update this answer again when I have time to fork the repo I've posted above and improve upon it.

0
2

I've written a sort of small "plugin framework", where you just run a shell script to patch your slack install, and then you get the ability to enable any number of "plugins" I've written for the desktop app, one of which is a dark theme. There are instructions in the README if you'd like to load your own CSS files you've found elsewhere as well.

https://github.com/glajchs/slack-customizations

1

Here's my script to toggle between light and dark mode automatically at sunrise/sunset. Append the script at the end of /Applications/Slack.app/Contents/Resources/app.asar.unpacked/src/static/ssb-interop.js and don't forget to update the LOCATION based on your actual location.

document.addEventListener('DOMContentLoaded', async function() {
  // supply your location here, use e.g. https://www.latlong.net/ to find it
  const LOCATION = [50.075539, 14.437800]
  const MS_IN_DAY = 24 * 60 * 60 * 1000

  const initTheme = themeCssUrl => new Promise(resolve => $.ajax({
    url: themeCssUrl,
    success: css => {
      const styleJqueryEl = $('<style>').html(css).appendTo('head')
      const styleElement = styleJqueryEl[0]
      styleElement.disabled = true
      resolve(styleElement)
    }
  }))

  const loadTimeInfo = ([latitude, longitude]) => new Promise(resolve => $.ajax({
    // courtesy of https://sunrise-sunset.org/api
    url: `https://api.sunrise-sunset.org/json?lat=${latitude}&lng=${longitude}&formatted=0`,
    success: ({ results: { sunrise, sunset } }) => resolve({
      sunrise: Number(new Date(sunrise)),
      sunset: Number(new Date(sunset)),
      expires: Math.ceil(Date.now() / MS_IN_DAY) * MS_IN_DAY
    })
  }))

  const updateTheme = (styleElement, timeInfo) => {
    const now = Date.now()
    const { sunrise, sunset } = timeInfo
    styleElement.disabled = now >= sunrise && now < sunset
  }

  const darkModeStyle = await initTheme('https://raw.githubusercontent.com/mattiacantalu/Slack-Dark-Mode/master/dark-mode.css')
  let timeInfo = await loadTimeInfo(LOCATION)
  updateTheme(darkModeStyle, timeInfo)
  // can't simply `setTimeout` to the next update time - if the app is sleeping at that time, the call seems to be lost
  window.setInterval(async () => {
    if (Date.now() > timeInfo.expires) {
      timeInfo = await loadTimeInfo(LOCATION)
    }
    updateTheme(darkModeStyle, timeInfo)
  }, 5 * 60 * 1000)
})

Note that as this process directly modifies the application files, it needs to be repeated after every Slack update.

5
  • Pretty cool. You might want to not use the cdn.rawgit but rather just rawgit see github.com/rgrove/rawgit/blob/master/FAQ.md but basically because of caching. Another thing to keep in mind is that rawgit.com is in sunset mode. There's time, but I'll also need to update my code at some point. Dec 3, 2018 at 21:59
  • 1
    @lacostenycoder Thanks for the tip. You can't actually switch to just rawgit for this resource now, precisely because of the EOL. I've updated the URL to link directly to GitHub. (The limitation that rawgit aimed to overcome is irrelevant in this case anyway, as the fetched content is used as plain text.)
    – hon2a
    Dec 5, 2018 at 9:29
  • Yeah I saw the EOL notice. I switched to jsdelivr with the handy jsdelivr.com/rawgit tool. Dec 6, 2018 at 2:22
  • are you using jsdelivr? I seemed to have problems with it. Feb 15, 2019 at 20:19
  • 1
    @lacostenycoder No, I'm not. As explained in my previous comment, my patch can (and does) fetch directly from GitHub.
    – hon2a
    Feb 18, 2019 at 8:19
0

This answer does not solve the desktop app question but can be used as a browser only based solution.

  1. Use Chrome instead of downloadable Slack app
  2. Install Dark Reader chrome add-on
  3. Open Slack url (eg. https://team_name.slack.com/) in Chrome instead of app
3
  • 1
    Did you read the actual question? It specifically asks how to do this in the DESKTOP app. Dec 3, 2018 at 21:37
  • 1
    @lacostenycoder Yes I did read the question. I'm posting for folks that don't have the constraint of the desktop app. The steps I put are significantly easier than any convoluted hack done with Slack's desktop app. This is a community and the answer wasn't for you, but for folks that are willing to deal with a browser tab for the sake of convenience. Dec 4, 2018 at 23:23
  • There are other reason for using the desktop app other then just not being in a browser tab. So yeah, perhaps simplest, IF you don't need stand alone app. Your answer should be the answer to "How do I make almost any website night mode?" There is nothing specific to slack here. Dec 6, 2018 at 2:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.