Merge pull request #1691 from tarunsamanta2k20/tarun_samanta/#1684

fix(bug)-added two sets of icons for dark and light mode

src/ElectronBackend/main/menu.ts

@@ -4,7 +4,7 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 
-import { app, BrowserWindow, Menu, shell } from 'electron';
+import electron, { app, BrowserWindow, Menu, shell } from 'electron';
 import { AllowedFrontendChannels } from '../../shared/ipc-channels';
 import {
   getOpenFileListener,
@@ -23,21 +23,25 @@ import path from 'path';
 
 export function createMenu(mainWindow: BrowserWindow): Menu {
   const webContents = mainWindow.webContents;
-
+  const nativeTheme = electron.nativeTheme;
   return Menu.buildFromTemplate([
     {
       label: 'File',
       submenu: [
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/open.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/open-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/open-black.png'),
           label: 'Open File',
           accelerator: 'CmdOrCtrl+O',
           click(): void {
             getOpenFileListener(mainWindow)();
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/save.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/save-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/save-black.png'),
           label: 'Save',
           accelerator: 'CmdOrCtrl+S',
           click(): void {
@@ -48,11 +52,15 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
         },
         {
           label: 'Export',
-          icon: path.join(getBasePathOfAssets(), 'icons/export.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/export-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/export-black.png'),
           submenu: [
             {
               label: 'Follow-Up',
-              icon: path.join(getBasePathOfAssets(), 'icons/follow-up.png'),
+              icon: nativeTheme?.shouldUseDarkColors
+                ? path.join(getBasePathOfAssets(), 'icons/follow-up-white.png')
+                : path.join(getBasePathOfAssets(), 'icons/follow-up-black.png'),
               click(): void {
                 setLoadingState(mainWindow.webContents, true);
                 webContents.send(
@@ -62,7 +70,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
               },
             },
             {
-              icon: path.join(getBasePathOfAssets(), 'icons/com-list.png'),
+              icon: nativeTheme?.shouldUseDarkColors
+                ? path.join(getBasePathOfAssets(), 'icons/com-list-white.png')
+                : path.join(getBasePathOfAssets(), 'icons/com-list-black.png'),
               label: 'Compact component list',
               click(): void {
                 setLoadingState(mainWindow.webContents, true);
@@ -73,7 +83,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
               },
             },
             {
-              icon: path.join(getBasePathOfAssets(), 'icons/det-list.png'),
+              icon: nativeTheme?.shouldUseDarkColors
+                ? path.join(getBasePathOfAssets(), 'icons/det-list-white.png')
+                : path.join(getBasePathOfAssets(), 'icons/det-list-black.png'),
               label: 'Detailed component list',
               click(): void {
                 setLoadingState(mainWindow.webContents, true);
@@ -84,7 +96,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
               },
             },
             {
-              icon: path.join(getBasePathOfAssets(), 'icons/yaml.png'),
+              icon: nativeTheme?.shouldUseDarkColors
+                ? path.join(getBasePathOfAssets(), 'icons/yaml-white.png')
+                : path.join(getBasePathOfAssets(), 'icons/yaml-black.png'),
               label: 'SPDX (yaml)',
               click(): void {
                 setLoadingState(mainWindow.webContents, true);
@@ -95,7 +109,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
               },
             },
             {
-              icon: path.join(getBasePathOfAssets(), 'icons/json-file.png'),
+              icon: nativeTheme?.shouldUseDarkColors
+                ? path.join(getBasePathOfAssets(), 'icons/json-white.png')
+                : path.join(getBasePathOfAssets(), 'icons/json-black.png'),
               label: 'SPDX (json)',
               click(): void {
                 setLoadingState(mainWindow.webContents, true);
@@ -108,7 +124,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
           ],
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/metadata.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/about-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/about-black.png'),
           label: 'Project Metadata',
           click(): void {
             if (isFileLoaded(getGlobalBackendState())) {
@@ -122,7 +140,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/statictics.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/statictics-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/statictics-black.png'),
           label: 'Project Statistics',
           click(): void {
             if (isFileLoaded(getGlobalBackendState())) {
@@ -136,14 +156,18 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/path.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/restore-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/restore-black.png'),
           label: 'Set Path to Sources',
           click(): void {
             getSelectBaseURLListener(mainWindow)();
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/quit.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/quit-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/quit-black.png'),
           label: 'Quit',
           accelerator: 'CmdOrCtrl+Q',
           click(): void {
@@ -156,45 +180,59 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
       label: 'Edit',
       submenu: [
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/undo.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/undo-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/undo-black.png'),
           label: 'Undo',
           accelerator: 'CmdOrCtrl+Z',
           role: 'undo',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/redo.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/redo-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/redo-black.png'),
           label: 'Redo',
           accelerator: 'Shift+CmdOrCtrl+Z',
           role: 'redo',
         },
         { type: 'separator' },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/cut.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/cut-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/cut-black.png'),
           label: 'Cut',
           accelerator: 'CmdOrCtrl+X',
           role: 'cut',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/copy.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/copy-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/copy-black.png'),
           label: 'Copy',
           accelerator: 'CmdOrCtrl+C',
           role: 'copy',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/paste.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/paste-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/paste-black.png'),
           label: 'Paste',
           accelerator: 'CmdOrCtrl+V',
           role: 'paste',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/select-all.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/select-all-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/select-all-black.png'),
           label: 'Select All',
           accelerator: 'CmdOrCtrl+A',
           role: 'selectAll',
         },
         { type: 'separator' },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/search.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/search-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/search-black.png'),
           label: 'Search for Files and Directories',
           accelerator: 'CmdOrCtrl+F',
           click(): void {
@@ -211,22 +249,33 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
       label: 'View',
       submenu: [
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/developer-tool.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/developer-tool-white.png')
+            : path.join(
+                getBasePathOfAssets(),
+                'icons/developer-tool-black.png'
+              ),
           label: 'Show Developer Tools',
           role: 'toggleDevTools',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/full-screen.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/full-screen-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/full-screen-black.png'),
           label: 'Full Screen',
           role: 'togglefullscreen',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/zoom-in.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/zoom-in-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/zoom-in-black.png'),
           label: 'Zoom In',
           role: 'zoomIn',
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/zoom-out.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/zoom-out-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/zoom-out-black.png'),
           label: 'Zoom Out',
           role: 'zoomOut',
         },
@@ -236,7 +285,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
       label: 'About',
       submenu: [
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/github.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/github-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/github-black.png'),
           label: 'Open on GitHub',
           click: async (): Promise<void> => {
             await shell.openExternal(
@@ -245,14 +296,18 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/notice.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/notice-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/notice-black.png'),
           label: 'OpossumUI Notices',
           click: async (): Promise<void> => {
             await shell.openPath(getPathOfNoticeDocument());
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/chromium.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/chromium-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/chromium-black.png'),
           label: 'Chromium Notices',
           click: async (): Promise<void> => {
             await shell.openPath(getPathOfChromiumNoticeDocument());
@@ -264,7 +319,9 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
       label: 'Help',
       submenu: [
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/user-guide.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/user-guide-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/user-guide-black.png'),
           label: "User's Guide",
           click: async (): Promise<void> => {
             await shell.openExternal(
@@ -273,14 +330,18 @@ export function createMenu(mainWindow: BrowserWindow): Menu {
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/log.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/log-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/log-black.png'),
           label: 'Open log files folder',
           click: async (): Promise<void> => {
             await shell.openPath(app.getPath('logs'));
           },
         },
         {
-          icon: path.join(getBasePathOfAssets(), 'icons/updated.png'),
+          icon: nativeTheme?.shouldUseDarkColors
+            ? path.join(getBasePathOfAssets(), 'icons/update-white.png')
+            : path.join(getBasePathOfAssets(), 'icons/update-black.png'),
           label: 'Check for updates',
           click(): void {
             webContents.send(AllowedFrontendChannels.ShowUpdateAppPopup, {