Skip to content

Align theme with primer colors - #589

Merged
skarim merged 7 commits into
mainfrom
skarim/brand-styling
Oct 26, 2026
Merged

skarim merged 7 commits into
mainfrom
skarim/brand-styling

Conversation

@skarim

@skarim skarim commented Oct 25, 2026 •

Copy link
Copy Markdown
Collaborator

Aligns gh-stack's look with GitHub's brand and the GitHub Copilot CLI: colors now come from Primer Brand, and the full-screen view, modify, and submit screens paint GitHub's dark or light canvas behind themselves.

Functionality and user impact

  • GitHub canvas in full-screen screens. view, modify, and submit set the terminal to GitHub's canvas while they're open, like the Copilot CLI: #0d1117 with #f0f6fc text on dark terminals, #ffffff with #1f2328 on light ones. Painting needs a truecolor terminal. NO_COLOR, non-terminal output, and the new GH_STACK_BACKGROUND=terminal keep the terminal's own colors, and in tmux only the current pane is painted. GH_STACK_THEME also picks the canvas.
  • The terminal's colors come back. They're reset when a screen closes (including on Ctrl+C, signals, and panics) and while $EDITOR is open from submit. gh-stack also records the terminal's colors before painting and restores any the reset misses, such as colors set at runtime by pywal or base16-shell, or terminals that ignore the reset. Terminals that follow automatic light/dark switching keep following it.
  • Primer Brand colors. The teal accent becomes Primer Brand blue, and the PR-state colors move to Brand shades that meet WCAG AA contrast on GitHub's canvases. Primary actions (the submit and stack buttons, the selected Ready/Draft option, the CREATE PR switch, and completed merge steps) use the Brand green button style.
  • Everything else keeps the terminal's background. Plain command output and the inline checkout and merge screens use the new colors but never paint the background.
  • Preview and logo. The submit description preview uses the palette and GitHub's syntax highlighting, and the header logo switches to the dark Invertocat on light backgrounds.

Before images use a typical terminal theme. After images of the full-screen screens show the GitHub canvas.

Screen Before After
gh stack view, dark terminal gh stack view on a dark terminal, before gh stack view on a dark terminal, after
gh stack view, light terminal gh stack view on a light terminal, before gh stack view on a light terminal, after
gh stack submit, dark terminal gh stack submit on a dark terminal, before gh stack submit on a dark terminal, after
gh stack submit, light terminal gh stack submit on a light terminal, before gh stack submit on a light terminal, after
Description preview, dark terminal submit description preview on a dark terminal, before submit description preview on a dark terminal, after
Description preview, light terminal submit description preview on a light terminal, before submit description preview on a light terminal, after
gh stack modify, dark terminal gh stack modify on a dark terminal, before gh stack modify on a dark terminal, after
gh stack merge, dark terminal gh stack merge on a dark terminal, before gh stack merge on a dark terminal, after
gh stack checkout, dark terminal gh stack checkout on a dark terminal, before gh stack checkout on a dark terminal, after
Command output, dark terminal command output on a dark terminal, before command output on a dark terminal, after
Command output, light terminal command output on a light terminal, before command output on a light terminal, after

Key areas to review

Testing

Build, go vet ./... (also with GOOS=windows), and the full race-enabled suite (go run ./scripts/test -workers 4) pass. The built binary was also run in a PTY against a terminal emulator that tracks color state: colors came back after q, Ctrl+C, Esc, and SIGTERM on dark, light, pywal-style, tmux, and reset-ignoring terminals, and the opt-out and plain output never painted. Manually tested in real terminals, and design review is complete.

skarim and others added 6 commits October 24, 2026 21:56
Name the role rather than the hue, ahead of the accent moving to GitHub
blue: Config.ColorCyan becomes ColorAccent and theme.Cyan becomes
theme.Accent.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Switch the teal accent to Primer Brand blue and move the PR-state colors
to Brand steps that keep AA contrast on GitHub's canvases. Primary
actions use the Brand green button fill, and every color now lives in
internal/theme, guarded by a contrast test.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
view, modify, and submit set the terminal background and text to
GitHub's canvas while on the alternate screen, like the Copilot CLI.
Colors are reset on every exit path and around $EDITOR, then checked
and restored after the program. GH_STACK_BACKGROUND=terminal opts out.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Recolor the submit preview's markdown to the palette (ink headings,
accent links, neutral code chips) and highlight code blocks with
GitHub's own light and dark syntax themes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The header logo was white-only and disappeared on the light canvas.
Embed the dark GitHub mark and pick the variant from the background.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Describe the GitHub palette and canvas, the new GH_STACK_BACKGROUND
option, and how terminal colors are restored. Add contributor notes on
keeping colors in internal/theme and running TUIs through
runFullScreenTUI.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI max review requested due to automatic review settings October 25, 2026 02:08

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Terminal-wide color restoration is emulator-dependent, and unresolved restoration and contrast issues require fixes and human validation.

4 open issues
What changed in this PR

Aligns gh-stack’s command output and terminal interfaces with GitHub’s Primer Brand palette, adding GitHub backgrounds to full-screen screens.

Changes:

  • Centralize palette roles, status badges, and primary-action colors.
  • Add full-screen canvas painting, color restoration, and a background opt-out.
  • Refresh Markdown previews and logos, with supporting tests and documentation.
File Description
README.md Document canvas behavior, theme controls, and recovery.
internal/​tui/​submitview/​styles.go Apply shared badges and primary-action colors.
internal/​tui/​submitview/​styles_test.go Check badge and primary-action rendering.
internal/​tui/​submitview/​screen.go Update accent-color terminology in comments.
internal/​tui/​submitview/​preview.go Theme Markdown previews and preserve editor terminal output.
internal/​tui/​submitview/​preview_test.go Cover preview colors, highlighting, and editor setup.
internal/​tui/​submitview/​editor.go Update toggle and focus-style comments.
internal/​tui/​shared/​theme.go Expose shared palette and badge aliases.
internal/​tui/​shared/​render.go Update current-branch styling terminology in comments.
internal/​tui/​shared/​logo.go Choose the logo variant for the detected background.
internal/​tui/​shared/​header.go Update the default icon-color comment.
internal/​tui/​shared/​header_test.go Verify background-aware logo selection.
internal/​tui/​mergeview/​view.go Apply primary and inverse stepper colors.
internal/​tui/​mergeview/​model_test.go Check stepper color roles.
internal/​tui/​checkoutview/​styles.go Use centralized dim status colors.
internal/​theme/​theme.go Define Primer Brand colors, fills, and badges.
internal/​theme/​theme_test.go Add palette contrast checks.
internal/​theme/​canvas.go Implement canvas painting and terminal-color restoration.
internal/​theme/​canvas_test.go Cover canvas transitions and restoration behavior.
internal/​modify/​preconditions.go Use accent highlighting in guidance.
internal/​modify/​apply.go Use accent highlighting in recovery instructions.
internal/​config/​testing.go Rename the test color hook to accent.
internal/​config/​config.go Wire accent coloring into configuration and messages.
internal/​config/​color_test.go Update accent-color coverage.
docs/​src/​content/​docs/​reference/​cli.md Document canvas and palette environment variables.
cmd/​worktree_utils.go Use accent highlighting for navigation guidance.
cmd/​view.go Route full-screen viewing through the canvas wrapper.
cmd/​utils.go Add shared full-screen canvas integration.
cmd/​utils_test.go Cover canvas eligibility and opt-out behavior.
cmd/​unstack.go Use accent highlighting for flag guidance.
cmd/​sync.go Use accent highlighting for follow-up commands.
cmd/​submit.go Use the canvas wrapper and accent highlighting.
cmd/​rebase.go Use accent highlighting in conflict instructions.
cmd/​rebase_worktree.go Use accent highlighting for push guidance.
cmd/​push.go Use accent highlighting for follow-up commands.
cmd/​modify.go Use the canvas wrapper and accent highlighting.
cmd/​merge.go Use accent highlighting in merge guidance.
cmd/​init.go Use accent highlighting in setup guidance.
cmd/​checkout.go Use accent highlighting in checkout guidance.
cmd/​alias.go Use accent highlighting in alias messages.
cmd/​add.go Use accent highlighting in branch guidance.
AGENTS.md Document palette ownership and canvas lifecycle conventions.
.github/​copilot-instructions.md Add theme and full-screen integration guidance.

Review effort: Max

Comment thread internal/theme/canvas.go
Comment thread internal/theme/canvas.go Outdated
Comment thread internal/theme/theme.go
Comment thread internal/theme/theme.go
Probe each terminal color before Bubble Tea owns input and apply the
resulting plan at every alternate-screen exit: a reset when it brings
the color back, so theme changes made while a screen is open still
apply, or an explicit set for runtime-set colors and terminals that
ignore resets, which now also covers $EDITOR.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@skarim
skarim merged commit c00989a into main Oct 26, 2026
15 checks passed
@skarim
skarim deleted the skarim/brand-styling branch October 26, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants