From 2c681513861c4552ed7c7a1cc4cf111f7fdbc454 Mon Sep 17 00:00:00 2001 From: 0X-SquidSol Date: Thu, 7 May 2026 12:19:49 -0400 Subject: [PATCH] fix(chart): bump dark-theme grid + border contrast one tone MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- app/hooks/useChartTheme.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/app/hooks/useChartTheme.ts b/app/hooks/useChartTheme.ts index 7afb2795..917c0a22 100644 --- a/app/hooks/useChartTheme.ts +++ b/app/hooks/useChartTheme.ts @@ -16,8 +16,17 @@ export interface ChartTheme { const DARK_THEME: ChartTheme = { bg: "#0D0D0F", textColor: "rgba(255,255,255,0.45)", - gridColor: "rgba(255,255,255,0.04)", - borderColor: "rgba(255,255,255,0.06)", + // Grid bumped from 0.04 → 0.07 and border from 0.06 → 0.10 — the + // earlier alphas sat at the very floor of what professional trading + // UIs use (Bloomberg / TradingView / Binance run grids around 0.06– + // 0.10) and made the chart blend into the page bg. The new values + // give the panel a defined edge without competing with the data. + // Indicator reference lines (RSI 30/70, MACD signal) derive from + // textColor at ~25% / 75% alpha, which after multiplying through + // textColor's own 0.45 lands at ~0.11 / ~0.34 effective — still + // clearly above this 0.07 grid, so the hierarchy holds. + gridColor: "rgba(255,255,255,0.07)", + borderColor: "rgba(255,255,255,0.10)", upColor: "#22c55e", downColor: "#ef4444", volUpColor: "rgba(34,197,94,0.6)",