feat: light and dark mode icons

apps/vscode/src/app/nx-commands/nx-commands-tree-item.ts

@@ -8,7 +8,10 @@ export class NxCommandsTreeItem extends TreeItem {
     tooltip: `Run nx ${this.affectedCommand}`,
   };
 
-  iconPath = Uri.file(join(this.extensionPath, 'assets', 'nx-cli.svg'));
+  iconPath = {
+    light: Uri.file(join(this.extensionPath, 'assets', 'nx-cli-light.svg')),
+    dark: Uri.file(join(this.extensionPath, 'assets', 'nx-cli-dark.svg')),
+  };
 
   constructor(
     readonly affectedCommand: string,

apps/vscode/src/app/webview.ts

@@ -84,9 +84,14 @@ export function createWebViewPanel(
     webviewPanel.onDidDispose(() => {
       webviewPanel = undefined;
     });
-    webviewPanel.iconPath = Uri.file(
-      join(context.extensionPath, 'assets', 'nx-console.svg')
-    );
+    webviewPanel.iconPath = {
+      light: Uri.file(
+        join(context.extensionPath, 'assets', 'nx-console-light.svg')
+      ),
+      dark: Uri.file(
+        join(context.extensionPath, 'assets', 'nx-console-dark.svg')
+      ),
+    };
 
     webviewPanel.webview.html = getIframeHtml(context, schema);
 

apps/vscode/src/app/workspace-tree/workspace-tree-item.ts

@@ -12,14 +12,17 @@ export type WorkspaceRouteTitle =
   | 'Change workspace'
   | 'Select workspace';
 
-const ROUTE_TO_ICON_MAP = new Map<WorkspaceRouteTitle | undefined, string>([
-  ['Generate', 'nx-cli.svg'],
-  ['Run', 'nx-cli.svg'],
-  ['Build', 'nx-cli.svg'],
-  ['Serve', 'nx-cli.svg'],
-  ['Test', 'nx-cli.svg'],
-  ['E2e', 'nx-cli.svg'],
-  ['Lint', 'nx-cli.svg'],
+const ROUTE_TO_ICON_MAP = new Map<
+  WorkspaceRouteTitle | undefined,
+  { light: string; dark: string }
+>([
+  ['Generate', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
+  ['Run', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
+  ['Build', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
+  ['Serve', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
+  ['Test', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
+  ['E2e', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
+  ['Lint', { light: 'nx-cli-light.svg', dark: 'nx-cli-dark.svg' }],
 ]);
 
 export const ROUTE_LIST: WorkspaceRouteTitle[] = [
@@ -71,8 +74,13 @@ export class WorkspaceTreeItem extends TreeItem {
   static getIconUriForRoute(
     extensionPath: string,
     route?: WorkspaceRouteTitle
-  ): Uri | undefined {
+  ): { light: Uri; dark: Uri } | undefined {
     const icon = ROUTE_TO_ICON_MAP.get(route);
-    return icon ? Uri.file(join(extensionPath, 'assets', icon)) : undefined;
+    return icon
+      ? {
+          light: Uri.file(join(extensionPath, 'assets', icon.light)),
+          dark: Uri.file(join(extensionPath, 'assets', icon.dark)),
+        }
+      : undefined;
   }
 }

apps/vscode/src/app/workspace-tree/workspace-tree-provider.ts

@@ -40,12 +40,14 @@ export class WorkspaceTreeProvider extends AbstractTreeProvider<
     readonly extensionPath: string
   ) {
     super();
-    LOCATE_YOUR_WORKSPACE.iconPath = join(
-      extensionPath,
-      'assets',
-      'nx-console.svg'
-    );
-    CHANGE_WORKSPACE.iconPath = join(extensionPath, 'assets', 'nx-console.svg');
+    LOCATE_YOUR_WORKSPACE.iconPath = {
+      light: join(extensionPath, 'assets', 'nx-console-light.svg'),
+      dark: join(extensionPath, 'assets', 'nx-console-dark.svg'),
+    };
+    CHANGE_WORKSPACE.iconPath = {
+      light: join(extensionPath, 'assets', 'nx-console-light.svg'),
+      dark: join(extensionPath, 'assets', 'nx-console-dark.svg'),
+    };
   }
 
   getParent(_: WorkspaceTreeItem) {