Skip to content

fix(chart): bump dark-theme grid + border contrast one tone#2148

Open
0x-SquidSol wants to merge 1 commit intodcccrypto:mainfrom
0x-SquidSol:fix/chart-grid-contrast
Open

fix(chart): bump dark-theme grid + border contrast one tone#2148
0x-SquidSol wants to merge 1 commit intodcccrypto:mainfrom
0x-SquidSol:fix/chart-grid-contrast

Conversation

@0x-SquidSol
Copy link
Copy Markdown
Contributor

Summary

The chart panel's grid and border alphas sat at the floor of what professional trading UIs use (4% / 6% white on the dark bg), which made the chart blend into the surrounding page bg without giving it a defined panel edge. Bumping each up one tone:

Token Before After
`gridColor` `rgba(255,255,255,0.04)` `rgba(255,255,255,0.07)`
`borderColor` `rgba(255,255,255,0.06)` `rgba(255,255,255,0.10)`

For reference, peer products run grids around 0.06–0.10 and borders 0.08–0.12 on dark themes. The new values land in the bottom of that range so they read as subtle structure rather than as graph paper.

Indicator hierarchy preserved

Layer Effective alpha after bump
Candles / data full color
Bollinger bands per-indicator palette color (independent)
MACD signal line textColor (0.45) × 0.75 = ~0.34
RSI 30 / 70 reference textColor (0.45) × 0.25 = ~0.11
Grid (new) 0.07
Border (new) 0.10

Hierarchy candles > indicator lines > grid is intact.

What stays untouched

  • Light theme — gridColor at 0.05 / borderColor at 0.10 on light bg already sits in industry-standard contrast; the same +3pp bump on light bg would push into "graph paper" territory.
  • Indicator reference lines — RSI 30/70 and MACD signal both derive from `textColor`, not gridColor, so no propagation needed.

Test plan

  • 365 trade + hook tests passing
  • Manual smoke (dark theme): grid lines should be visible without competing with candles. RSI 30/70 dashed lines should still read clearly above the grid.
  • Manual smoke (light theme): no visible regression — values unchanged.

🤖 Generated with Claude Code

The chart panel's grid and border alphas were at the floor of what
professional trading UIs use (4% / 6% white on the dark bg), which
made the chart blend into the surrounding page bg without giving
it a defined panel edge. Bumping each up one tone:

  gridColor:   0.04 → 0.07
  borderColor: 0.06 → 0.10

For reference, peer products run grids around 0.06–0.10 and borders
0.08–0.12 on dark themes. The new values land in the bottom of that
range so they read as subtle structure rather than as graph paper.

Indicator reference lines stay correctly layered above the new grid:

  RSI 30 / 70 dashed lines: derived from theme.textColor at 0.25
    alpha, multiplied through textColor's 0.45 = ~0.11 effective
  MACD signal line:         theme.textColor at 0.75
                          = ~0.34 effective
  Bollinger bands:          per-indicator palette color (independent)

All sit clearly above the 0.07 grid, so the hierarchy candles >
indicator lines > grid is preserved.

Light theme untouched — at gridColor 0.05 / borderColor 0.10 on
the light #FAFAFD bg the contrast is already in industry-standard
range; the same percentage-point bump on a light bg would push
into "graph paper" territory.

Tests: 365 trade + hook tests passing.
@0x-SquidSol 0x-SquidSol requested a review from dcccrypto as a code owner May 7, 2026 16:20
@vercel
Copy link
Copy Markdown

vercel Bot commented May 7, 2026

@0x-SquidSol is attempting to deploy a commit to the Khubair Nasir's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 7, 2026

Warning

Rate limit exceeded

@0x-SquidSol has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 42 minutes and 46 seconds before requesting another review.

To continue reviewing without waiting, purchase usage credits in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 50621adc-a96a-4ff8-9e0c-38a2cad5d420

📥 Commits

Reviewing files that changed from the base of the PR and between e651e93 and 2c68151.

📒 Files selected for processing (1)
  • app/hooks/useChartTheme.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant