fix(tray): Add dark theme icon for Mac

Signed-off-by: Grigorii K. Shartsev <[email protected]>

scripts/generate-icons.js

@@ -31,7 +31,8 @@ const icongen = require('icon-gen')
 async function generateIcons() {
 	const originalPath = path.join(__dirname, '../img/talk-icon-rounded.svg')
 	const originalMacPath = path.join(__dirname, '../img/talk-icon-mac-shadow.svg')
-	const originalMacTrayPath = path.join(__dirname, '../img/talk-icon-plain.svg')
+	const originalMacTrayLightPath = path.join(__dirname, '../img/talk-icon-plain-light.svg')
+	const originalMacTrayDarkPath = path.join(__dirname, '../img/talk-icon-plain-dark.svg')
 	const outputPath = path.join(__dirname, '../img/icons')
 
 	await icongen(originalPath, outputPath, {
@@ -56,10 +57,16 @@ async function generateIcons() {
 		},
 	})
 
-	await icongen(originalMacTrayPath, outputPath, {
-		// Mac
+	// Tray icon - Mac
+	await icongen(originalMacTrayLightPath, outputPath, {
+		favicon: {
+			name: 'icon-tray-mac-light',
+			pngSizes: [16, 32],
+		},
+	})
+	await icongen(originalMacTrayDarkPath, outputPath, {
 		favicon: {
-			name: 'icon-tray-mac',
+			name: 'icon-tray-mac-dark',
 			pngSizes: [16, 32],
 		},
 	})
@@ -72,9 +79,11 @@ async function generateIcons() {
 	// Remove unused favicon
 	await fs.unlink(path.join(outputPath, 'favicon.ico'))
 
-	// Rename icon-tray-mac16.png -> icon-tray-mac.png, icon-tray-mac32.png -> [email protected]
-	await fs.rename(path.join(outputPath, 'icon-tray-mac16.png'), path.join(outputPath, 'icon-tray-mac.png'))
-	await fs.rename(path.join(outputPath, 'icon-tray-mac32.png'), path.join(outputPath, '[email protected]'))
+	// Rename icon-tray-mac-(light|dark)16.png -> icon-tray-mac-(light|dark).png, icon-tray-mac-(light|dark)32.png -> icon-tray-mac-(light|dark)@2x.png
+	await fs.rename(path.join(outputPath, 'icon-tray-mac-light16.png'), path.join(outputPath, 'icon-tray-mac-light.png'))
+	await fs.rename(path.join(outputPath, 'icon-tray-mac-light32.png'), path.join(outputPath, '[email protected]'))
+	await fs.rename(path.join(outputPath, 'icon-tray-mac-dark16.png'), path.join(outputPath, 'icon-tray-mac-dark.png'))
+	await fs.rename(path.join(outputPath, 'icon-tray-mac-dark32.png'), path.join(outputPath, '[email protected]'))
 }
 
 generateIcons()

src/shared/icons.utils.js

@@ -19,13 +19,21 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+const { nativeTheme } = require('electron')
+
 const icons = {
 	tray: {
-		darwin: require('../../img/icons/icon-tray-mac.png'),
+		darwin: {
+			light: require('../../img/icons/icon-tray-mac-light.png'),
+			dark: require('../../img/icons/icon-tray-mac-dark.png'),
+		},
 
 		// This property is not used, but import is required to add the icon to the bundle.
 		// It will be used by electron internally
-		darwin_x2: require('../../img/icons/[email protected]'),
+		darwin_x2: {
+			light: require('../../img/icons/[email protected]'),
+			dark: require('../../img/icons/[email protected]'),
+		},
 
 		win32: require('../../img/icons/icon.ico'),
 
@@ -37,11 +45,12 @@ const icons = {
  * Get tray icon for the given platform
  *
  * @param {'darwin'|'win32'|'cygwin'|string} [platform] platform otherwise current process.platform is used
+ * @param {'light'|'dark'} [theme] theme for the darwin platform
  */
-function getTrayIcon(platform) {
+function getTrayIcon(platform, theme) {
 	switch (platform ?? process.platform) {
 	case 'darwin':
-		return icons.tray.darwin
+		return nativeTheme.shouldUseDarkColors || theme === 'dark' ? icons.tray.darwin.dark : icons.tray.darwin.light
 	case 'win32':
 		return icons.tray.win32
 	default: