feat: Detect background color (#15132)

packages/cli/src/ui/components/ThemeDialog.test.tsx

@@ -143,3 +143,96 @@ describe('ThemeDialog Snapshots', () => {
     });
   });
 });
+
+describe('Initial Theme Selection', () => {
+  const baseProps = {
+    onSelect: vi.fn(),
+    onCancel: vi.fn(),
+    onHighlight: vi.fn(),
+    availableTerminalHeight: 40,
+    terminalWidth: 120,
+  };
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should default to a light theme when terminal background is light and no theme is set', () => {
+    const settings = createMockSettings(); // No theme set
+    const { lastFrame } = renderWithProviders(
+      <ThemeDialog {...baseProps} settings={settings} />,
+      {
+        settings,
+        uiState: { terminalBackgroundColor: '#FFFFFF' }, // Light background
+      },
+    );
+
+    // The snapshot will show which theme is highlighted.
+    // We expect 'DefaultLight' to be the one with the '>' indicator.
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should default to a dark theme when terminal background is dark and no theme is set', () => {
+    const settings = createMockSettings(); // No theme set
+    const { lastFrame } = renderWithProviders(
+      <ThemeDialog {...baseProps} settings={settings} />,
+      {
+        settings,
+        uiState: { terminalBackgroundColor: '#000000' }, // Dark background
+      },
+    );
+
+    // We expect 'DefaultDark' to be highlighted.
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('should use the theme from settings even if terminal background suggests a different theme type', () => {
+    const settings = createMockSettings({ ui: { theme: 'DefaultLight' } }); // Light theme set
+    const { lastFrame } = renderWithProviders(
+      <ThemeDialog {...baseProps} settings={settings} />,
+      {
+        settings,
+        uiState: { terminalBackgroundColor: '#000000' }, // Dark background
+      },
+    );
+
+    // We expect 'DefaultLight' to be highlighted, respecting the settings.
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});
+
+describe('Hint Visibility', () => {
+  const baseProps = {
+    onSelect: vi.fn(),
+    onCancel: vi.fn(),
+    onHighlight: vi.fn(),
+    availableTerminalHeight: 40,
+    terminalWidth: 120,
+  };
+
+  it('should show hint when theme background matches terminal background', () => {
+    const settings = createMockSettings({ ui: { theme: 'Default' } });
+    const { lastFrame } = renderWithProviders(
+      <ThemeDialog {...baseProps} settings={settings} />,
+      {
+        settings,
+        uiState: { terminalBackgroundColor: '#1E1E2E' },
+      },
+    );
+
+    expect(lastFrame()).toContain('(Matches terminal)');
+  });
+
+  it('should not show hint when theme background does not match terminal background', () => {
+    const settings = createMockSettings({ ui: { theme: 'Default' } });
+    const { lastFrame } = renderWithProviders(
+      <ThemeDialog {...baseProps} settings={settings} />,
+      {
+        settings,
+        uiState: { terminalBackgroundColor: '#FFFFFF' },
+      },
+    );
+
+    expect(lastFrame()).not.toContain('(Matches terminal)');
+  });
+});