ui(polish) blend background color with theme

[jacob314]

Summary

Fixes #18801
We only blend the background color with the theme if the background color is compatible with the teme to avoid failure modes such as a light theme with a dark terminal.

Also fixes edge case where we didn't force refreshing the background color from the terminal when changing the theme resulting in a stale terminal background color being used even when one was available.

How to Validate

Test with multiple terminal background colors.
Test changing the background color while the app is running and then changing the theme.

[gemini-cli]

Hi @jacob314, thank you so much for your contribution to Gemini CLI! We really appreciate the time and effort you've put into this.

We're making some updates to our contribution process to improve how we track and review changes. Please take a moment to review our recent discussion post: Improving Our Contribution Process & Introducing New Guidelines.

Key Update: Starting January 26, 2026, the Gemini CLI project will require all pull requests to be associated with an existing issue. Any pull requests not linked to an issue by that date will be automatically closed.

Thank you for your understanding and for being a part of our community!

[gemini-code-assist]

Summary of Changes

Hello @jacob314, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the UI's visual integration by allowing the application's theme colors to blend seamlessly with the actual terminal background. This is achieved by centralizing terminal background detection and color blending within the theme manager, and subsequently updating UI components to utilize these dynamically adjusted colors. The change improves consistency and adaptability across different terminal environments.

Highlights

• Dynamic Theme Blending: Implemented logic within themeManager to dynamically blend theme colors with the detected terminal background color, ensuring a more cohesive visual experience.
• Centralized Terminal Background Management: Added terminalBackground state and associated methods (setTerminalBackground, getTerminalBackground) to ThemeManager to centralize the handling of the terminal's actual background color.
• UI Re-rendering on Theme Change: Introduced a themeKey state in AppContainer.tsx to force a re-render of the UIStateContext.Provider when the active theme changes, ensuring UI components correctly reflect the updated theme and blended colors.
• Refactored Color Retrieval: Updated colors.ts and various UI components (InputPrompt.tsx, HalfLinePaddedBox.tsx) to retrieve background colors from themeManager.getColors() and theme.background.primary respectively, which now account for the blended terminal background.
• Improved Test Coverage: Added comprehensive test cases in theme-manager.test.ts to validate the new terminalBackground override and blending logic, ensuring its correctness and robustness.

Changelog

• packages/cli/src/test-utils/render.tsx
  • Imported themeManager to enable setting the terminal background during test rendering.
• packages/cli/src/ui/AppContainer.tsx
  • Introduced themeKey state to trigger UI re-renders upon theme changes.
  • Updated useEffect dependencies to include settings for proper theme key updates.
• packages/cli/src/ui/colors.ts
  • Modified Background and DarkGray getters to use themeManager.getColors() for blended colors.
• packages/cli/src/ui/components/InputPrompt.test.tsx
  • Removed a 'default (black)' color option from test cases.
  • Added terminalBackgroundColor to renderWithProviders for specific test scenarios.
• packages/cli/src/ui/components/InputPrompt.tsx
  • Removed terminalBackgroundColor from props.
  • Updated terminalBg to derive its value from theme.background.primary.
• packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx
  • Removed terminalBackgroundColor from useUIState.
  • Updated terminalBg to derive its value from theme.background.primary.
• packages/cli/src/ui/hooks/useTerminalTheme.test.tsx
  • Mocked setTerminalBackground in themeManager for testing purposes.
• packages/cli/src/ui/hooks/useTerminalTheme.ts
  • Added a call to themeManager.setTerminalBackground when a terminal background color is detected.
• packages/cli/src/ui/themes/theme-manager.test.ts
  • Added a new test suite to verify the terminalBackground override functionality and color blending.
• packages/cli/src/ui/themes/theme-manager.ts
  • Added terminalBackground property and setTerminalBackground/getTerminalBackground methods.
  • Modified getColors() and getSemanticColors() to incorporate terminalBackground for blending background-related colors.
• packages/cli/src/utils/terminalTheme.ts
  • Added a call to themeManager.setTerminalBackground during the initial terminal theme setup.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

Size Change: +29.1 kB (+0.12%)

Total Size: 24.4 MB

Filename	Size	Change
./bundle/gemini.js	24.4 MB	+29.1 kB (+0.12%)

ℹ️ View Unchanged

Filename	Size
./bundle/sandbox-macos-permissive-open.sb	890 B
./bundle/sandbox-macos-permissive-proxied.sb	1.31 kB
./bundle/sandbox-macos-restrictive-open.sb	3.36 kB
./bundle/sandbox-macos-restrictive-proxied.sb	3.56 kB
./bundle/sandbox-macos-strict-open.sb	4.82 kB
./bundle/sandbox-macos-strict-proxied.sb	5.02 kB

_{compressed-size-action}

[gemini-code-assist]

Code Review

This pull request refactors the theme handling to blend the UI background color with the detected terminal background color. This is achieved by introducing a terminalBackground override in the ThemeManager, which dynamically adjusts theme colors. Components are updated to consume these new dynamic colors from the theme system instead of relying on props. While the approach is sound, I've identified a performance issue where new theme objects are created on every render, potentially causing unnecessary re-renders throughout the application. I've suggested using the existing LruCache dependency to cache these objects and prevent this.

[sehoon38]

LGTM!