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

[PR #7972] fix(ui): use explicit light text colors for toast on dark float surface #12580

New Issue
Open
opened 2026-02-16 18:17:28 -05:00 by yindo · 0 comments
yindo commented 2026-02-16 18:17:28 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/anomalyco/opencode/pull/7972

State: open
Merged: No

Summary

Fixes #7833

Toast text is unreadable in Light mode because dark text appears on a dark background.

Root Cause

The toast component uses --surface-float-base which is a dark surface in both light and dark modes. However, it was using --text-invert-* CSS variables for text colors. These variables don't properly resolve to light colors in light mode due to how neutralAlpha is calculated in the theme resolver (resolve.ts).

This causes:

  • Light mode: Dark text on dark toast background (unreadable)
  • Dark mode: Works correctly

Changes

Replace --text-invert-* variables with explicit --smoke-dark-* colors which are always light colors suitable for dark backgrounds:

Element Old Variable New Variable Color
Title --text-invert-strong --smoke-dark-12 #f1ecec (near-white)
Description --text-invert-base --smoke-dark-11 #b7b1b1 (light gray)
Icon --text-invert-stronger --smoke-dark-12 #f1ecec
Action (weak) --text-invert-weak --smoke-dark-9 #716c6b (medium gray)
Action (first) --text-invert-strong --smoke-dark-12 #f1ecec

Test plan

  • UI package typechecks pass
  • Visual verification: Toast text is readable in both Light and Dark modes

🤖 Generated with Claude Code

**Original Pull Request:** https://github.com/anomalyco/opencode/pull/7972 **State:** open **Merged:** No --- ## Summary Fixes #7833 Toast text is unreadable in Light mode because dark text appears on a dark background. ## Root Cause The toast component uses `--surface-float-base` which is a dark surface in both light and dark modes. However, it was using `--text-invert-*` CSS variables for text colors. These variables don't properly resolve to light colors in light mode due to how `neutralAlpha` is calculated in the theme resolver (`resolve.ts`). This causes: - Light mode: Dark text on dark toast background (unreadable) - Dark mode: Works correctly ## Changes Replace `--text-invert-*` variables with explicit `--smoke-dark-*` colors which are always light colors suitable for dark backgrounds: | Element | Old Variable | New Variable | Color | |---------|--------------|--------------|-------| | Title | `--text-invert-strong` | `--smoke-dark-12` | `#f1ecec` (near-white) | | Description | `--text-invert-base` | `--smoke-dark-11` | `#b7b1b1` (light gray) | | Icon | `--text-invert-stronger` | `--smoke-dark-12` | `#f1ecec` | | Action (weak) | `--text-invert-weak` | `--smoke-dark-9` | `#716c6b` (medium gray) | | Action (first) | `--text-invert-strong` | `--smoke-dark-12` | `#f1ecec` | ## Test plan - [x] UI package typechecks pass - [ ] Visual verification: Toast text is readable in both Light and Dark modes --- 🤖 Generated with Claude Code
yindo added the pull-request label 2026-02-16 18:17:28 -05:00
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 pull-request
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#12580
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?