fix(apollo-react): handle dark themed icon backgrounds on nodes

Author: BenGSchulz

packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.tsx

@@ -46,6 +46,7 @@ const BaseCanvasInnerComponent = <NodeType extends Node = Node, EdgeType extends
     backgroundVariant = BASE_CANVAS_DEFAULTS.background.variant,
     backgroundGap = BASE_CANVAS_DEFAULTS.background.gap,
     backgroundSize = BASE_CANVAS_DEFAULTS.background.size,
+    isDarkMode,
 
     // Configuration
     minZoom = BASE_CANVAS_DEFAULTS.zoom.min,
@@ -147,7 +148,7 @@ const BaseCanvasInnerComponent = <NodeType extends Node = Node, EdgeType extends
   );
 
   return (
-    <CanvasProviders nodes={nodes} edges={edges} mode={mode}>
+    <CanvasProviders nodes={nodes} edges={edges} mode={mode} isDarkMode={isDarkMode}>
       <ReactFlow
         {...reactFlowProps}
         nodes={nodes}

packages/apollo-react/src/canvas/components/BaseCanvas/BaseCanvas.types.ts

@@ -176,6 +176,17 @@ export interface BaseCanvasProps<NodeType extends Node = Node, EdgeType extends
    * Used for visual indication in debug mode
    */
   breakpoints?: Set<string>;
+
+  /**
+   * Whether the canvas should render in dark mode.
+   * Controls dark-mode-specific styling for node icons and toolbox items.
+   *
+   * - When `true`, components used in canvas will choose dark mode assets (e.g. icons) if available.
+   * - When `false` or `undefined`, components will use light mode / default assets.
+   *
+   * @default undefined
+   */
+  isDarkMode?: boolean;
 }
 
 /**

packages/apollo-react/src/canvas/components/BaseCanvas/CanvasProviders.tsx

@@ -2,14 +2,16 @@ import type { Edge, Node } from '@uipath/apollo-react/canvas/xyflow/react';
 import type { ReactNode } from 'react';
 import type { BaseCanvasProps } from './BaseCanvas.types';
 import { BaseCanvasModeProvider } from './BaseCanvasModeProvider';
+import { CanvasThemeProvider } from './CanvasThemeContext';
 import { ConnectedHandlesProvider } from './ConnectedHandlesContext';
 import { SelectionStateProvider } from './SelectionStateContext';
 
 interface CanvasProvidersProps {
+  children: ReactNode;
   nodes: Node[];
   edges: Edge[];
   mode: BaseCanvasProps['mode'];
-  children: ReactNode;
+  isDarkMode?: boolean;
 }
 
 /**
@@ -18,12 +20,20 @@ interface CanvasProvidersProps {
  *
  * This is purely a convenience wrapper - no performance implications.
  */
-export function CanvasProviders({ nodes, edges, mode, children }: CanvasProvidersProps) {
+export function CanvasProviders({
+  nodes,
+  edges,
+  mode,
+  isDarkMode,
+  children,
+}: CanvasProvidersProps) {
   return (
-    <ConnectedHandlesProvider edges={edges}>
-      <BaseCanvasModeProvider mode={mode}>
-        <SelectionStateProvider nodes={nodes}>{children}</SelectionStateProvider>
-      </BaseCanvasModeProvider>
-    </ConnectedHandlesProvider>
+    <CanvasThemeProvider isDarkMode={isDarkMode}>
+      <ConnectedHandlesProvider edges={edges}>
+        <BaseCanvasModeProvider mode={mode}>
+          <SelectionStateProvider nodes={nodes}>{children}</SelectionStateProvider>
+        </BaseCanvasModeProvider>
+      </ConnectedHandlesProvider>
+    </CanvasThemeProvider>
   );
 }

packages/apollo-react/src/canvas/components/BaseCanvas/CanvasThemeContext.tsx

@@ -0,0 +1,26 @@
+import type React from 'react';
+import { createContext, useContext, useMemo } from 'react';
+
+interface CanvasThemeContextValue {
+  isDarkMode?: boolean;
+}
+
+const CanvasThemeContext = createContext<CanvasThemeContextValue | null>(null);
+
+const defaultValue: CanvasThemeContextValue = { isDarkMode: false };
+
+export const CanvasThemeProvider: React.FC<React.PropsWithChildren<{ isDarkMode?: boolean }>> = ({
+  children,
+  isDarkMode,
+}) => {
+  const value = useMemo(() => ({ isDarkMode }), [isDarkMode]);
+  return <CanvasThemeContext.Provider value={value}>{children}</CanvasThemeContext.Provider>;
+};
+
+/**
+ * Hook to access canvas theme context.
+ * Falls back to light mode if used outside a CanvasThemeProvider.
+ */
+export function useCanvasTheme(): CanvasThemeContextValue {
+  return useContext(CanvasThemeContext) ?? defaultValue;
+}

packages/apollo-react/src/canvas/components/BaseCanvas/index.ts

@@ -4,5 +4,6 @@ export * from './BaseCanvas.hooks';
 export * from './BaseCanvas.types';
 export * from './CanvasBackground';
 export * from './CanvasProviders';
+export * from './CanvasThemeContext';
 export * from './ConnectedHandlesContext';
 export * from './SelectionStateContext';

packages/apollo-react/src/canvas/components/BaseNode/BaseNode.tsx

@@ -17,6 +17,7 @@ import { getIcon } from '../../utils/icon-registry';
 import { resolveDisplay, resolveHandles } from '../../utils/manifest-resolver';
 import { resolveToolbar } from '../../utils/toolbar-resolver';
 import { useBaseCanvasMode } from '../BaseCanvas/BaseCanvasModeProvider';
+import { useCanvasTheme } from '../BaseCanvas/CanvasThemeContext';
 import { useConnectedHandles } from '../BaseCanvas/ConnectedHandlesContext';
 import { useSelectionState } from '../BaseCanvas/SelectionStateContext';
 import type { HandleActionEvent } from '../ButtonHandle/ButtonHandle';
@@ -90,6 +91,8 @@ const BaseNodeComponent = (props: BaseNodeComponentProps) => {
   const isConnecting = useStore(selectIsConnecting);
   const { multipleNodesSelected } = useSelectionState();
 
+  const { isDarkMode } = useCanvasTheme();
+
   // Get manifest and resolve with instance data
   const manifest = useMemo(() => nodeTypeRegistry.getManifest(type), [type, nodeTypeRegistry]);
 
@@ -231,7 +234,9 @@ const BaseNodeComponent = (props: BaseNodeComponentProps) => {
   const displayShape = display.shape ?? 'square';
   const displayBackground = display.background;
   const displayColor = display.color;
-  const displayIconBackground = display.iconBackground;
+  const displayIconBackground = isDarkMode
+    ? (display.iconBackgroundDark ?? display.iconBackground)
+    : display.iconBackground;
 
   // Display customization from props (not data)
   const displayLabelTooltip = labelTooltip;

packages/apollo-react/src/canvas/components/BaseNode/BaseNode.types.ts

@@ -18,6 +18,7 @@ export interface BaseNodeData extends Record<string, unknown> {
     background?: string;
     icon?: string;
     iconBackground?: string;
+    iconBackgroundDark?: string;
     iconColor?: string;
   };
 

packages/apollo-react/src/canvas/components/Toolbox/ListView.test.tsx

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '../../utils/testing';
+import { CanvasThemeProvider } from '../BaseCanvas/CanvasThemeContext';
 import type { ListItem } from './ListView';
 import { ListView } from './ListView';
 
@@ -259,27 +260,33 @@ describe('ListView', () => {
   });
 
   describe('Styling', () => {
-    it('should apply custom color from getItemColor', () => {
-      const items: ListItem[] = [{ id: 'item-1', name: 'Item 1', data: {} }];
-
-      const getItemColor = () => '#ff0000';
+    it('should apply color from item.color if provided', () => {
+      const items: ListItem[] = [{ id: 'item-1', name: 'Item 1', data: {}, color: 'rgb(1,2,3)' }];
 
-      render(<ListView {...defaultProps} items={items} getItemColor={getItemColor} />);
+      render(<ListView {...defaultProps} items={items} />);
 
-      const button = screen.getByRole('button');
-      // Check that the IconContainer has the background color set
-      const iconContainer = button.querySelector('.css-q1gtze');
-      expect(iconContainer).toBeDefined();
+      const iconContainer = screen.getByTestId('list-item-icon');
+      expect(iconContainer).toHaveStyle({ background: 'rgb(1,2,3)' });
     });
 
-    it('should apply color from item.color if provided', () => {
-      const items: ListItem[] = [{ id: 'item-1', name: 'Item 1', data: {}, color: '#00ff00' }];
-
-      render(<ListView {...defaultProps} items={items} />);
+    it('should use dark color in dark mode', () => {
+      const items: ListItem[] = [
+        {
+          id: 'item-1',
+          name: 'Item 1',
+          data: {},
+          color: 'rgb(1,2,3)',
+          colorDark: 'rgb(3,2,1)',
+        },
+      ];
+      render(
+        <CanvasThemeProvider isDarkMode={true}>
+          <ListView {...defaultProps} items={items} />
+        </CanvasThemeProvider>
+      );
 
-      const button = screen.getByRole('button');
-      const iconContainer = button.querySelector('.css-q1gtze');
-      expect(iconContainer).toBeDefined();
+      const iconContainer = screen.getByTestId('list-item-icon');
+      expect(iconContainer).toHaveStyle({ background: 'rgb(3,2,1)' });
     });
   });
 

packages/apollo-react/src/canvas/components/Toolbox/ListView.tsx

@@ -5,7 +5,7 @@ import { ApSkeleton, ApTypography } from '@uipath/apollo-react/material';
 import { ApIcon } from '@uipath/apollo-react/material/components';
 import { memo, useCallback, useMemo } from 'react';
 import type { RowComponentProps } from 'react-window';
-
+import { useCanvasTheme } from '../BaseCanvas/CanvasThemeContext';
 import { IconContainer, ListItemButton, SectionHeader, StyledList } from './ListView.styles';
 
 export interface ListItemIcon {
@@ -31,6 +31,7 @@ export type ListItem<T = any> = {
   description?: string;
   icon?: ListItemIcon;
   color?: string;
+  colorDark?: string;
   children?: ListItem<T>[] | ((id: string, name: string) => Promise<ListItem<T>[]>);
 };
 
@@ -43,7 +44,6 @@ export interface ListViewRowProps<T extends ListItem> {
   isLoading?: boolean;
   onItemClick: (item: T) => void;
   onItemHover?: (item: T) => void;
-  getItemColor?: (item: T) => string | undefined;
 }
 
 const IconContainerMemoized = memo(IconContainer);
@@ -57,9 +57,9 @@ const ListViewRow = memo(
     isLoading,
     onItemClick,
     onItemHover,
-    getItemColor,
   }: RowComponentProps<ListViewRowProps<T>>) => {
     const renderItem = renderedItems[index]!;
+    const { isDarkMode } = useCanvasTheme();
 
     const buttonStyle = useMemo(
       () => ({ ...style, padding: 0, paddingRight: '4px', height: '32px', outlineOffset: '-1px' }),
@@ -94,7 +94,7 @@ const ListViewRow = memo(
     }
 
     const item = renderItem.item;
-    const bgColor = getItemColor ? getItemColor(item) : 'color' in item ? item.color : undefined;
+    const bgColor = isDarkMode ? (item.colorDark ?? item.color) : item.color;
 
     return (
       <ListItemButton
@@ -151,7 +151,6 @@ interface ListViewProps<T extends ListItem> {
   items: T[];
   onItemClick: (item: T) => void;
   onItemHover?: (item: T) => void;
-  getItemColor?: (item: T) => string | undefined;
   emptyStateMessage?: string;
   emptyStateIcon?: string;
   isLoading?: boolean;
@@ -161,7 +160,6 @@ interface ListViewProps<T extends ListItem> {
 export const ListView = memo(function ListView<T extends ListItem>({
   items,
   onItemClick,
-  getItemColor,
   onItemHover,
   emptyStateMessage = 'No items found',
   emptyStateIcon = 'search_off',
@@ -208,8 +206,8 @@ export const ListView = memo(function ListView<T extends ListItem>({
   }, [items, enableSections]);
 
   const rowProps = useMemo(
-    () => ({ renderedItems, isLoading, onItemClick, getItemColor, onItemHover }),
-    [renderedItems, isLoading, onItemClick, getItemColor, onItemHover]
+    () => ({ renderedItems, isLoading, onItemClick, onItemHover }),
+    [renderedItems, isLoading, onItemClick, onItemHover]
   );
 
   // Only show skeleton loaders when loading and no items exist

packages/apollo-react/src/canvas/core/CategoryTreeAdapter.ts

@@ -41,6 +41,8 @@ export class CategoryTreeAdapter {
         version: node.version,
       },
       icon: { name: node.display.icon },
+      color: node.display.iconBackground,
+      colorDark: node.display.iconBackgroundDark,
     });
 
     const convertCategories = (categoryNodes: CategoryTreeNode[]): ListItem[] => {
@@ -70,6 +72,7 @@ export class CategoryTreeAdapter {
           data: null,
           icon: { name: category.icon },
           color: category.color,
+          colorDark: category.colorDark,
           children,
         };