Fix greenscreen theming in about/auth/scrollbars

packages/cli/src/ui/components/AboutBox.theme.test.tsx

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright 2025 Vybestack LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import type { BoxProps } from 'ink';
+
+const recordedBoxProps: Array<{ backgroundColor?: string }> = [];
+
+const InstrumentedBox = (props: BoxProps & { children?: React.ReactNode }) => {
+  recordedBoxProps.push({
+    backgroundColor: props.backgroundColor,
+  });
+  return React.createElement('ink-box', props, props.children);
+};
+
+vi.mock('ink', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('ink')>();
+  return {
+    ...actual,
+    Box: InstrumentedBox,
+  };
+});
+
+const { Colors } = await import('../colors.js');
+const { AboutBox } = await import('./AboutBox.js');
+
+describe('AboutBox theming', () => {
+  beforeEach(() => {
+    recordedBoxProps.length = 0;
+  });
+
+  it('sets the background color from the active theme', () => {
+    render(
+      <AboutBox
+        cliVersion="1.0.0"
+        osVersion="test-os"
+        sandboxEnv="test-sandbox"
+        modelVersion="test-model"
+        selectedAuthType="oauth"
+        gcpProject=""
+        keyfile=""
+        key=""
+        ideClient=""
+        provider="test-provider"
+        baseURL=""
+      />,
+    );
+
+    const themedBox = recordedBoxProps.find(
+      (entry) => entry.backgroundColor === Colors.Background,
+    );
+
+    expect(themedBox).toBeDefined();
+  });
+});

packages/cli/src/ui/components/AboutBox.tsx

@@ -41,6 +41,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
     padding={1}
     marginY={1}
     width="100%"
+    backgroundColor={Colors.Background}
   >
     <Box marginBottom={1}>
       <Text bold color={Colors.AccentPurple}>

packages/cli/src/ui/components/AuthDialog.theme.test.tsx

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright 2025 Vybestack LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderWithProviders } from '../../test-utils/render.js';
+import { LoadedSettings } from '../../config/settings.js';
+import type { BoxProps } from 'ink';
+
+const recordedBoxProps: Array<{ backgroundColor?: string }> = [];
+
+const InstrumentedBox = (props: BoxProps & { children?: React.ReactNode }) => {
+  recordedBoxProps.push({
+    backgroundColor: props.backgroundColor,
+  });
+  return React.createElement('ink-box', props, props.children);
+};
+
+vi.mock('ink', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('ink')>();
+  return {
+    ...actual,
+    Box: InstrumentedBox,
+  };
+});
+
+const { Colors } = await import('../colors.js');
+const { AuthDialog } = await import('./AuthDialog.js');
+
+describe('AuthDialog theming', () => {
+  beforeEach(() => {
+    recordedBoxProps.length = 0;
+  });
+
+  it('sets the background color from the active theme', () => {
+    const settings = new LoadedSettings(
+      { settings: { ui: { customThemes: {} }, mcpServers: {} }, path: '' },
+      { settings: {}, path: '' },
+      { settings: {}, path: '' },
+      { settings: { ui: { customThemes: {} }, mcpServers: {} }, path: '' },
+      true,
+    );
+
+    renderWithProviders(<AuthDialog onSelect={vi.fn()} settings={settings} />);
+
+    const themedBox = recordedBoxProps.find(
+      (entry) => entry.backgroundColor === Colors.Background,
+    );
+
+    expect(themedBox).toBeDefined();
+  });
+});

packages/cli/src/ui/components/AuthDialog.tsx

@@ -146,6 +146,7 @@ export function AuthDialog({
       flexDirection="column"
       padding={1}
       width="100%"
+      backgroundColor={Colors.Background}
     >
       <Text bold color={Colors.Foreground}>
         OAuth Authentication

packages/cli/src/ui/components/shared/ScrollableList.theme.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2025 Vybestack LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ScrollProvider } from '../../contexts/ScrollProvider.js';
+
+const items = [{ id: 'one' }];
+const renderItem = () => <></>;
+const estimatedItemHeight = () => 1;
+const keyExtractor = (item: { id: string }) => item.id;
+
+const recordedVirtualizedListProps: Array<{ scrollbarThumbColor?: string }> =
+  [];
+
+const mockVirtualizedList = React.forwardRef(
+  (props: { scrollbarThumbColor?: string }) => {
+    recordedVirtualizedListProps.push({
+      scrollbarThumbColor: props.scrollbarThumbColor,
+    });
+    return null;
+  },
+);
+
+mockVirtualizedList.displayName = 'VirtualizedList';
+
+vi.mock('./VirtualizedList.js', () => ({
+  VirtualizedList: mockVirtualizedList,
+  SCROLL_TO_ITEM_END: Number.MAX_SAFE_INTEGER,
+}));
+
+vi.mock('ink', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('ink')>();
+  return {
+    ...actual,
+    measureElement: vi.fn(() => ({ width: 10, height: 10 })),
+  };
+});
+
+const { Colors } = await import('../../colors.js');
+const { ScrollableList } = await import('./ScrollableList.js');
+
+describe('ScrollableList theming', () => {
+  it('uses theme colors for the scrollbar thumb based on focus', () => {
+    recordedVirtualizedListProps.length = 0;
+
+    const renderList = (hasFocus: boolean) =>
+      render(
+        <ScrollProvider>
+          <ScrollableList
+            hasFocus={hasFocus}
+            data={items}
+            renderItem={renderItem}
+            estimatedItemHeight={estimatedItemHeight}
+            keyExtractor={keyExtractor}
+          />
+        </ScrollProvider>,
+      );
+
+    renderList(true);
+    renderList(false);
+
+    expect(recordedVirtualizedListProps).toContainEqual({
+      scrollbarThumbColor: Colors.Foreground,
+    });
+    expect(recordedVirtualizedListProps).toContainEqual({
+      scrollbarThumbColor: Colors.Gray,
+    });
+  });
+});

packages/cli/src/ui/components/shared/ScrollableList.tsx

@@ -19,6 +19,7 @@ import {
 } from './VirtualizedList.js';
 import { useScrollable } from '../../contexts/ScrollProvider.js';
 import { Box, type DOMElement } from 'ink';
+import { Colors } from '../../colors.js';
 import { useKeypress, type Key } from '../../hooks/useKeypress.js';
 import { keyMatchers, Command } from '../../keyMatchers.js';
 
@@ -132,7 +133,7 @@ function ScrollableList<T>(
 
   useScrollable(scrollableEntry, hasFocus);
 
-  const scrollbarColor = hasFocus ? 'gray' : 'darkgray';
+  const scrollbarColor = hasFocus ? Colors.Foreground : Colors.Gray;
 
   return (
     <Box

packages/cli/src/ui/components/shared/VirtualizedList.theme.test.tsx

@@ -0,0 +1,72 @@
+/**
+ * @license
+ * Copyright 2025 Vybestack LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import type { BoxProps } from 'ink';
+
+const items = [{ id: 'one' }];
+const renderItem = () => <></>;
+const estimatedItemHeight = () => 1;
+const keyExtractor = (item: { id: string }) => item.id;
+
+const recordedBoxProps: Array<{ scrollbarThumbColor?: string }> = [];
+
+const recordScrollbarThumb = (props: BoxProps) => {
+  if (props.scrollbarThumbColor) {
+    recordedBoxProps.push({
+      scrollbarThumbColor: props.scrollbarThumbColor,
+    });
+  }
+};
+
+const InstrumentedBox = (props: BoxProps & { children?: React.ReactNode }) => {
+  recordScrollbarThumb(props);
+  return React.createElement('ink-box', props, props.children);
+};
+
+vi.mock('ink', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('ink')>();
+  return {
+    ...actual,
+    Box: InstrumentedBox,
+    measureElement: vi.fn(() => ({ width: 10, height: 10 })),
+  };
+});
+
+vi.mock('../../hooks/useBatchedScroll.js', () => ({
+  useBatchedScroll: () => ({
+    getScrollTop: () => 0,
+    setPendingScrollTop: vi.fn(),
+  }),
+}));
+
+const { Colors } = await import('../../colors.js');
+const { VirtualizedList } = await import('./VirtualizedList.js');
+
+describe('VirtualizedList theming', () => {
+  beforeEach(() => {
+    recordedBoxProps.length = 0;
+  });
+
+  it('defaults the scrollbar thumb color to the theme gray', () => {
+    render(
+      <VirtualizedList
+        data={items}
+        renderItem={renderItem}
+        estimatedItemHeight={estimatedItemHeight}
+        keyExtractor={keyExtractor}
+      />,
+    );
+
+    const thumbEntry = recordedBoxProps.find(
+      (entry) => entry.scrollbarThumbColor === Colors.Gray,
+    );
+
+    expect(thumbEntry).toBeDefined();
+  });
+});

packages/cli/src/ui/components/shared/VirtualizedList.tsx

@@ -17,6 +17,7 @@ import {
 import type React from 'react';
 import { useBatchedScroll } from '../../hooks/useBatchedScroll.js';
 import { type DOMElement, measureElement, Box } from 'ink';
+import { Colors } from '../../colors.js';
 
 export const SCROLL_TO_ITEM_END = Number.MAX_SAFE_INTEGER;
 
@@ -469,7 +470,7 @@ function VirtualizedList<T>(
       overflowY="scroll"
       overflowX="hidden"
       scrollTop={scrollTop}
-      scrollbarThumbColor={props.scrollbarThumbColor ?? 'gray'}
+      scrollbarThumbColor={props.scrollbarThumbColor ?? Colors.Gray}
       width="100%"
       height="100%"
       flexDirection="column"