fix(theme): legible semantic colors in light mode - #2423
Conversation
The light theme never overrode --long/--short/--cyan/--warning/--good/ --critical, so the dark theme's neons rendered on white — #14F195 lands at ~1.4:1, making every positive-PnL numeral, Long fill, and APR figure near-invisible. Add darker light-mode tones (emerald-600/red-600/amber-700/ teal-700) chosen to stay legible both as text on white and as button fills (Long pairs with black text, Short with white). Also theme the three hardcoded chart-canvas colors (mark/liq/entry price lines and the tick-direction axis tag) through ChartTheme — canvas can't read CSS vars, and these stayed neon in light mode. The tick handler reads the theme through a ref since its effect deliberately deps only on slabAddress; the theme-flip effect now repaints existing overlay lines. Verified in the browser at 1440x900: markets, trade (mock), and stake pages in light mode; dark mode pixel-identical. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Item 3 of the terminal UX fixes.
Problem: the
[data-theme="light"]block never overrode the semantic color tokens, so dark-theme neons rendered on white —--long/--cyan#14F195 is ~1.4:1 on white (near-invisible),--warning~2.1:1. Every positive PnL numeral, APR figure, and the Long side of the ticket was affected. Three chart-canvas colors (mark/liq/entry lines, tick-direction axis tag) were also hardcoded neon.Fix:
--long/--good#059669 (3.9:1 text, 5.9:1 under black fill-text),--short/--critical#DC2626 (4.5:1 / 4.6:1 with white),--warning#B45309 (4.6:1),--cyan#0F766E (4.9:1),--cyan-mutedretinted to match.useChartThemelight palette aligned to the same values; newneutralLine/entryLinefields.TradingChartcanvas colors themed (ref-read in the tick handler to avoid stale closures; theme-flip effect repaints existing overlay lines).Verified in the browser (local dev, 1440×900): markets, trade (mock mode), and stake pages in light mode — candles, PnL numerals, APR figures, and the Mark axis tag all legible; dark mode confirmed pixel-identical.
🤖 Generated with Claude Code