Search code examples
macoselectronmacos-catalinadocktray

Provide different Dock and Tray icons for Electron based App on Mac?

I was researching a bit and so far only found resources about template images but not a definite guide. I'm building an Electron app (Electron 8.0). I do have customized icons for dark as well as regular mode.

I know that I can provide high-dpi icons like this:

It's similar within the icns file for the Dock icon. I was wondering whether I can do the same for dark vs. regular mode icons.

How do I need to prepare/name my icons so that macOS Catalina picks up different icons for the Tray as well as the Dock whether it is running on regular or on dark mode?

Do I need to implement some logic to switch the icons programmatically? How would such logic be execute when my Electron app isn't running but the theme is switched?

Solution

  • Programmatically, this can be easily implemented

    const { nativeTheme } = require('electron')

nativeTheme.on('updated', function theThemeHasChanged () {
  updateMyAppTheme(nativeTheme.shouldUseDarkColors)
})

// set tray & dock images here
function updateMyAppTheme(isDark) {
  tray.setImage(isDark? darkTrayImagePath : lightTrayImagePath)
  dock.setIcon(isDark? darkDockImagePath : lightDockImagePath)
}

    Relevant docs: