feat(tray): add support for tray icon themes

src/config/defaults.ts

@@ -8,6 +8,12 @@ export interface WindowPositionConfig {
   y: number;
 }
 
+export enum TrayIconTheme {
+  Default = 'default',
+  Fluent = 'fluent',
+  Material = 'material',
+}
+
 export interface DefaultConfig {
   'window-size': WindowSizeConfig;
   'window-maximized': boolean;
@@ -16,6 +22,7 @@ export interface DefaultConfig {
   options: {
     language?: string;
     tray: boolean;
+    trayIconTheme: TrayIconTheme;
     appVisible: boolean;
     autoUpdates: boolean;
     alwaysOnTop: boolean;
@@ -51,6 +58,7 @@ const defaultConfig: DefaultConfig = {
   'url': 'https://music.youtube.com',
   'options': {
     tray: false,
+    trayIconTheme: TrayIconTheme.Default,
     appVisible: true,
     autoUpdates: true,
     alwaysOnTop: false,

src/i18n/resources/en.json

@@ -145,6 +145,14 @@
               "enabled-and-hide-app": "Enabled and hide app",
               "enabled-and-show-app": "Enabled and show app",
               "play-pause-on-click": "Play/Pause on click"
+          },
+            "theme": {
+              "label": "Tray Icon Theme",
+              "submenu": {
+                "default": "Default",
+                "fluent": "Fluent",
+                "material": "Material"
+              }
             }
           },
           "visual-tweaks": {

src/index.ts

@@ -728,7 +728,7 @@ app.whenReady().then(async () => {
   mainWindow = await createMainWindow();
   await setApplicationMenu(mainWindow);
   await refreshMenu(mainWindow);
-  setUpTray(app, mainWindow);
+  setUpTray({ app, win: mainWindow });
 
   setupProtocolHandler(mainWindow);
 

src/menu.ts

@@ -24,6 +24,10 @@ import promptOptions from './providers/prompt-options';
 import { getAllMenuTemplate, loadAllMenuPlugins } from './loader/menu';
 import { setLanguage, t } from '@/i18n';
 
+import { setUpTray } from '@/tray';
+
+import { TrayIconTheme } from '@/config/defaults';
+
 import packageJson from '../package.json';
 
 export type MenuTemplate = Electron.MenuItemConstructorOptions[];
@@ -413,6 +417,53 @@ export const mainMenuTemplate = async (
               },
             },
             { type: 'separator' },
+            {
+              label: t('main.menu.options.submenu.tray.theme.label'),
+              submenu: [
+                {
+                  label: 'Default',
+                  type: 'radio',
+                  checked:
+                    config.get('options.trayIconTheme') ===
+                    TrayIconTheme.Default,
+                  click() {
+                    config.setMenuOption(
+                      'options.trayIconTheme',
+                      TrayIconTheme.Default,
+                    );
+                    setUpTray({ app, win });
+                  },
+                },
+                {
+                  label: 'Fluent',
+                  type: 'radio',
+                  checked:
+                    config.get('options.trayIconTheme') ===
+                    TrayIconTheme.Fluent,
+                  click() {
+                    config.setMenuOption(
+                      'options.trayIconTheme',
+                      TrayIconTheme.Fluent,
+                    );
+                    setUpTray({ app, win });
+                  },
+                },
+                {
+                  label: 'Material',
+                  type: 'radio',
+                  checked:
+                    config.get('options.trayIconTheme') ===
+                    TrayIconTheme.Material,
+                  click() {
+                    config.setMenuOption(
+                      'options.trayIconTheme',
+                      TrayIconTheme.Material,
+                    );
+                    setUpTray({ app, win });
+                  },
+                },
+              ],
+            },
             {
               label: t(
                 'main.menu.options.submenu.tray.submenu.play-pause-on-click',

src/providers/prompt-options.ts

@@ -1,8 +1,8 @@
-import youtubeMusicTrayIcon from '@assets/youtube-music-tray.png?asset&asarUnpack';
+import trayIconPlay from '@assets/tray-icons/default/play.png?asset&asarUnpack';
 
 const promptOptions = {
   customStylesheet: 'dark',
-  icon: youtubeMusicTrayIcon,
+  icon: trayIconPlay,
 };
 
 export default () => promptOptions;