forked from 0xWheatyz/SPARC
agent-company
e0ed39908e
Replace hardcoded dark-theme hex colors in recharts components (tooltips, axes) with a useChartTheme hook that reads the current theme from ThemeContext. Charts now render correctly in both light and dark mode. Closes leeworks-agents/SPARC#1324 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
import { useTheme } from './ThemeContext';
|
|
|
|
/**
|
|
* Returns theme-aware color values for recharts components.
|
|
*
|
|
* Recharts accepts only raw color strings (not CSS variables),
|
|
* so this hook bridges the Tailwind/CSS-variable theme system
|
|
* to the imperative recharts API.
|
|
*/
|
|
export function useChartTheme() {
|
|
const { theme } = useTheme();
|
|
const isDark = theme === 'dark';
|
|
|
|
return {
|
|
/** Axis tick and grid line stroke color */
|
|
axisStroke: isDark ? '#94a3b8' : '#64748b',
|
|
/** Tooltip container background */
|
|
tooltipBg: isDark ? '#1e293b' : '#ffffff',
|
|
/** Tooltip container border */
|
|
tooltipBorder: isDark
|
|
? '1px solid rgba(99, 102, 241, 0.3)'
|
|
: '1px solid rgba(99, 102, 241, 0.2)',
|
|
/** Tooltip label text color */
|
|
tooltipLabelColor: isDark ? '#f8fafc' : '#0f172a',
|
|
/** Tooltip item text color */
|
|
tooltipItemColor: isDark ? '#e2e8f0' : '#334155',
|
|
/** Convenience: full contentStyle object for recharts Tooltip */
|
|
tooltipContentStyle: {
|
|
backgroundColor: isDark ? '#1e293b' : '#ffffff',
|
|
border: isDark
|
|
? '1px solid rgba(99, 102, 241, 0.3)'
|
|
: '1px solid rgba(99, 102, 241, 0.2)',
|
|
borderRadius: '8px',
|
|
color: isDark ? '#f8fafc' : '#0f172a',
|
|
},
|
|
/** Convenience: labelStyle for recharts Tooltip */
|
|
tooltipLabelStyle: {
|
|
color: isDark ? '#f8fafc' : '#0f172a',
|
|
},
|
|
};
|
|
}
|