[PR #390] [MERGED] fix(diff): add fg prop to support light mode themes #505

New issue

Closed

opened 2026-03-02 23:46:49 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 23:46:49 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/390
Author: @code-yeongyu
Created: 12/6/2025
Status: ✅ Merged
Merged: 12/8/2025
Merged by: @kommander

Base: main ← Head: fix/diff-fg-light-mode

📝 Commits (1)

e49e14f fix(diff): add fg prop to support light mode themes

📊 Changes

2 files changed (+212 additions, -0 deletions)

View changed files

📝 packages/core/src/renderables/Diff.test.ts (+188 -0)
📝 packages/core/src/renderables/Diff.ts (+24 -0)

📄 Description

Fix unreadable diff text on light mode themes by adding fg prop.

Problem

When using DiffRenderable with light mode themes, syntax-unhighlighted tokens render as white text (hardcoded default in CodeRenderable), making them invisible on light backgrounds.
This is problematic on OpenCode light theme diff editor where no syntax highlighting is supported- the letters are all rendered as white.

Solution

Add fg prop to DiffRenderable, allowing consumers to pass a foreground color that propagates to underlying CodeRenderables.

Changes

Add fg option to DiffRenderableOptions
Pass fg to CodeRenderables on construction and updates
Add getter/setter for dynamic updates
Add 7 tests

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/390 **Author:** [@code-yeongyu](https://github.com/code-yeongyu) **Created:** 12/6/2025 **Status:** ✅ Merged **Merged:** 12/8/2025 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `fix/diff-fg-light-mode` --- ### 📝 Commits (1) - [`e49e14f`](https://github.com/anomalyco/opentui/commit/e49e14f1c33a2d329588bfe12a4a5d636418bb4b) fix(diff): add fg prop to support light mode themes ### 📊 Changes **2 files changed** (+212 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/renderables/Diff.test.ts` (+188 -0) 📝 `packages/core/src/renderables/Diff.ts` (+24 -0) </details> ### 📄 Description Fix unreadable diff text on light mode themes by adding `fg` prop. ## Problem When using DiffRenderable with light mode themes, syntax-unhighlighted tokens render as white text (hardcoded default in CodeRenderable), making them invisible on light backgrounds. This is problematic on OpenCode light theme diff editor where no syntax highlighting is supported- the letters are all rendered as white. ## Solution Add `fg` prop to DiffRenderable, allowing consumers to pass a foreground color that propagates to underlying CodeRenderables. ## Changes - Add `fg` option to DiffRenderableOptions - Pass `fg` to CodeRenderables on construction and updates - Add getter/setter for dynamic updates - Add 7 tests --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>