Electron tray icon change depending on dark theme?

You should be using a template image (only black and clear colors): https://github.com/electron/electron/blob/master/docs/api/native-image.md#template-image

That way macOS automatically adjusts your tray icon to be black when on normal theme, and white when on dark theme.

Ensure the filename ends in Template.png or it won't work! Also include a @2x.png version if you target hi-dpi devices.

So your folder would look like:

.
├── main.js
├── IconTemplate.png
└── [email protected]

Then in your main.js:

const {Tray} = require('electron')
appIcon = new Tray('./IconTemplate.png')

Tags:

Electron