anomalyco/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-07-22 18:25:32 -04:00
Code Issues 5.9k Packages Projects Releases 19 Wiki Activity

Implement System Theme Support in OpenTUI #2467

New Issue
Closed
opened 2026-02-16 17:35:46 -05:00 by yindo · 1 comment
yindo commented 2026-02-16 17:35:46 -05:00
Owner
Copy Link
Copy Source

Originally created by @shuv1337 on GitHub (Nov 2, 2025).

Implement System Theme Support in OpenTUI

Problem/Context

The OpenTUI version of OpenCode currently lacks the system theme functionality that exists in the Go TUI version. The Go implementation (packages/tui/internal/theme/system.go) provides dynamic theme adaptation based on the terminal's background color, automatically generating appropriate grayscale colors and using ANSI colors for compatibility.

Currently, OpenTUI only supports static JSON-based themes defined in packages/opencode/src/cli/cmd/tui/context/theme.tsx, with no runtime detection or adaptation capabilities.

Acceptance Criteria

  • System theme option appears in theme picker alongside existing static themes
  • System theme automatically detects terminal background color (dark/light)
  • Dynamic color generation creates appropriate grayscale palette based on terminal background
  • ANSI colors are used for primary/accent colors for terminal compatibility
  • Theme updates at runtime if terminal background changes
  • Graceful fallback to default theme if detection fails
  • KV persistence works correctly with dynamic system theme
  • All UI surfaces (dialogs, markdown, diffs, syntax) render correctly with system theme

Implementation Details

Current Architecture Analysis

Go TUI Implementation (packages/tui/internal/theme/system.go):

  • SystemTheme struct with NewSystemTheme(terminalBg color.Color, isDark bool)
  • Dynamic grayscale generation using generateGrayScale() method
  • Luminance calculation: 0.299*bgR + 0.587*bgG + 0.114*bgB
  • Adaptive color mapping for dark/light terminals
  • ANSI color usage for primary colors (cyan, magenta, etc.)
  • Runtime updates via UpdateSystemTheme() function

OpenTUI Current State (packages/opencode/src/cli/cmd/tui/context/theme.tsx):

  • Static theme resolution via resolveTheme(themeJson) function
  • Fixed color mapping from JSON definitions to RGBA values
  • No runtime detection or dynamic generation capabilities

Required Components

1. Terminal Background Detection

// packages/opencode/src/cli/cmd/tui/context/theme.tsx
function detectTerminalBackground(): { bg: RGBA; isDark: boolean } {
  // Implementation needed:
  // - Use Node.js process APIs or ANSI escape sequences
  // - Query terminal background color
  // - Determine if terminal is dark or light mode
  // - Handle cross-platform differences
}

2. Dynamic Theme Generation

// packages/opencode/src/cli/cmd/tui/context/theme.tsx
function createSystemTheme(bgColor: RGBA, isDark: boolean): Theme {
  // Implementation needed:
  // - Port grayscale generation logic from Go version
  // - Generate 12-step grayscale palette
  // - Map to Theme interface properties
  // - Use ANSI colors for primary/accent colors
}

3. Theme Integration

// packages/opencode/src/cli/cmd/tui/context/theme.tsx
export const THEMES: Record<string, Theme> = {
  // ... existing themes
  system: createSystemTheme(...detectTerminalBackground()),
}

4. Runtime Updates

  • Implement theme update mechanism when terminal colors change
  • Add event listeners for terminal color changes
  • Update theme registry dynamically

Technical Approach

  1. Detection Strategy: Use ANSI escape sequences or Node.js TTY APIs to detect terminal background
  2. Color Generation: Port the Go implementation's luminance-based grayscale generation
  3. ANSI Mapping: Use standard ANSI 16 colors for primary/accent colors
  4. Fallback Strategy: Default to opencode theme if detection fails
  5. Performance: Cache detection results and only update when necessary

Reference Implementation

The Go implementation in packages/tui/internal/theme/system.go provides a complete reference for:

  • Color detection and luminance calculation
  • Grayscale palette generation algorithm
  • ANSI color mapping strategy
  • Dark/light mode adaptation logic

Files to Modify

  • packages/opencode/src/cli/cmd/tui/context/theme.tsx - Add system theme detection and generation
  • packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx - Ensure system theme appears in picker
  • packages/opencode/src/cli/cmd/tui/context/kv.tsx - Verify KV persistence works with dynamic theme

Testing Strategy

  • Unit tests for color detection functions
  • Integration tests for theme generation
  • Manual testing across different terminal environments
  • Regression testing for existing static themes

Tasks

  • Research terminal color detection methods for Node.js
  • Implement terminal background detection function
  • Port grayscale generation logic from Go implementation
  • Create system theme generation function
  • Add system theme to THEMES registry
  • Update theme picker to include system option
  • Implement runtime theme updates
  • Add error handling and fallback logic
  • Write unit tests for new functionality
  • Test across different terminal environments
  • Update documentation

Additional Context

This feature was previously available in the Go TUI version and users expect similar functionality in OpenTUI. The implementation should maintain feature parity while adapting to the TypeScript/OpenTUI architecture.

The existing Go implementation provides a solid foundation and reference for the required algorithms and color generation logic.

Originally created by @shuv1337 on GitHub (Nov 2, 2025). # Implement System Theme Support in OpenTUI ## Problem/Context The OpenTUI version of OpenCode currently lacks the system theme functionality that exists in the Go TUI version. The Go implementation (`packages/tui/internal/theme/system.go`) provides dynamic theme adaptation based on the terminal's background color, automatically generating appropriate grayscale colors and using ANSI colors for compatibility. Currently, OpenTUI only supports static JSON-based themes defined in `packages/opencode/src/cli/cmd/tui/context/theme.tsx`, with no runtime detection or adaptation capabilities. ## Acceptance Criteria - [ ] System theme option appears in theme picker alongside existing static themes - [ ] System theme automatically detects terminal background color (dark/light) - [ ] Dynamic color generation creates appropriate grayscale palette based on terminal background - [ ] ANSI colors are used for primary/accent colors for terminal compatibility - [ ] Theme updates at runtime if terminal background changes - [ ] Graceful fallback to default theme if detection fails - [ ] KV persistence works correctly with dynamic system theme - [ ] All UI surfaces (dialogs, markdown, diffs, syntax) render correctly with system theme ## Implementation Details ### Current Architecture Analysis **Go TUI Implementation** (`packages/tui/internal/theme/system.go`): - `SystemTheme` struct with `NewSystemTheme(terminalBg color.Color, isDark bool)` - Dynamic grayscale generation using `generateGrayScale()` method - Luminance calculation: `0.299*bgR + 0.587*bgG + 0.114*bgB` - Adaptive color mapping for dark/light terminals - ANSI color usage for primary colors (cyan, magenta, etc.) - Runtime updates via `UpdateSystemTheme()` function **OpenTUI Current State** (`packages/opencode/src/cli/cmd/tui/context/theme.tsx`): - Static theme resolution via `resolveTheme(themeJson)` function - Fixed color mapping from JSON definitions to RGBA values - No runtime detection or dynamic generation capabilities ### Required Components #### 1. Terminal Background Detection ```typescript // packages/opencode/src/cli/cmd/tui/context/theme.tsx function detectTerminalBackground(): { bg: RGBA; isDark: boolean } { // Implementation needed: // - Use Node.js process APIs or ANSI escape sequences // - Query terminal background color // - Determine if terminal is dark or light mode // - Handle cross-platform differences } ``` #### 2. Dynamic Theme Generation ```typescript // packages/opencode/src/cli/cmd/tui/context/theme.tsx function createSystemTheme(bgColor: RGBA, isDark: boolean): Theme { // Implementation needed: // - Port grayscale generation logic from Go version // - Generate 12-step grayscale palette // - Map to Theme interface properties // - Use ANSI colors for primary/accent colors } ``` #### 3. Theme Integration ```typescript // packages/opencode/src/cli/cmd/tui/context/theme.tsx export const THEMES: Record<string, Theme> = { // ... existing themes system: createSystemTheme(...detectTerminalBackground()), } ``` #### 4. Runtime Updates - Implement theme update mechanism when terminal colors change - Add event listeners for terminal color changes - Update theme registry dynamically ### Technical Approach 1. **Detection Strategy**: Use ANSI escape sequences or Node.js TTY APIs to detect terminal background 2. **Color Generation**: Port the Go implementation's luminance-based grayscale generation 3. **ANSI Mapping**: Use standard ANSI 16 colors for primary/accent colors 4. **Fallback Strategy**: Default to opencode theme if detection fails 5. **Performance**: Cache detection results and only update when necessary ### Reference Implementation The Go implementation in `packages/tui/internal/theme/system.go` provides a complete reference for: - Color detection and luminance calculation - Grayscale palette generation algorithm - ANSI color mapping strategy - Dark/light mode adaptation logic ### Files to Modify - `packages/opencode/src/cli/cmd/tui/context/theme.tsx` - Add system theme detection and generation - `packages/opencode/src/cli/cmd/tui/component/dialog-theme-list.tsx` - Ensure system theme appears in picker - `packages/opencode/src/cli/cmd/tui/context/kv.tsx` - Verify KV persistence works with dynamic theme ### Testing Strategy - Unit tests for color detection functions - Integration tests for theme generation - Manual testing across different terminal environments - Regression testing for existing static themes ## Tasks - [ ] Research terminal color detection methods for Node.js - [ ] Implement terminal background detection function - [ ] Port grayscale generation logic from Go implementation - [ ] Create system theme generation function - [ ] Add system theme to THEMES registry - [ ] Update theme picker to include system option - [ ] Implement runtime theme updates - [ ] Add error handling and fallback logic - [ ] Write unit tests for new functionality - [ ] Test across different terminal environments - [ ] Update documentation ## Additional Context This feature was previously available in the Go TUI version and users expect similar functionality in OpenTUI. The implementation should maintain feature parity while adapting to the TypeScript/OpenTUI architecture. The existing Go implementation provides a solid foundation and reference for the required algorithms and color generation logic.
yindo closed this issue 2026-02-16 17:35:46 -05:00
yindo commented 2026-02-16 17:35:46 -05:00
Author
Owner
Copy Link
Copy Source

@github-actions[bot] commented on GitHub (Nov 2, 2025):

This issue might be a duplicate of existing issues. Please check:

  • #3644: [FEATURE]: "system" theme to use existing terminal palette - This is requesting exactly the same functionality: a system theme that uses the existing terminal palette instead of predefined colors
  • #3688: System Theme no longer works after v1.0.0 - Reports that system theme functionality was lost in v1.0+ versions, indicating this feature previously existed but was removed/broken
  • #101: Use terminal theme colors by default - Requests using terminal color codes instead of hex colors by default, which overlaps with the system theme concept
  • #431: Emacs vterm should default to system theme - Specifically mentions system theme functionality and shows it was available in some capacity

The core request for system theme support that adapts to terminal colors appears to be a frequently requested feature that may have regressed in recent versions.

Feel free to ignore if none of these address your specific case.

@github-actions[bot] commented on GitHub (Nov 2, 2025): This issue might be a duplicate of existing issues. Please check: - #3644: [FEATURE]: "system" theme to use existing terminal palette - This is requesting exactly the same functionality: a system theme that uses the existing terminal palette instead of predefined colors - #3688: System Theme no longer works after v1.0.0 - Reports that system theme functionality was lost in v1.0+ versions, indicating this feature previously existed but was removed/broken - #101: Use terminal theme colors by default - Requests using terminal color codes instead of hex colors by default, which overlaps with the system theme concept - #431: Emacs vterm should default to system theme - Specifically mentions system theme functionality and shows it was available in some capacity The core request for system theme support that adapts to terminal colors appears to be a frequently requested feature that may have regressed in recent versions. Feel free to ignore if none of these address your specific case.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
acp
bad
bug
discussion
docs
documentation
enhancement
extension
good first issue
growth
help-wanted
mcp
model-problem
needs:compliance
nix
opentui
perf
pull-request
Mirrored from GitHub Pull Request
 tui
web
windows
zen
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#2467
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?