Skip to content

TUI editor history search retains stale styles after a live theme change #3784

Description

@aheritier

Summary

The TUI editor does not fully apply live theme changes to its history-search input.

When messages.ThemeChangedMsg is handled by pkg/tui/components/editor, the editor reapplies the current theme to its main textarea:

e.textarea.SetStyles(styles.InputStyle)

However, it does not reapply styles to the internal searchInput. That input is initialized with customized styles in editor.New, including DialogInputStyle and MutedStyle, so it retains colors from the theme that was active when the editor was constructed.

Affected component/version

  • Component: pkg/tui/components/editor
  • Module: github.com/docker/docker-agent
  • Version: v1.109.0

Reproduction

  1. Start docker-agent with a dark theme.
  2. Open the TUI editor.
  3. Change the theme live to the light catppuccin-latte theme.
  4. Enter history search.
  5. Observe the history-search input and its text/placeholder styling.

The main editor textarea updates to the new theme, but the history-search input continues to use colors from the previous theme.

Expected behavior

After receiving messages.ThemeChangedMsg, both the main textarea and the internal history-search input should use styles derived from the current theme. In particular, history-search text and placeholder content should use the current theme's muted color. With the light catppuccin-latte theme, this is expected to be approximately #6c6f85.

Actual behavior

Only the main textarea is restyled. The searchInput retains the styles captured at construction time. In the observed truecolor terminal output, the stale history-search styling emitted gray text as 38;2;128;128;128 instead of the light theme's muted color #6c6f85. This produces visibly stale dark-theme styling after switching to the light theme.

Suggested fix

In the messages.ThemeChangedMsg handler, reapply the customized styles to searchInput in addition to updating the main textarea, preserving the construction-time customization, for example:

case messages.ThemeChangedMsg:
    e.textarea.SetStyles(styles.InputStyle)

    searchStyles := styles.DialogInputStyle
    searchStyles.Focused.Text = styles.MutedStyle
    searchStyles.Focused.Placeholder = styles.MutedStyle
    searchStyles.Blurred.Text = styles.MutedStyle
    searchStyles.Blurred.Placeholder = styles.MutedStyle
    e.searchInput.SetStyles(searchStyles)

    return e, nil

A focused regression test would be useful to verify that sending messages.ThemeChangedMsg updates the history-search input's rendered colors as well as the main textarea.

Downstream context

Found while fixing a WCAG contrast issue in Docker Sandboxes' Gordon assistant (https://github.com/docker/sandboxes): on the light catppuccin-latte theme the composer text rendered at approximately 1.6:1 contrast. The Sandboxes-side fix synchronizes the theme before constructing the editor, forwards ThemeChangedMsg, and correctly handles first-open, /new, and the main textarea. The remaining issue is upstream in docker-agent: the history-search sub-input is not restyled when the theme changes live. Sandboxes PR: https://github.com/docker/sandboxes/pull/4528

Metadata

Metadata

Assignees

Labels

area/tuiFor features/issues/fixes related to the TUI

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions