fix: canvas status badges and agent logos invisible in light mode - #432
Merged
Conversation
Adds missing Tailwind color overrides for light mode in globals.css: zinc-300/400, slate-300/400, orange-300, emerald-300, teal-300, cyan-300, violet-300, pink-300. These -300 shades were missing from the :root:not(.dark) override block, keeping them at their default light/pastel Tailwind values. On the light --canvas-chrome (#f4f4f5) background, text in these colors was nearly invisible.
Change logo SVG fill/stroke colors from off-white (#F1ECEC) and white to #A1A1AA (zinc-400) so they are visible on both light and dark backgrounds. anthropic.svg already uses #d97757 (orange) which works in both modes.
dimavedenyapin
changed the title
Replace <img> elements with inline <svg> elements using fill="currentColor" and stroke="currentColor" so the logos adapt to both light and dark mode via the parent's text color class. The previous <img> approach used hardcoded SVG colors (white/off-white) that were invisible in light mode. Revert SVG file color changes to keep opencode.svg and openai.svg in their original state (unused after this refactor).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two visibility fixes for light mode:
1. Canvas status/badge text colors (globals.css)
Panel status badges (Not Started, Triaging, Working, etc.) and panel type badges (Transcript, App, Browser, etc.) use Tailwind
*-300color shades. Several were missing from the:root:not(.dark)CSS override block — keeping them at default light/pastel values invisible on light canvas chrome.Added 10 missing
--color-*-300/400CSS overrides: zinc, slate, orange-300, emerald-300, teal-300, cyan-300, violet-300, pink-300.2. Agent logos (AgentLogos.tsx)
OpenCode, Anthropic, and OpenAI/Codex logos were rendered as
<img>elements pointing to static SVG files with hardcoded fill/stroke colors (white/off-white) — invisible on light backgrounds.Converted all three logo components from
<img>to inline<svg>elements usingfill="currentColor"/stroke="currentColor". This makes the logos inherit the parent's text color (via Tailwind classes liketext-blue-300/80), adapting correctly to both light and dark modes.Files changed
src/renderer/src/styles/globals.css— 10 new light-mode Tailwind color overridessrc/renderer/src/components/icons/AgentLogos.tsx— inline SVG components with currentColorTest plan
Generated with Claude Code