Adapt TUIs to light and dark terminal backgrounds#149
Open
skarim wants to merge 1 commit into
Open
Conversation
The submit, view, and modify TUIs were tuned for dark terminals. On light or solarized-light backgrounds the result was hard to read and inverted: primary text used ANSI white (invisible on white), dim chrome used light grays (too faint), and accents used bright cyan (low contrast) — so "active" things looked lighter than "disabled" ones. Introduce a centralized, background-aware color palette and migrate all three TUIs to it: - internal/tui/shared/theme.go: a semantic palette of lipgloss.AdaptiveColor values (primary/muted/faint text, chrome/border, accent, PR-state colors, badge backgrounds, row shade, button, switch). lipgloss resolves the light/dark variant per render from the terminal background, which Bubble Tea detects at startup; terminals that don't report it fall back to dark, preserving the original look. - Replace every hardcoded ANSI color in shared/, submitview/, and modifyview/ with palette roles. The four pre-rendered status icons now render at use-time so their adaptive colors resolve correctly. The submit markdown preview picks glamour's light or dark style from the detected background. - GH_STACK_THEME=auto|light|dark forces the palette for terminals that mis-detect (some SSH/tmux setups); wired via the root command's PersistentPreRun before any render. Documented in the README and CLI docs. Neutral text/chrome use truecolor hex (GitHub Primer-inspired) for predictability across themes, including solarized which repurposes ANSI 8-15; lipgloss downsamples on terminals without truecolor. Tests verify the palette resolves differently for light vs dark and that GH_STACK_THEME is honored.
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes the submit, view, and modify interactive TUIs readable on both light and dark terminal backgrounds. Previously colors were hardcoded ANSI indices tuned only for dark terminals (e.g. ANSI white was invisible on light backgrounds, accents were low-contrast). It introduces a centralized, background-aware palette of lipgloss.AdaptiveColor roles and migrates every hardcoded color across shared/, submitview/, and modifyview/ to it.
Changes:
- New
internal/tui/shared/theme.godefines a semantic, GitHub Primer-inspired palette (text/muted/faint, border, accent, PR-state, badge, button, switch) usinglipgloss.AdaptiveColor, plusApplyThemeOverride()honoringGH_STACK_THEME=auto|light|dark, wired via the root command'sPersistentPreRun. - Replaces hardcoded ANSI colors with palette roles everywhere; status icons now render at use-time so adaptive colors resolve against the detected background, and the markdown preview picks glamour's light/dark style from
lipgloss.HasDarkBackground(). - Adds tests (
theme_test.go) verifying the palette differs by background and thatGH_STACK_THEMEis honored, plus README and CLI docs.
Show a summary per file
| File | Description |
|---|---|
internal/tui/shared/theme.go |
New adaptive palette + ApplyThemeOverride() for GH_STACK_THEME. |
internal/tui/shared/theme_test.go |
Tests palette background-awareness and theme override. |
internal/tui/shared/styles.go |
Migrates branch/PR/diff/connector/header styles to palette; icons rendered at use-time. |
internal/tui/shared/render.go |
StatusIcon renders glyph+style at use-time instead of pre-rendered icons. |
internal/tui/shared/header.go |
Disabled-shortcut style uses ColorTextFaint. |
internal/tui/submitview/styles.go |
State fg/bg, chrome, switch, segment styles moved to palette; Color() returns TerminalColor. |
internal/tui/submitview/screen.go |
Branch circle/name/checkbox + left panel border use palette. |
internal/tui/submitview/editor.go |
Field/desc box borders use palette accent/border. |
internal/tui/submitview/render.go |
Chrome + "new PRs" highlight use palette. |
internal/tui/submitview/preview.go |
Selects light/dark glamour style from detected background. |
internal/tui/submitview/help.go |
Help overlay styles use palette. |
internal/tui/modifyview/styles.go |
Action/connector/status/help/transient styles use palette. |
internal/tui/modifyview/model.go |
Pending-summary icon uses ColorYellow. |
cmd/root.go |
PersistentPreRun applies the theme override before any render. |
README.md, docs/.../cli.md |
Document GH_STACK_THEME and auto-adaptation behavior. |
Review details
- Files reviewed: 16/16 changed files
- Comments generated: 0
- Review effort level: Medium
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The submit, view, and modify TUIs were tuned for dark terminals. On light
or solarized-light backgrounds the result was hard to read and inverted:
primary text used ANSI white (invisible on white), dim chrome used light
grays (too faint), and accents used bright cyan (low contrast) — so
"active" things looked lighter than "disabled" ones.
Introduce a centralized, background-aware color palette and migrate all
three TUIs to it:
values (primary/muted/faint text, chrome/border, accent, PR-state colors,
badge backgrounds, row shade, button, switch). lipgloss resolves the
light/dark variant per render from the terminal background, which Bubble
Tea detects at startup; terminals that don't report it fall back to dark,
preserving the original look.
modifyview/ with palette roles. The four pre-rendered status icons now
render at use-time so their adaptive colors resolve correctly. The submit
markdown preview picks glamour's light or dark style from the detected
background.
mis-detect (some SSH/tmux setups); wired via the root command's
PersistentPreRun before any render. Documented in the README and CLI docs.
Neutral text/chrome use truecolor hex (GitHub Primer-inspired) for
predictability across themes, including solarized which repurposes ANSI
8-15; lipgloss downsamples on terminals without truecolor.
Tests verify the palette resolves differently for light vs dark and that
GH_STACK_THEME is honored.
Stack created with GitHub Stacks CLI • Give Feedback 💬