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

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:

tray_icon.png
tray_icon@2.png

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: