Toast notification doesn't follow theme colors #4760

Closed
opened 2026-02-16 17:45:19 -05:00 by yindo · 1 comment
Owner

Originally created by @fgonzalezurriola on GitHub (Jan 11, 2026).

Originally assigned to: @adamdotdevin on GitHub.

Description

The toast notification (e.g., "Update available" in desktop app) uses inverted colors that don't adapt to theme changes.

Current behavior

  • Light mode: Toast has dark background
  • Dark mode: Toast has light background
  • Uses --surface-float-base and --text-invert-* tokens which are designed to be inverted

Expected behavior

Toast should follow the current theme like the rest of the UI:

  • Light mode → light background
  • Dark mode → dark background

Technical details

The issue is in packages/ui/src/components/toast.css:

  • Uses --surface-float-base (designed for inverted colors)
  • Uses --text-invert-* tokens (some don't exist, like --text-invert-stronger)

Screenshots

Toast in light mode shows dark background (doesn't follow theme):
[User reported this issue in desktop app]

Environment

  • OpenCode Desktop
  • Affects all themes
  • CSS tokens issue in UI package
Originally created by @fgonzalezurriola on GitHub (Jan 11, 2026). Originally assigned to: @adamdotdevin on GitHub. ## Description The toast notification (e.g., "Update available" in desktop app) uses inverted colors that don't adapt to theme changes. ## Current behavior - **Light mode**: Toast has dark background - **Dark mode**: Toast has light background - Uses `--surface-float-base` and `--text-invert-*` tokens which are designed to be inverted ## Expected behavior Toast should follow the current theme like the rest of the UI: - Light mode → light background - Dark mode → dark background ## Technical details The issue is in `packages/ui/src/components/toast.css`: - Uses `--surface-float-base` (designed for inverted colors) - Uses `--text-invert-*` tokens (some don't exist, like `--text-invert-stronger`) ## Screenshots Toast in light mode shows dark background (doesn't follow theme): [User reported this issue in desktop app] ## Environment - OpenCode Desktop - Affects all themes - CSS tokens issue in UI package
yindo added the web label 2026-02-16 17:45:19 -05:00
yindo closed this issue 2026-02-16 17:45:19 -05:00
Author
Owner

@github-actions[bot] commented on GitHub (Jan 11, 2026):

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

  • #7505: Standard UI theme has several troubles
  • #7739: Invisible text in question selector
  • #5295: Text selection has poor contrast/readability on light terminals with certain themes
  • #6630: Code Blocks Are Hard To Read When They Have Backgrounds

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

@github-actions[bot] commented on GitHub (Jan 11, 2026): This issue might be a duplicate of existing issues. Please check: - #7505: Standard UI theme has several troubles - #7739: Invisible text in question selector - #5295: Text selection has poor contrast/readability on light terminals with certain themes - #6630: Code Blocks Are Hard To Read When They Have Backgrounds Feel free to ignore if none of these address your specific case.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#4760