Theme Architecture & Visual Ergonomics

Visual ergonomics are critical for trading consistency. Extended exposure to high-luminance interfaces during overlapping market sessions (e.g., London / New York crossover) contributes significantly to cognitive fatigue and impulsive decision-making.

ILoveTrading provides a reactive, high-contrast theming engine built specifically for analytical clarity across different lighting environments.

---

Visual Modes

1. Dark Mode (Default)

• Institutional Standard: Tuned with deep slate backgrounds (#0f172a / #020617) and muted structural borders to minimize ocular strain.
• Chart Focus: Maximizes the visual separation of candlestick patterns, equity curves, and PnL heatmaps while keeping axis labels and gridlines unobtrusive.

2. Light Mode

• High-Ambient Environments: Optimized for daytime trading in bright rooms or high-contrast report generation.
• Color Balance: Uses neutral cool-gray palettes to prevent harsh glare while preserving clear green/red win-loss distinction.

---

System Mechanics & Persistence

1. Client-Side Persistence: Theme state is persisted in your browser's localStorage. When refreshing or opening new tabs, the application resolves your visual preference immediately to prevent flash-of-unstyled-content (FOUC).

2. OS & Hardware Integration: The theme engine listens to system-level changes (prefers-color-scheme). If set to system matching, the platform automatically transitions alongside your operating system schedule (e.g., sunrise/sunset transitions).

3. Dynamic Chart Re-rendering: All Recharts components, tooltips, and SVG-rendered calendar heatmaps dynamically recalculate stroke opacities, gridline colors, and fill alpha levels when switching themes without requiring a page reload or data re-fetch.

---

Best Practices